Как добавить пользовательский класс в JQuery UI Datepicker

У меня есть несколько входов, которые вызывают JQuery UI datepickers, например.

<input id="one" type="text"/>
<input id="two" type="text"/>
<input id="three" type="text"/>
<input id="four" type="text"/>

Для каждого созданного дампикера пользовательского интерфейса jquery я хочу назначить пользовательский класс на основе идентификатора входа, который вызвал его, т.е. .one, .two, .three

Итак, если датапикер запускается первым входом, получившийся HTML будет выглядеть так:

  <div class="one ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div">

Обратите внимание на первый класс one

Возможно ли это? Метод 'create' для datepicker, похоже, не работает для меня...

Ответ 1

beforeShow можно использовать для управления class перед показом datepicker.

$('input').datepicker({
   beforeShow: function(input, inst) {
       $('#ui-datepicker-div').removeClass(function() {
           return $('input').get(0).id; 
       });
       $('#ui-datepicker-div').addClass(this.id);
   }
});

Демо (используя jQuery 1.6.2, но для jQuery > v1.4 для .removeClass(), который принимает функцию)

Примечание. Это работает, удаляя все классы (т.е. <input> id s) с помощью селектора ** , который вы можете ограничить, чтобы просто выбрать <input> элементы, которые были изменены в сборщики даты.

Изменить. У меня была надстройка для этого и, глядя на код, казалось, что он не делал то, что я объяснял (может быть, я неправильно понял вопрос!). Итак, вот версия, которая добавляет класс, равный id <input>, нажав на datepicker. Также используется оригинальный .removeClass(), поэтому он будет работать с jQuery > v1.2.

var inputIds = $('input').map(function() {
    return this.id;
}).get().join(' '); // space separated ready for removeClass

$('input').datepicker({
   beforeShow: function(input, inst) {
       $('#ui-datepicker-div').removeClass(inputIds);
       $('#ui-datepicker-div').addClass(this.id);
   }
});

Ответ 2

Пользовательская загрузка JQuery пользовательского интерфейса позволяет добавить пользовательский префикс к вашей теме, скажем, вы добавили префикс ".datepicker_wrapper", вы можете добавить этот класс к вашему датпикеру следующим образом:

 $('.datepicker').datepicker({
      beforeShow : function(){
           if(!$('.datepicker_wrapper').length){
                $('#ui-datepicker-div').wrap('<span class="datepicker_wrapper"></span>');
           }
      }
 });

Ответ 3

Я бы просто установил атрибут и использовал его вместо класса. в этом случае вам не нужно ничего удалять, потому что он будет отменен

$('input').datepicker({
   beforeShow: function(input, inst) {
       $('#ui-datepicker-div').attr("inputId",this.id);
   }
});

чтобы повлиять на JQ

$('#ui-datepicker-div[inputId=your_ID_here]')

в CSS

#ui-datepicker-div[inputId=your_ID_here]{}

Ответ 4

Вы можете попробовать это, чтобы добавить CSS классы для нескольких DatePicker.

Но помните jQuery UI - v1.9.1 не является последней последней версией от 2012-10-25

HTML:

<input type="text" id="datepicker1" name='date1'/>
<input type="text" id="datepicker2" name='date2'/>

Jquery:

$('#datepicker1').datepicker( {
    changeMonth: false,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy',
    showAnim: '',
    beforeShow: function( input, inst){
      $(inst.dpDiv).addClass('just-yaer');
    },
    onClose: function(dateText, inst) { 
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, 1));
        $(inst.dpDiv).removeClass('just-yaer');
    }
});

$('#datepicker2').datepicker( {
    changeMonth: true,
    changeYear: false,
    showButtonPanel: true,
    dateFormat: 'MM',
    showAnim: '',
    beforeShow: function( input, inst){
      $(inst.dpDiv).addClass('just-month');
    },
    onClose: function(dateText, inst) { 
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        $(this).datepicker('setDate', new Date(month, 1));
        $(inst.dpDiv).removeClass('just-month');
    }
});

CSS:

.just-yaer .ui-datepicker-prev,
.just-yaer .ui-datepicker-next,
.just-yaer .ui-datepicker-month,
.just-yaer .ui-datepicker-calendar {
    display: none;
}

.just-month .ui-datepicker-prev,
.just-month .ui-datepicker-next,
.just-month .ui-datepicker-year,
.just-month .ui-datepicker-calendar {
   display: none;
}

Рабочая скрипка:

http://jsfiddle.net/g6mnofu2/27/