Multi tool use

jQuery UI datepicker in angular 2+ components

I have a jquery datepicker in my angular 2 component:

<input type="text" name="datepicker" id="youngestDB" value={{ details.YoungestDB | date:'dd/MM/yyyy' }}"


I need to use the date value each time a user selects a different date. From the datepicker API I have learned about an event listener function called 'onSelect'.

When I try to use it in a follower manner:

$('#youngestDB').datepicker({
locale: $.datepicker.regional["he"],
onSelect: (selectedDate, inst) => {
this.selectedDate = selectedDate;
}, ...
});


it works fine and sets my "selectedDate" property. However, I don't need just to set it, I need to trigger a TS function each time it changes, i.e:

onSelect: (selectedDate, inst) => {
this.changeDate(selectedDate);
}, ...


the function is triggered, but unfortunately the page is refreshed on every date selection in the UI. I cannot figure out why, as from what I understand, jQuery UI datepicker uses AJAX and is not supposed to refresh the page on date selection. Also, this happens only when I trigger TS function in the arrow function of the "onSelect" listener and does not happen when I just set an internal property. What am I doing wrong?

EDIT: I solved this by implementing a different approach - listening to the "input change" event on the datepicker input and then assigning the selectedDate property in the callback:

ngAfterViewInit() {
$('#youngestDB').on("input change", (e) => {
this.selectedDate = e.target.value;
...
}
}


Inside the callback other TS functions triggered correctly and there were no page refreshes.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.