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

Question

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

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

Для каждого созданного указателя даты jQery UI я хочу назначить пользовательский класс на основе идентификатора входа, который его вызвал, т.е. .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» метод выбора даты, похоже, не работает для меня ...

Answer 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 с) с помощью ** общего $('input') селектора, который вы можете ограничить, просто выбрав <input> элементы, которые были изменены в средствах выбора даты.

Редактировать Просто был голос за это и, глядя на код, он, похоже, не делал то, что я объяснил, что должен (возможно, я неправильно понял вопрос!). Итак, вот версия, которая добавляет класс, равный id из <input>, на который нажал указатель даты. Также использует оригинальный .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);
   }
});​

Answer 2

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

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

Answer 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]{}