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

How to add a custom class to my JQuery UI Datepicker

提问by Mazatec

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

我有几个触发 JQuery UI 日期选择器的输入，例如

<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

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

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

因此，如果日期选择器由第一个输入触发，则生成的 HTML 将如下所示：

  <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

注意第一类 one

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

这可能吗？create日期选择器的 ' ' 方法似乎对我不起作用......

回答by andyb

beforeShowcan be used to manipulate the classbefore showing the datepicker.

beforeShow可用于操作classbefore 显示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)

演示（使用 jQuery 1.6.2 但需要 jQuery > v1.4.removeClass()才能使用一个函数）

NoteThis 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.

注意这是通过<input>id使用 **general$('input')选择器删除所有类（即s）来工作的，您可能希望将其限制为仅选取<input>已修改为日期选择器的元素。

EditJust 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 idof the <input>clicked on to the datepicker. Also uses the original .removeClass()so this will work with jQuery > v1.2.

编辑刚刚对此表示赞同并查看代码，它似乎没有按照我的解释进行操作（也许我误解了这个问题！）。所以，这里有一个版本，它添加了一个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);
   }
});?

回答by Herbi Shtini

Jquery UI custom download allows you to add a custom prefix to your theme, say you added a prefix ".datepicker_wrapper" you can add this class to your datepicker this way :

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

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

回答by Zeev G

I would simple set an attribute and use it instead of the class. in this case you dont need to remove anything because it will be overridden

我会简单地设置一个属性并使用它而不是类。在这种情况下，您不需要删除任何内容，因为它将被覆盖

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

the to affect in JQ

JQ中的影响

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

in CSS

在 CSS 中

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

回答by SoKo

You can try this to add css Classes for multiple datepicker.

您可以尝试使用此方法为多个日期选择器添加 css 类。

But remeber jQuery UI - v1.9.1 is not up-to-date last version is from 2012-10-25

但请记住 jQuery UI - v1.9.1 不是最新的最新版本是 2012-10-25

HTML:

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:

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;
}

Working fiddle:

工作小提琴：

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

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