将类添加到日期选择器选择中

Add class to datepicker select

本文关键字：选择器 选择 日期 添加      更新时间：2023-09-26

我需要在Datepicker的选择中添加一个类（由插件使用）。我已经尝试过beforeShow，但此时尚未创建选择。

下面是我的代码片段：

jQuery('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'mm/yy',
        yearRange: new Date().getFullYear() + ':' + (6 + new Date().getFullYear()),
        onClose: function(dateText, inst) {
            var month = jQuery("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = jQuery("#ui-datepicker-div .ui-datepicker-year :selected").val();
            jQuery(this).datepicker('setDate', new Date(year, month, 1));
        },
        beforeShow: function(){
            var month =jQuery("#ui-datepicker-div .ui-datepicker-month");
            var year = jQuery("#ui-datepicker-div .ui-datepicker-year");
            if(!month.hasClass('select-personalizado')){
                month.addClass('select-personalizado').addClass('select-dark');
            }
            if(!year.hasClass('select-personalizado')){
                year.addClass('select-personalizado').addClass('select-dark');
            }
        }
    });
.ui-datepicker-current, .ui-datepicker-calendar { display: none; }
.ui-widget-header { background: 0 none !important; border: 0 none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css" type="text/css" media="all" /> 
<input type="text" class="date-picker"/>

我需要添加的类是select-personalizado和select-dark

Ok-这是将类名添加到日期选择器选择框的最后（干净）方法

事实上，这很容易：

  • 下载的日期选择器（jQueryUI）源代码
  • 增加了两个选项：customClassYear, customClassMonth
  • 如果不是false（默认值），它们将被添加到插件生成的html中

演示：**jsFiddle演示**

jQuery UI最新-在github上自定义：**github的源代码完整版**

用法：

    //Date picker:
$('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'mm/yy',
        yearRange: new Date().getFullYear() + ':' + (6 + new Date().getFullYear()),
        onClose: function(dateText, inst) {
            var month = jQuery("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = jQuery("#ui-datepicker-div .ui-datepicker-year :selected").val();
            jQuery(this).datepicker('setDate', new Date(year, month, 1));
        },
        customClassMonth: "select-personalizado select-dark",
        customClassYear: "select-personalizado select-dark"
 });

备注：

  1. 你可以自己缩小这个自定义版本
  2. 没有删除我的其他答案，因为它可能对其他类似的需求有所帮助
  3. 行编辑：（7988-79909662966396739707）

玩得开心。

问题是，每次显示/隐藏容器时，插件（日期选择器）都会删除并附加选择框。

您需要在容器#ui-datepicker-div淡入（fadeIn）之前触发您的函数

我的解决方案是使用一个快速插件扩展fadeIn函数，为他添加一个beforeFadeIn / afterFadeIn事件，并处理你的函数（这将疯狂地添加类）。

Demo:jsFiddle Demo-类具有演示的背景色和边框色。

代码：

//Plugin to extend fadIn and attach before and after events:
jQuery(function($) {
    var _oldFadeIn = $.fn.fadeIn;
    $.fn.fadeIn = function(speed, oldCallback) {
        return $(this).each(function() {
            var obj = $(this),
            newCallback = function() {
                if ($.isFunction(oldCallback))
                    oldCallback.apply(obj);
                obj.trigger('afterFadeIn');
            };
            obj.trigger('beforeFadeIn');
            _oldFadeIn.apply(obj, [speed, newCallback]);
        });
    }
});

$(function($) {
//Date picker:
$('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'mm/yy',
        yearRange: new Date().getFullYear() + ':' + (6 + new Date().getFullYear()),
        onClose: function(dateText, inst) {
            var month = jQuery("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = jQuery("#ui-datepicker-div .ui-datepicker-year :selected").val();
            jQuery(this).datepicker('setDate', new Date(year, month, 1));
        }
 });
//Attach the function to before the fadeIn kicks in:
$('#ui-datepicker-div').bind('beforeFadeIn', function(){
        var month =jQuery("#ui-datepicker-div .ui-datepicker-month");
        var year = jQuery("#ui-datepicker-div .ui-datepicker-year");
        if(!month.hasClass('select-personalizado'))
            month.addClass('select-personalizado').addClass('select-dark');
        if(!year.hasClass('select-personalizado'))
            year.addClass('select-personalizado').addClass('select-dark');
});

});
相关文章：