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 datepicker，我想根据触发它的输入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

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

Answer 1

在显示 datepicker 之前，

beforeShow可用于操纵class。

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

Demo（使用jQuery 1.6.2但需要jQuery＆gt; v1.4用于.removeClass()，它需要一个函数）

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

编辑刚刚对此进行了观察并查看了代码，它似乎没有按照我解释的那样做（也许我误解了这个问题！）。因此，这是一个版本，它将等同于id的{{1}}的类添加到日期选择器中。也使用原始<input>，因此这将适用于jQuery＆gt; V1.2。

.removeClass()

Answer 2

Jquery UI自定义下载允许您为主题添加自定义前缀，例如您添加了前缀“.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]{}

Answer 4

您可以尝试为多个日期选择器添加CSS类。

但是更高级的jQuery UI-v1.9.1并非最新版本，最新版本是2012年10月25日

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：

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

工作小提琴：

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

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

4 个答案: