JQuery UI Datepicker Today Link

Question

I am using jQuery UI Datepicker for a project, but I need the Today button to enter a date in the text box when the user clicks on it. By default, it simply selects a date, but does not enter it in the field. I assume this will require a quick modification of my jQuery UI file, but what can I change? Thank.

Edit: I tried this: http://dev.jqueryui.com/ticket/4045 , but that wont work!

Answer 1

I found a solution that works here: http://forum.jquery.com/topic/jquery-ui-datepicker-today-button . Just use this jQuery snippet (I just entered it with the datepicker initialization code):

$('button.ui-datepicker-current').live('click', function() { $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide'); }); 

The only problem I encountered was that the focus will remain in the input window after clicking the "Today" button, which means that you cannot click it again to select a different date. This can be fixed by blur () suffix:

 $('button.ui-datepicker-current').live('click', function() { $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); }); 

I also did not like the style of the Today button - maybe it was just my theme or something like that, but the button today was a little gray compared to the done button. This can be fixed using the following CSS (may differ for different topics, I'm not sure):

 /* This edit gives five levels of specificity, thus making it override other styles */ .ui-datepicker div.ui-datepicker-buttonpane button.ui-datepicker-current { font-weight: bold; opacity: 1; filter:Alpha(Opacity=100); } 

Answer 2

I understand that this is rather a late answer, but I just ran into this problem and the solution turned out to be the same as a charm.

However, the button style issue is caused by the jQuery ui classes. I added the following code for the click text-input action:

 $('.date').click(function() { $('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary'); }); 

This removes the wrong class and adds the correct key to the button, making it the same as the Finish button. It doesn't matter which theme you use. For completeness, here is all my code:

 $('.date').datepicker({ dateFormat: 'yy-mm-dd', showButtonPanel: true }).click(function() { $('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary'); }); $('button.ui-datepicker-current').live('click', function() { $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); }); 

Just add <input type="text" class="date" value="" /> and you will be fine.