[CLOSED-35] [3.x/2.x] DatePicker Picks wrong date

**Sina** · 12 Mar 2009 5:19 AM

Thanks again,
The only thing that remains is, my regional and language settings. I have changed all my settings from Farsi and Iran to English, United States (in the first tab) and English in the third tab, and the bug still exists.
Although there was no bug on Virtual PC, but every settings were as same as each other! The only point is on Virtual PC I never changed the Regional Settings. They were default settings of Win XP.

P.S. Unfortunately I am not available, until next Monday. I hope not answering to this thread until then, does not apprehend to my rudeness.

Thanks

**mystix** · 12 Mar 2009 5:31 AM

Originally Posted by Sina

Thanks again,
The only thing that remains is, my regional and language settings. I have changed all my settings from Farsi and Iran to English, United States (in the first tab) and English in the third tab, and the bug still exists.
Although there was no bug on Virtual PC, but every settings were as same as each other! The only point is on Virtual PC I never changed the Regional Settings. They were default settings of Win XP.

you don't have to change your settings anymore.
using the microsoft timezone update registry update, i'm able to reproduce the problem you're seeing, even on my winxp virtual machine.

check this thread again when you're back on monday. i should have a fix out by then.

**mystix** · 12 Mar 2009 11:56 AM

alritey, use this override (tested in FF3.0.7 / Safari):
(new / modified code is red)

Ext.DatePicker override (for 2.3.0):

Code:

Ext.override(Ext.DatePicker, {
    // PUBLIC -- to be documented
    // default value used to initialise each date in the DatePicker
    // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
    initHour: 12, // 24-hour format

    // private
    update : function(date, forceRefresh) {
        var vd = this.activeDate;
        this.activeDate = date;
        if (!forceRefresh && vd && this.el) {
            var t = date.getTime();
            if (vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()) {
                this.cells.removeClass("x-date-selected");
                this.cells.each(function(c) {
                    if (c.dom.firstChild.dateValue == t) {
                        c.addClass("x-date-selected");
                        setTimeout(function() {
                            try {
                                c.dom.firstChild.focus();
                            } catch(e) {
                            }
                        }, 50);
                        return false;
                    }
                });
                return;
            }
        }
        var days = date.getDaysInMonth(),
            firstOfMonth = date.getFirstDateOfMonth(),
            startingPos = firstOfMonth.getDay() - this.startDay;

        if (startingPos <= this.startDay) {
            startingPos += 7;
        }
        days += startingPos;

        var pm = date.add("mo", -1),
            prevStart = pm.getDaysInMonth() - startingPos,
            cells = this.cells.elements,
            textEls = this.textNodes,

            // convert everything to numbers so it's fast
            // var day = 86400000; // not in use throughout the update() method
            d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart, this.initHour)), // .clearTime();
            today = new Date().clearTime().getTime(),
            sel = date.clearTime(true).getTime(),
            min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
            max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
            ddMatch = this.disabledDatesRE,
            ddText = this.disabledDatesText,
            ddays = this.disabledDays ? this.disabledDays.join("") : false,
            ddaysText = this.disabledDaysText,
            format = this.format;

        if (this.showToday) {
            var td = new Date().clearTime();
            var disable = (td < min || td > max ||
                           (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
                           (ddays && ddays.indexOf(td.getDay()) != -1));

            this.todayBtn.setDisabled(disable);
            this.todayKeyListener[disable ? 'disable' : 'enable']();
        }

        var setCellClass = function(cal, cell) {
            cell.title = "";
            var t = d.clearTime(true).getTime();
            cell.firstChild.dateValue = t;
            if (t == today) {
                cell.className += " x-date-today";
                cell.title = cal.todayText;
            }
            if (t == sel) {
                cell.className += " x-date-selected";
                setTimeout(function() {
                    try {
                        cell.firstChild.focus();
                    } catch(e) {
                    }
                }, 50);
            }
            // disabling
            if (t < min) {
                cell.className = " x-date-disabled";
                cell.title = cal.minText;
                return;
            }
            if (t > max) {
                cell.className = " x-date-disabled";
                cell.title = cal.maxText;
                return;
            }
            if (ddays) {
                if (ddays.indexOf(d.getDay()) != -1) {
                    cell.title = ddaysText;
                    cell.className = " x-date-disabled";
                }
            }
            if (ddMatch && format) {
                var fvalue = d.dateFormat(format);
                if (ddMatch.test(fvalue)) {
                    cell.title = ddText.replace("%0", fvalue);
                    cell.className = " x-date-disabled";
                }
            }
        };

        var i = 0;
        for (; i < startingPos; i++) {
            textEls[i].innerHTML = (++prevStart);
            d.setDate(d.getDate() + 1);
            cells[i].className = "x-date-prevday";
            setCellClass(this, cells[i]);
        }
        for (; i < days; i++) {
            var intDay = i - startingPos + 1;
            textEls[i].innerHTML = (intDay);
            d.setDate(d.getDate() + 1);
            cells[i].className = "x-date-active";
            setCellClass(this, cells[i]);
        }
        var extraDays = 0;
        for (; i < 42; i++) {
            textEls[i].innerHTML = (++extraDays);
            d.setDate(d.getDate() + 1);
            cells[i].className = "x-date-nextday";
            setCellClass(this, cells[i]);
        }

        this.mbtn.setText(this.monthNames[date.getMonth()] + " " + date.getFullYear());

        if (!this.internalRender) {
            var main = this.el.dom.firstChild;
            var w = main.offsetWidth;
            this.el.setWidth(w + this.el.getBorderWidth("lr"));
            Ext.fly(main).setWidth(w);
            this.internalRender = true;
            // opera does not respect the auto grow header center column
            // then, after it gets a width opera refuses to recalculate
            // without a second pass
            if (Ext.isOpera && !this.secondPass) {
                main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth + main.rows[0].cells[2].offsetWidth)) + "px";
                this.secondPass = true;
                this.update.defer(10, this, [date]);
            }
        }
    }
});

