Add class to datepicker select

Question

I need to add a class (used by a plugin) into the selects of my Datepicker. I have tried beforeShow but the selects are not created at that point yet.

below is a snippet of my code:

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"/>

---

The classes that I need to add are select-personalizado and select-dark

Answer 1

Ok - this is the final (clean) way to add the class names to the datepicker select box

Actually it was very easy:

• downloaded datepicker (jQuery-UI) source code.
• added two more options: customClassYear, customClassMonth
• If not false (default) they will be added to the html generated by the plugin.

Demo: ** jsFiddle demo **

jQuery-UI latest - custom on github : ** Source code full version on github **

Usage:

    //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"

 });

Notes:

1. you can mini this custom version yourself.
2. Didn't deleted my other answer cause it may be helpful for some other similar needs.
3. lines Edited: (7988-7990,9662,9663,9673,9707);

Have Fun.

Answer 2

The problem is that the plugin (datepicker) removes and appends the select boxes each time the container is displayed/hidden.

You need to trigger your function just before the container #ui-datepicker-div fades in (fadeIn)

my solution is to extend the fadeIn function using a quick plugin to add him a beforeFadeIn / afterFadeIn events - and attching your function (that will dymanically add the classes).

Demo: jsFiddle Demo - classes has background color, border color for the demo.

Code:

//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');
});


});