如何将自定义类添加到我的JQuery UI Datepicker

Question

我有几个输入触发JQuery UI datepickers,例如

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

对于每个创建的jQuery UI的日期选择器,我想在此基础上触发,即输入的ID分配一个自定义类.one,.two,.three

因此,如果第一个输入触发了datepicker,则生成的HTML将如下所示:

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

注意第一堂课 one

这可能吗？createdatepicker 的' '方法似乎对我不起作用......

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')选择器删除所有类(即s),您可能希望将其限制为仅选取<input>已修改为日期选择器的元素.

编辑只是有一个upvote为此并查看代码,它似乎没有做我解释它应该(也许我误解了这个问题!).所以,这里有一个版本,它将一个等于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);
   }
});?