Ext.DatePicker override (for 3.1.1):

Code:

Ext.override(Ext.DatePicker, {
    // PUBLIC -- to be documented
    // default value used to initialise each date in the DatePicker
    // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
    initHour: 12, // 24-hour format
    
    update : function(date, forceRefresh){
        if(this.rendered){
            var vd = this.activeDate, vis = this.isVisible();
            this.activeDate = date;
            if(!forceRefresh && vd && this.el){
                var t = date.getTime();
                if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
                    this.cells.removeClass('x-date-selected');
                    this.cells.each(function(c){
                       if(c.dom.firstChild.dateValue == t){
                           c.addClass('x-date-selected');
                           if(vis && !this.cancelFocus){
                               Ext.fly(c.dom.firstChild).focus(50);
                           }
                           return false;
                       }
                    }, this);
                    return;
                }
            }
            var days = date.getDaysInMonth(),
                firstOfMonth = date.getFirstDateOfMonth(),
                startingPos = firstOfMonth.getDay()-this.startDay;

            if(startingPos < 0){
                startingPos += 7;
            }
            days += startingPos;

            var pm = date.add('mo', -1),
                prevStart = pm.getDaysInMonth()-startingPos,
                cells = this.cells.elements,
                textEls = this.textNodes,

                // convert everything to numbers so it's fast
                // day = 86400000, // not in use throughout the update() method
                d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart, this.initHour)), // .clearTime(),
                today = new Date().clearTime().getTime(),
                sel = date.clearTime(true).getTime(),
                min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
                max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
                ddMatch = this.disabledDatesRE,
                ddText = this.disabledDatesText,
                ddays = this.disabledDays ? this.disabledDays.join('') : false,
                ddaysText = this.disabledDaysText,
                format = this.format;

            if(this.showToday){
                var td = new Date().clearTime(),
                    disable = (td < min || td > max ||
                    (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
                    (ddays && ddays.indexOf(td.getDay()) != -1));

                if(!this.disabled){
                    this.todayBtn.setDisabled(disable);
                    this.todayKeyListener[disable ? 'disable' : 'enable']();
                }
            }

            var setCellClass = function(cal, cell){
                cell.title = '';
                var t = d.clearTime(true).getTime();
                cell.firstChild.dateValue = t;
                if(t == today){
                    cell.className += ' x-date-today';
                    cell.title = cal.todayText;
                }
                if(t == sel){
                    cell.className += ' x-date-selected';
                    if(vis){
                        Ext.fly(cell.firstChild).focus(50);
                    }
                }
                // disabling
                if(t < min) {
                    cell.className = ' x-date-disabled';
                    cell.title = cal.minText;
                    return;
                }
                if(t > max) {
                    cell.className = ' x-date-disabled';
                    cell.title = cal.maxText;
                    return;
                }
                if(ddays){
                    if(ddays.indexOf(d.getDay()) != -1){
                        cell.title = ddaysText;
                        cell.className = ' x-date-disabled';
                    }
                }
                if(ddMatch && format){
                    var fvalue = d.dateFormat(format);
                    if(ddMatch.test(fvalue)){
                        cell.title = ddText.replace('%0', fvalue);
                        cell.className = ' x-date-disabled';
                    }
                }
            };

            var i = 0;
            for(; i < startingPos; i++) {
                textEls[i].innerHTML = (++prevStart);
                d.setDate(d.getDate()+1);
                cells[i].className = 'x-date-prevday';
                setCellClass(this, cells[i]);
            }
            for(; i < days; i++){
                var intDay = i - startingPos + 1;
                textEls[i].innerHTML = (intDay);
                d.setDate(d.getDate()+1);
                cells[i].className = 'x-date-active';
                setCellClass(this, cells[i]);
            }
            var extraDays = 0;
            for(; i < 42; i++) {
                 textEls[i].innerHTML = (++extraDays);
                 d.setDate(d.getDate()+1);
                 cells[i].className = 'x-date-nextday';
                 setCellClass(this, cells[i]);
            }

            this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());

            if(!this.internalRender){
                var main = this.el.dom.firstChild,
                    w = main.offsetWidth;
                this.el.setWidth(w + this.el.getBorderWidth('lr'));
                Ext.fly(main).setWidth(w);
                this.internalRender = true;
                // opera does not respect the auto grow header center column
                // then, after it gets a width opera refuses to recalculate
                // without a second pass
                if(Ext.isOpera && !this.secondPass){
                    main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
                    this.secondPass = true;
                    this.update.defer(10, this, [date]);
                }
            }
        }
    }
});

Ext.form.DateField override (applicable for both 2.3.0 and 3.1.1):

Code:

Ext.override(Ext.form.DateField, {
    // PUBLIC -- to be documented
    // in the absence of a time value, a default value of 12 noon will be used
    // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
    initTime: '12', // 24 hour format
    
    // PUBLIC -- to be documented
    initTimeFormat: 'H',

    // PUBLIC -- to be documented
    // Should be explictly stated that this method should be overriden
    // for use in timezones which experience DST
    //
    // note: this turned out to be reaaaaaalllly difficult to customize to
    // fit every situation, so what i've put up here is a real naive implementation which 
    // works for the online examples (disclaimer: i've only tried it on one, but most of the configs are similar).
    // i suggest customizing it so it fits your particular situation. ask if you don't understand what on earth
    // i'm trying to achieve with this function.
    safeParse : function(value, format) {
        if (/[gGhH]/.test(format.replace(/(\\.)/g, ''))) {
            // if parse format contains hour information, no DST adjustment is necessary
            return Date.parseDate(value, format);
        } else {
            // set time to 12 noon, then clear the time
            return Date.parseDate(value + ' ' + this.initTime, format + ' ' + this.initTimeFormat).clearTime();
        }
    },

    parseDate : function(value) {
        if(!value || Ext.isDate(value)){
            return value;
        }
    
        var v = this.safeParse(value, this.format),
            af = this.altFormats,
            afa = this.altFormatsArray;
        
        if (!v && af) {
            afa = afa || af.split("|");
        
            for (var i = 0, len = afa.length; i < len && !v; i++) {
                v = this.safeParse(value, afa[i]);
            }
        }
        return v;
    }
});

remember to test this in IE / Opera.

[note]
consolidated multiple var declarations in 2.3.0's DatePicker code

**Sina** · 16 Mar 2009 2:45 AM

Thanks for you effort,
When I add the first part of your code to override clearTime and isDTS functions, I get this error in firebug:

ext-base.js (line 9)
p is undefined
Ext={version:"2.2"};window["undefined"]=...|new Date()).getTime()-this.getTime())};

should I add this part to special file, special place or something?

**mystix** · 16 Mar 2009 8:06 PM

create an overrides.js file, paste all the overrides in post #13 into this file, and include it immediately after ext-all.js / ext-all-debug.js.

i.e.

Code:

<script src="ext-base.js">
<script src="ext-all.js">
<script src="overrides.js">

**Sina** · 17 Mar 2009 4:33 AM

I am receiving the same error I described in #14, I traced a little and came up with this:
in ext-base.js we have a code:

Code:

if(overrides)
{
     var p=origclass.prototype;
     for(var method in overrides)
     {
          p[method]=overrides[method]
     }
}

origclass.prototype is undefined, so I receive the error in #14. I made the file overrides.js and included it where you said, but there is no difference. Any idea?

**Sina** · 17 Mar 2009 4:49 AM

I removed the .prototype from first line of your code so it is now:

Code:

Ext.override(Date, {
...

and it seems like working. I am going to test it now and report the result.
Thanks

**mystix** · 17 Mar 2009 5:32 AM

my mistake, copy-paste error.

that should be

Code:

Ext.apply(Date.prototype, {
    // ...
});

**mystix** · 9 Jun 2009 10:00 AM

[ friendly bump ]
this DST bug affects the 3.x branch as well.
see post #13 for the complete fix.

note 1: the Date.prototype changes are already in 2.x/3.x SVN.
note 2: the new DateField#safeParse() method might need some optimising.

**mystix** · 24 Jun 2009 7:55 PM

[ moved to 3.x Bugs from 2.x Bugs ]

and

[ a bump for posterity ]

in light of this 3.x bug report:
http://www.sencha.com/forum/showthread.php?t=72326

[CLOSED-35] [3.x/2.x] DatePicker Picks wrong date

Thread Tools

Search Thread

Display

Standard Regional Settings

Standard Regional Settings

p is undefined

p is undefined

p is undefined again

p is undefined again

I removed the .prototype

I removed the .prototype