Does not work with Datepicker properly #222

Closed
filipe-torres opened this Issue Feb 27, 2012 · 7 comments

Comments

Projects
None yet
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

This comment has been minimized.

Show comment
Hide comment
@fnagel

fnagel Feb 27, 2012

Owner

Mhh perhaps by using Datepickers callback events to init and destroy
Selectmenu each time its needed?
There is no auto feature (thus its not possible) to to so.

If you like to post a jsFiddle (see #61) I would be happy to show you how
to use callbacks. Take a look at the wiki too!

Owner

fnagel commented Feb 27, 2012

Mhh perhaps by using Datepickers callback events to init and destroy
Selectmenu each time its needed?
There is no auto feature (thus its not possible) to to so.

If you like to post a jsFiddle (see #61) I would be happy to show you how
to use callbacks. Take a look at the wiki too!

@fnagel

This comment has been minimized.

Show comment
Hide comment
@fnagel

fnagel May 15, 2012

Owner

Any feedback on this issue?

Owner

fnagel commented May 15, 2012

Any feedback on this issue?

@fnagel

This comment has been minimized.

Show comment
Hide comment
@fnagel

fnagel May 31, 2012

Owner

Any feedback on this issue?

Owner

fnagel commented May 31, 2012

Any feedback on this issue?

@filipe-torres

This comment has been minimized.

Show comment
Hide comment
@filipe-torres

filipe-torres Jun 1, 2012

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})
    },

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

This comment has been minimized.

Show comment
Hide comment
@filipe-torres

filipe-torres Jun 1, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@fnagel

fnagel Jun 1, 2012

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

Owner

fnagel commented Jun 1, 2012

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

This comment has been minimized.

Show comment
Hide comment
@fnagel

fnagel Aug 6, 2012

Owner

Issue closed, please feel free to reopen if needed!

Owner

fnagel commented Aug 6, 2012

Issue closed, please feel free to reopen if needed!

@fnagel fnagel closed this Aug 6, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment