Skip to content


Does not work with Datepicker properly #222

filipe-torres opened this Issue · 7 comments

2 participants


I've applied the Selectmenu plugin to JQuery UI Datepicker year select element and it's styled correctly, but after to select a new year, month or day, Datepicker rewrites all elements, including the Selectmenu div.
How can I reapply Selecmenu to year select element each time it's rewrited?

Thanks in advance.


Any feedback on this issue?


Any feedback on this issue?


Hi Felix,
unfortunately, all callback events run before internal _updateDatepicker function redraw Datepicker. Until now, the only way that I found was call selectmenu at the end of this function.

I know that it's not a better approach, but works:

    /* Generate the date picker content. */
    _updateDatepicker: function(inst) {
        var self = this;
        self.maxRows = 4; //Reset the max number of rows being displayed (see #7043)
        var borders = $.datepicker._getBorders(inst.dpDiv);
        instActive = inst; // for delegate hover events
        var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only
        if( !!cover.length ){ //avoid call to outerXXXX() when not in IE6
            cover.css({left: -borders[0], top: -borders[1], width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()})
        inst.dpDiv.find('.' + this._dayOverClass + ' a').mouseover();
        var numMonths = this._getNumberOfMonths(inst);
        var cols = numMonths[1];
        var width = 17;
        inst.dpDiv.removeClass('ui-datepicker-multi-2 ui-datepicker-multi-3 ui-datepicker-multi-4').width('');
        if (cols > 1)
            inst.dpDiv.addClass('ui-datepicker-multi-' + cols).css('width', (width * cols) + 'em');
        inst.dpDiv[(numMonths[0] != 1 || numMonths[1] != 1 ? 'add' : 'remove') +
        inst.dpDiv[(this._get(inst, 'isRTL') ? 'add' : 'remove') +
        if (inst == $.datepicker._curInst && $.datepicker._datepickerShowing && inst.input &&
                // #6694 - don't focus the input if it's already focused
                // this breaks the change event in IE
      ':visible') && !':disabled') && inst.input[0] != document.activeElement)
        // deffered render of the years select (to avoid flashes on Firefox) 
        if( inst.yearshtml ){
            var origyearshtml = inst.yearshtml;
                //assure that inst.yearshtml didn't change.
                if( origyearshtml === inst.yearshtml && inst.yearshtml ){
                origyearshtml = inst.yearshtml = null;
            }, 0);
        inst.dpDiv.find('.ui-datepicker-year').selectmenu({width: 50,height: 20,menuWidth: 50})

Hi Felix (again),
I try to follow your tip (to use Datepicker callback events) and works. This approach result a little delay to apply Selectmenu plugin to year select element, but not changes JQuery UI Datepicker code:

    function selectMenuDatepicker(){
      var t = setTimeout("$('select.ui-datepicker-year').each(function(){$(this).selectmenu({width: 50,height: 20,menuWidth: 50})});",0);
    // Datepicker Defaults
          beforeShow: function(input, inst){
          onSelect: function(dateText, inst){
          onChangeMonthYear: function(year, month, inst) {
          changeYear: true

Thats cool man! Do we need to init selectmenu over and over again? Perhaps a refresh after inital init is enough (just call myElement.selectmenu() again).


Issue closed, please feel free to reopen if needed!

@fnagel fnagel closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.