Question

我需要在我的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

Answer 1

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

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

我的解决方案是使用快速插件扩展fadeIn函数，为他添加beforeFadeIn / afterFadeIn个事件 - 并附加你的函数（将动态地添加类）。

演示：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');
});


});

Answer 2

好的 - 这是将类名添加到datepicker选择框

的最终（干净）方式

实际上这很容易：

下载了datepicker（jQuery-UI）源代码。
又添加了两个选项：customClassYear, customClassMonth
如果不是false（默认），它们将被添加到插件生成的html中。

演示：** jsFiddle demo **

jQuery-UI最新 - 在github上自定义：** Source code full version on 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"

 });

备注：

你可以自己迷你这个自定义版本。

没有删除我的其他答案，因为它可能对其他类似的需求有帮助。

行编辑：（7988-7990,9662,9663,9673,9707）;

玩得开心。

将类添加到datepicker选择

2 个答案: