jQuery UI Datepicker Today Link

Question

I'm using the jQuery UI Datepicker for a project, but need the today button to enter the date into the textfield when a user clicks on it. By default it just selects the date but doesn't enter it into the field. I'm guessing this will just require a quick mod of my jQuery UI file, but what do I change? Thanks.

Edit: I tried this: http://dev.jqueryui.com/ticket/4045 but it doesn't work!

Answer 1

I found a solution that works here: http://forum.jquery.com/topic/jquery-ui-datepicker-today-button. Just use this snippet of jQuery (I just put it in with my datepicker init code):

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

The only problem I had was that focus would remain in the input box after clicking the "today" button, which means you cant click it again to select a different date. This can be fixed by suffixing blur():

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

I also didn't like the styling on the "today" button - maybe it was just my theme or something, but the today button was kind of greyed out compared to the "done" button. This can be fixed with the following CSS (may vary for different themes, 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 realize this is somewhat of a late reply, but I just ran in to this issue and the solution proved works like a charm.

However, the button-styling issue is caused by jQuery ui classes. I added the following code to the click action of the date text-input:

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

This removes the wrong class, and adds the correct class to the button, making it the same as the "Done" button. It should not matter what theme you are using. For completeness, here's my entire 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 a <input type="text" class="date" value="" />, and you're good to go.