I recently had a requirement to close the JQuery Datepicker when the “Today” button was clicked. I searched through the API and couldn’t find a way to add an additional event to this button. I could modify the component code but I prefer not to so that updating JQuery doesn’t become a task in the future. I came up with the below solution.
By examining the button I found that it is given a class of “ui-datepicker-current”. This will be our selector to bind the event that we want.
So first you setup the datepicker as normal.
$( “#datepicker” ).datepicker();
At this point the today button will be in the DOM so you can bind an event to it using the class selector.
So that works great for one Datepicker but what if you have many.
First initialize your Datepickers. You will probably have a class to identify them as I do. I am using a class of “dateformat”.
$( “.dateformat” ).datepicker();
Then bind a click event to your Datepicker fields to update the click event on the button each time.