midstack midstack - 7 months ago 8
Javascript Question

Show wrong month and year when refocused same datepicker input with using jquery ui datepicker

I want to show only month and year. If I refocused same input after select a date, it shows wrong month and year not show previously selected month and year. For example I select December 2010 and then refocused same input it shows April 2015 as below image. How can I?

enter image description here

HTML

<input type="text" class="dp" readonly="true">


CSS

.ui-datepicker-calendar {
display: none;
}


JS

$('.dp').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm.yy',
onClose: function (dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
}
});


http://jsfiddle.net/46tx62vu/

Answer

The datepicker expects to be able to parse the displayed version of the date into a javascript date object.

One way to do this is to add a custom parseDate function for your special date format. The code below looks for the special format of "mm.yy" and if found, parses the value into a date. If the format is anything else, pass processing to the original datepicker.parseDate.

var standardParseDate = $.datepicker.parseDate;

function customParseDate( format, value, options ) {
    if (format === 'mm.yy') {
        var dt = (value + ".").split(".");

        var month = parseInt(dt[0]) - 1;
        var year = parseInt(dt[1]);

        if (year < 100) {
            year += 2000;
        }

        if (isNaN(month) || isNaN(year)) {
            return null;
        }

        return new Date(year, month, 1);
    } else {
        return standardParseDate(format,value,options);
    }
}

$.datepicker.parseDate = customParseDate;

JSFiddle: http://jsfiddle.net/3drfd35t/

Comments