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

Question

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

<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

因此，如果第一次输入触发了日期拾取器，结果HTML将看起来像:

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

注意第一类one

这可能吗?日期选择器的' create '方法似乎不适合我…

Answer 1

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

编辑刚刚对此进行了投票并查看了代码，它似乎没有做我解释它应该做的事情(也许我误解了这个问题!)。所以，这里有一个版本，它添加了一个类，等于点击的<input>的id到日期选择器。也使用原来的.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').datepicker({
      beforeShow : function(){
           if(!$('.datepicker_wrapper').length){
                $('#ui-datepicker-div').wrap('<span class="datepicker_wrapper"></span>');
           }
      }
 });

Answer 3

您可以尝试为多个日期拾取器添加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/

Answer 4

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

$('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 5

$("#departure-date, #return-date").datepicker({
    // other options...
    beforeShow: function (input, instance) {
        // Add a custom className to the datepicker element
        $(instance.dpDiv).addClass("my-datepicker");
    },
    // other options...
});