Jquery datepicker only year and month how to set CSS to hide calendar when there are severals datepickers?

Question

I try to set a Jquery DatePicker, with only month and year. And I need to disable the calendar display because the user will not use it.

To perform this datepicker I take a look to this post which is very interesting : jQuery UI DatePicker to show month year only .

It works great, there no problem with the datepicker. But in my webpage, I need two datepicker. The first with the basic configuration, and the seconde with only months and years.

So if I edit the class for the second like this :

<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>

The result is applied on the two datepickers.

Then I decide to use the function focus and blur to change the state of the class for my datepicker like this :

$("#DateTimePicker2").focus(function () {
    $(".ui-datepicker-calendar").hide();      
});

$("#DateTimePicker2").blur(function () {
    $(".ui-datepicker-calendar").show();
});

It just work one time, at the first click, then the calendar appears again.

Is there another way to change the CSS class only for the recond datepicker ?

Here is the datepicker's code :

$("#DateTimePicker2").datepicker({
    dateFormat: "mm/yy", changeMonth: true,
    changeYear: true,
    changeDay: false,
    yearRange: '-1:+5',
    monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
    onChangeMonthYear: function (year, month, inst) { $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), new Date(year, month - 1, 1))); $(this).datepicker('hide'); },
    onClose: function (dateText, inst) { var date = new Date(inst.selectedYear, inst.selectedMonth, 1); $(this).datepicker('option', 'defaultDate', date); $(this).datepicker('setDate', date); },
    beforeShow: function (input, inst) { inst.dpDiv.addClass('datepicker-month-year'); }
}).datepicker("setDate", new Date())

score 1 · Accepted Answer · answered Jan 07 '16 at 10:05

You can restrict your CSS to only hide the calendar when the datepicker has a custom class you add in beforeShow, eg:

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

and then:

$("#DateTimePicker1").datepicker({
    beforeShow: function (input, inst) {
        inst.dpDiv.removeClass("no-calendar-here");
    }
});
$("#DateTimePicker2").datepicker({
    beforeShow: function (input, inst) {
        inst.dpDiv.addClass("no-calendar-here");
    }
});

Here's an example fiddle, derived from the question linked: http://jsfiddle.net/zd2amwtk/1/

Jquery datepicker only year and month how to set CSS to hide calendar when there are severals datepickers?

1 Answers1