如何添加自定义类到我的JQuery UI Datepicker [英] How to add a custom class to my JQuery UI Datepicker

问题描述

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

 < input id =onetype =text /> 
< input id =twotype =text/> 
< input id =threetype =text/> 
< input id =fourtype =text/> 
 

对于每个创建的jQuery UI日期选择器，我想根据输入的ID分配一个自定义类触发它，即 .one ， .two ， .three

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

 < div class =one ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-allid =ui-datepicker-div> 
  

注意第一个类 one

这可能吗？

解决方案 / div>

beforeShow 可以用来操作类，然后再显示 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）with a general $（'input'） 选择器，您可能想限制只是选择已修改为日期选择器的< input> 元素。

编辑只是有一个upvote这个和看代码，它似乎没有做我应该解释的（也许我误解了这个问题！所以，这里有一个版本，它添加了一个等于< input> 点击的 id 日期戳。还使用原始的 .removeClass（），因此这将与jQuery> v1.2一起使用。

  var inputIds = $（'input'）。map（function（）{
 return this.id; 
}）get（）。 //空格分隔准备好removeClass 
 
 $（'input'）。datepicker（{
 beforeShow：function（input，inst）{
 $（'＃ui-datepicker- div'）。removeClass（inputIds）; 
 $（'＃ui-datepicker-div'）。addClass（this.id）; 
} 
}）; 
  

I have several inputs which trigger JQuery UI datepickers e.g.

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

For each jquery UI datepicker created, I want to assign a custom class based on the ID of the input which triggered it i.e. .one, .two, .three

So if the datepicker is triggered by the first input the resulting HTML will look like:

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

Note the first class one

Is this possible? The 'create' method of the datepicker does not seem to work for me...

解决方案

beforeShow can be used to manipulate the class before showing the datepicker.

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

Demo (using jQuery 1.6.2 but needs jQuery > v1.4 for the .removeClass() which takes a function)

Note This works by removing all the classes (i.e. <input> ids) with a **general $('input') selector which you might want to limit to just pick up the <input> elements that have been modified into date pickers.

Edit Just had an upvote for this and looking at the code, it did not seem to do what I explained it should (maybe I misunderstood the question!). So, here is a version which adds a class equal to the id of the <input> clicked on to the datepicker. Also uses the original .removeClass() so this will work with 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);
   }
});​

这篇关于如何添加自定义类到我的JQuery UI Datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！