Custom css for only few jquery datepickers?

Question

I have a few Jquery datepickers on form.

$('#start, #end').datepicker({
    changeYear: true,
    dateFormat: 'yy',
    onChangeMonthYear: function (dateText, inst) {
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, 1));
    }
});

$("#fulldate").datepicker({dateFormat: "dd-mm-yy"});

I need to hide some fields in first datepicker calls, and nothing change in last call. If i wrote something like this it change all instance of datepicker.

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

Thx for help.

See http://stackoverflow.com/questions/6832622/how-to-add-a-custom-class-to-my-jquery-ui-datepicker — Salman A, Oct 08 '14 at 11:31

score 1 · Accepted Answer · answered Oct 08 '14 at 13:15

This code works perfect for me:

$('#start, #end').datepicker({
    changeYear: true,
    dateFormat: 'yy',
   beforeShow: function(dateText, inst) {
        if ($(this).hasClass('hideCalendar')){
            $(inst.dpDiv).addClass('calendar-off');
        } else
            $(inst.dpDiv).removeClass('calendar-off');
    },
    onChangeMonthYear: function (dateText, inst) {
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, 1));
    }
});

css:

.calendar-off table.ui-datepicker-calendar {
     display:none !important;
}

score 0 · Answer 2 · answered Oct 08 '14 at 11:17

0

you can use the event onSelect on datepicker as follows

$('Your-Selector').datepicker({
onSelect : function(){
}
});

for further documentation refer this link

hope this helps .......

answered Oct 08 '14 at 11:17

Mayank

1,351
5
23
42

Thx. But beforeShow more convenient. – Doom Oct 08 '14 at 13:12

Custom css for only few jquery datepickers?

2 Answers2