CODEWITHSUNDEEP
javascriptjquerydatedatepicker
Dom
Dom

Reputation: 254

jQuery DatePicker - How do I show today's month instead of the selected dated?

So I've been looking everywhere for an answer. Including jQuery's datepicker API website and I can't seem to find a suitable answer.

This is what I would like to happen. When the text field is pressed and the datepicker pops up, I would like the calendar month to show this month, rather than defaulting to any previously selected date.

I still want to be able to select next and previous on the months. So setting minDate is not an option.

So for example, a user has previously selected 03/03/2013. The user then clicks the textbox, which pops up the date picker again, the month displayed is today's month rather than March. However, 03/03/2013 is still selected.

Thanks!

Code is very vanilla...

$(document).ready(function () {
$(".datePickerShowToday").datepicker({
            dateFormat: 'dd/mm/yy',
            buttonText: 'Click here to select a date',
            onSelect: function () {

            }
        });
});

HTML Code:

<input type="text" id="NotificationDate" class="datePickerShowToday" />

Upvotes: 3

Views: 150

Answers (2)

blgt
blgt

Reputation: 8205

You can do this with the $.datepicker._gotoToday function [this is what the datepicker uses for Ctrl + Home]. However, the widget doesn't provide an open event (it has beforeShow but that won't work in your case as it only runs before the widget is drawn). You can simulate this by using .focus on the input field and only binding one handler at a time (since keeping focus on the datepicker itself also triggers focus):

$( ".datePickerShowToday" ).datepicker({
    onClose: function() {
        $( ".datePickerShowToday" ).one("focus", function() {
            $.datepicker._gotoToday(this);
        });
    }
});
$( ".datePickerShowToday" ).one("focus", function() {
    $.datepicker._gotoToday(this);
});

Here's a fiddle with the above: http://jsfiddle.net/4vskg74t/

Upvotes: 2

aleksandar
aleksandar

Reputation: 2399

One way to do it:

$(document).ready(function(){

    $('.datePickerShowToday').datepicker();   

    $(".datePickerShowToday").click(function(){   
        $('.datePickerShowToday').datepicker('setDate', null);
    });

});

Upvotes: 0

Related Questions