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

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

对于每个创建的jquery UI datepicker，我想根据触发它的输入ID分配一个自定义类，即.one ， .two ， .three

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

注意第一类

这可能吗？ datepicker的’ create ‘方法对我来说似乎不起作用……

Answer 1

beforeShow可用于在显示beforeShow之前操纵class 。

 $('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），您可能希望将其限制为仅选取已修改为日期选择器的元素。

编辑只是有一个upvote为此并查看代码，它似乎没有做我解释它应该（也许我误解了这个问题！）。 因此，这是一个版本，它添加一个等于的id的类，点击到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); } });​ 

Answer 2

Jquery UI自定义下载允许您为主题添加自定义前缀，假设您添加了前缀“.datepicker_wrapper”，您可以通过以下方式将此类添加到日期选择器中：

  $('.datepicker').datepicker({ beforeShow : function(){ if(!$('.datepicker_wrapper').length){ $('#ui-datepicker-div').wrap(''); } } }); 

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