CODEWITHSUNDEEP
jqueryjquery-uidatepicker
Revenant
Revenant

Reputation: 2984

Bug with jquery UI datepicker using only Months and Years

I found piece of code below on SOF earlier today.

$("input[name=startDate], input[name=endDate]").datepicker({
    minDate: new Date("2008-09-01"), 
    maxDate: "+5Y",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: false,
    dateFormat: 'mm.yy',
    onClose: function(dateText, inst) { 
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1));
    },
    beforeShow : function(input, inst) {
        if ((datestr = $(this).val()).length > 0) {
            year = datestr.substring(datestr.length-4, datestr.length);
            month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
            $(this).datepicker('option', 'defaultDate', new Date(year, month));
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    }
});

As you can see I would like to use them on 2 different inputs to be able to search between 2 given months & years.

There is a problem when I click the same input 2nd time;

This goes on till it hits minDate value (2008).

I will be really glad if you could help me out with fixing this bug.

Upvotes: 0

Views: 1005

Answers (1)

William Niu
William Niu

Reputation: 15853

The culprit is the assignment to month inside beforeShow. It attempts to get the readable month names from datepicker, e.g. "July". But what it really wants is just the number representing the month. So, just change that line to:

  var month = datestr.substring(0, datestr.length-5) - 1;

See the demo here: http://jsfiddle.net/william/GyP2u/.

Upvotes: 2

Related Questions