JQuery DatePicker Close On Today Button Click

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.

$( “.ui-datepicker-current”).click(function(){$(“#datepicker”).datepicker(“hide”);});

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.

$(“.dateformat”).click(function(){
$( “.ui-datepicker-current”).click(function(){$(“.dateformat”).datepicker(“hide”);});
});

One thought on “JQuery DatePicker Close On Today Button Click

Leave a comment

Your email address will not be published. Required fields are marked *


+ one = 10