Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Does not work with Datepicker properly #222

Closed
filipe-torres opened this Issue · 7 comments

2 participants

@filipe-torres

Hi,
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.

@fnagel
Owner
@fnagel
Owner

Any feedback on this issue?

@fnagel
Owner

Any feedback on this issue?

@filipe-torres

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
        inst.dpDiv.empty().append(this._generateHTML(inst));
        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') +
            'Class']('ui-datepicker-multi');
        inst.dpDiv[(this._get(inst, 'isRTL') ? 'add' : 'remove') +
            'Class']('ui-datepicker-rtl');
        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
                inst.input.is(':visible') && !inst.input.is(':disabled') && inst.input[0] != document.activeElement)
            inst.input.focus();
        // deffered render of the years select (to avoid flashes on Firefox) 
        if( inst.yearshtml ){
            var origyearshtml = inst.yearshtml;
            setTimeout(function(){
                //assure that inst.yearshtml didn't change.
                if( origyearshtml === inst.yearshtml && inst.yearshtml ){
                    inst.dpDiv.find('select.ui-datepicker-year:first').replaceWith(inst.yearshtml);
                }
                origyearshtml = inst.yearshtml = null;
            }, 0);
        }
        inst.dpDiv.find('.ui-datepicker-year').selectmenu({width: 50,height: 20,menuWidth: 50})
    },
@filipe-torres

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
    $.datepicker.setDefaults(
      $.extend(
        {
          beforeShow: function(input, inst){
            selectMenuDatepicker();
          },
          onSelect: function(dateText, inst){
            selectMenuDatepicker();
          },
          onChangeMonthYear: function(year, month, inst) {
            selectMenuDatepicker();
          },
          changeYear: true
        }
      )
    );
@fnagel
Owner

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).

@fnagel
Owner

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.