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

Posted 2023-05-07

【中文标题】如何将自定义类添加到我的 JQuery UI Datepicker

【英文标题】：How to add a custom class to my JQuery UI Datepicker

【发布时间】：2011-10-13 12:59:40

【问题描述】：

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

<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

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

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

注意头等舱one

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

【问题讨论】：

这个问题不清楚。添加您目前拥有的 JS 代码，并更详细地指出您想要做什么。

我已经编辑了这个问题 - 有什么不清楚的地方？我想为每个 datepicker div 添加一个类，类名应该与触发 datepicker 的元素的 ID 相同。

并非不可能（因为我似乎记得过去曾一起修改一些东西来更改一些 CSS）但实际上只有一个 <div class="ui-datepicker"> 元素，不管你有多少 <input>s。

我知道，但我仍然需要这个功能

【参考方案1】：

beforeShow 可用于在显示 datepicker 之前操作 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 > v1.4 来获取 .removeClass() 函数）

注意这可以通过使用 **general $('input') 选择器删除所有类（即 <input> ids）来实现，您可能希望将其限制为仅选择 @987654330 @ 已被修改为日期选择器的元素。

编辑刚刚对此表示赞成并查看代码，它似乎没有按照我解释的那样做（也许我误解了这个问题！）。所以，这是一个版本，它添加了一个等于<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);
   
);​

【讨论】：

$('#ui-datepicker-div') 可以替换为 inst.dpDiv 以获得更清洁/更好的解决方案:)

这会影响网站上的所有日期选择器，而不仅仅是当前的，甚至那些没有绑定 $('input').datepicker();

@xcy7e웃 只有一个日期选择器。 jQueryUI 一直都是这种情况。使用多少次都没关系。 DOM 中只添加了 1 个。此解决方案正确添加了<input> 的id，这就是问题所在。

你能告诉一个常见的方法来拥有多个在设计和外观上彼此不同的日期选择器吗？

@xcy7e 示例代码使用输入控件的 id，因此您可以调整每个控件的 css。例如，.ui-datepicker.MyControlId color: black; 。如果你想为不同的屏幕或页面的不同区域设置不同的样式，你可以调整代码来检查某些父级的存在：if ($('#' + this.id).parents('.some-parent-class').length) $('#ui-datepicker-div').addClass('a-special-class');

【参考方案2】：

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

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

【参考方案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]

【参考方案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/