DatePicker problem with data-date - off by 2 days

[EricBabin]

To see this issue, you can go to the sample page for the date picker (http://metroui.org.ua/datepicker.html). For example, for me, the second datepicker displays 11.11.2013 but the data-date is set to 2013-11-13.

The same issue is happening to me on my site. My locale is 'en'. My timezone is GMT-5 Toronto, Ontario, Canada.

Thanks for your assistance.

[greensolid]

Works for me with UTC+1.

But in my example the year doesn't show up. Which jQuery version are you using?

[greensolid]

The date formater accepts only 'yy' or 'yyyy', so documentation should be updated. I tried your timezone and locale and it works. Have you tried another browser?

[EricBabin]

Hi,

Sorry for the delay in responding. Here it is on Firefox (previous attempt was on Chrome)

[image: Inline image 1]

I'm not sure what I'm doing wrong. Any help would be appreciated.

Regards,

---

Eric Babin FBA|net► www.fba.net

On Wed, Jan 29, 2014 at 12:51 PM, Matthias Fax notifications@github.comwrote:

The date formater accepts only 'yy' or 'yyyy', so documentation should be updated. I tried your timezone and locale and it works. Have you tried another browser?

— Reply to this email directly or view it on GitHubhttps://github.com/olton/Metro-UI-CSS/issues/459#issuecomment-33610324 .

[EricBabin]

And here is another capture from the metroui.org.ua website:

[image: Inline image 1]

You can see the data-date is set to 2013-11-13 but the control shows 11.11.2013

Very strange :(

---

Eric Babin FBA|net► www.fba.net

On Thu, Jan 30, 2014 at 11:19 PM, Eric Babin eric@fba.net wrote:

Hi,

Sorry for the delay in responding. Here it is on Firefox (previous attempt was on Chrome)

[image: Inline image 1]

I'm not sure what I'm doing wrong. Any help would be appreciated.

Regards,

---

Eric Babin FBA|net► www.fba.net

On Wed, Jan 29, 2014 at 12:51 PM, Matthias Fax notifications@github.comwrote:

The date formater accepts only 'yy' or 'yyyy', so documentation should be updated. I tried your timezone and locale and it works. Have you tried another browser?

— Reply to this email directly or view it on GitHubhttps://github.com/olton/Metro-UI-CSS/issues/459#issuecomment-33610324 .

[EricBabin]

Update:

I have tried browsing to http://metroui.org.ua/datepicker.html from the following browsers and the result is the same as I described above. The data-date attribute is set to 2013-11-13 but the control displays 11.11.2013:

1. Chrome on Windows 7
2. Chrome on Mavericks
3. Firefox on Win7
4. Firefox on Mavericks
5. IE 11.0.2 on Win 7
6. Safari on Mavericks

However, when I tried it on Midori on a Raspberry Pi (Raspbian), the date displayed as 13.11.2013. This was with the default Locale setting but I don't know what it was because the raspi-config utility doesn't show it. The interesting part is that when I changed it from the default locale to America/Toronto, the date displayed as 11.11.2013.

Please help.

Thanks Eric

[greensolid]

I can confirm it after switching multiple times locale, time format and time. But I got one day offset at maximum. As you see the calendar shows the correct column, and by reclicking on the 5th, the correct date is filled in. In Chrome you have to reopen the tab for time / locale changes, just reloading doesn't work. The issue appears for all negative UTC timezones.

[chescalante]

any solution?

[SistemaDataHotel]

I'm having the same problem . what is the solution?

[bruno4eva]

<link href="css/metro-bootstrap.css" rel="stylesheet">
<link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
<link href="css/iconFont.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<link href="js/prettify/prettify.css" rel="stylesheet">

<!-- Load JavaScript Libraries -->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery.widget.min.js"></script>
<script src="js/jquery/jquery.mousewheel.js"></script>
<script src="js/prettify/prettify.js"></script>

<!-- Metro UI CSS JavaScript plugins -->
<script src="js/load-metro.js"></script>

<!-- Local JavaScript -->
<script src="js/docs.js"></script>
<script src="js/github.info.js"></script>

USING THIS TAGS IN THE HEADING TAGS WILL SOLVE MOST PROBLEMS

From: SistemaDataHotel Sent: ‎Saturday‎, ‎September‎ ‎20‎, ‎2014 ‎8‎:‎43‎ ‎PM To: olton/Metro-UI-CSS

I'm having the same problem . what is the solution?

— Reply to this email directly or view it on GitHub.

[SistemaDataHotel]

My code already have this, but still doesn’t work...

Atenciosamente, Administrativo Fone: (11) 7838-4088 Nextel: 55_918_15161 http://www.datahotel.com.br/ www.datahotel.com.br

De: bruno4eva [mailto:notifications@github.com] Enviada em: sábado, 20 de setembro de 2014 20:50 Para: olton/Metro-UI-CSS Cc: SistemaDataHotel Assunto: Re: [Metro-UI-CSS] DatePicker problem with data-date - off by 2 days (#459)

USING THIS TAGS IN THE HEADING TAGS WILL SOLVE MOST PROBLEMS From: SistemaDataHotel Sent: ‎Saturday‎, ‎September‎ ‎20‎, ‎2014 ‎8‎:‎43‎ ‎PM To: olton/Metro-UI-CSS I'm having the same problem . what is the solution? — Reply to this email directly or view it on GitHub. — Reply to this email directly or view it on GitHub https://github.com/olton/Metro-UI-CSS/issues/459#issuecomment-56283997 . https://github.com/notifications/beacon/8827255__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcyNjg3NjIxMiwiZGF0YSI6eyJpZCI6MjQ1MTI5NDN9fQ==--0412679b9489eed64b7644786e82a20002a1be5a.gif

[samscudder]

I ran into this problem too... It has to do with the computer's time zone, and only affects computers in negative time zones. Since I'm in GMT-3, the date (for example 2013-02-14 00:00:00 - notice the 00:00:00 appended to it) gets converted to 2013-02-13 22:00:00 GMT-2). When the calendar module (used by the datepicker) parses this it gets 2013-02-13 instead of 2013-02-14. I'm still looking at the code to see if I can find a workaround.

[SistemaDataHotel]

I solved by passing the date direct into input type:

<div class='input-control text' data-role='datepicker'  style='max-width:130px' data-format='dd/mm/yyyy'
<input type='text' name='data_saida' id='data_saida' value=".$data_saida.">
<a class='btn-date'></a>
</div>

You can check it on www.datahotel.com.br/reservas_demo/index.php?CNPJ=14.356.429/0001-20

[samscudder]

If you don't set the date with a data-date attribute in the data-role element, the popup doesn't have the selected date highlighted.

I've spent some time looking into this and to make a long story short, due to some quirks in Javascript, internally the calender component ignores the timezone and considers all dates are UTC, but when returning a date string it uses Local time. A workaround is to add 'UTC:' to the start of your date-format attribute. For example:

data-format="UTC:dd/mm/yyyy"

The string initially displayed in the input is now correct, and the selected date shows up in the calender popup.

Again, this problem only happens on timezones west of GMT.

[bruno4eva]

Good. Its working

--- Original Message ---

From: "SistemaDataHotel" notifications@github.com Sent: October 4, 2014 3:39 PM To: "olton/Metro-UI-CSS" Metro-UI-CSS@noreply.github.com Cc: "bruno4eva" bruno4eva@live.com Subject: Re: [Metro-UI-CSS] DatePicker problem with data-date - off by 2 days (#459)

I solved by passing the date direct into input type:

<div class='input-control text' data-role='datepicker'  style='max-width:130px' data-format='dd/mm/yyyy'
<input type='text' name='data_saida' id='data_saida' value=".$data_saida.">
<a class='btn-date'></a>
</div>

You can check it on www.datahotel.com.br/reservas_demo/index.php?CNPJ=14.356.429/0001-20

---

Reply to this email directly or view it on GitHub: https://github.com/olton/Metro-UI-CSS/issues/459#issuecomment-57909158

[HaroonSaid]

To correct the problem change the functions below with the code shown in metro-calendar.js: _create: function () { var element = this.element;

        if (element.data('multiSelect') != undefined) this.options.multiSelect = element.data("multiSelect");
        if (element.data('format') != undefined) this.options.format = element.data("format");
        if (element.data('date') != undefined) {
            var d = new Date(element.data("date"));
            d.setTime(d.getTime() + d.getTimezoneOffset() * 60 * 1000);
            this.options.date = d;
        }
        if (element.data('locale') != undefined) this.options.locale = element.data("locale");
        if (element.data('startMode') != undefined) this.options.startMode = element.data('startMode');
        if (element.data('weekStart') != undefined) this.options.weekStart = element.data('weekStart');
        if (element.data('otherDays') != undefined) this.options.otherDays = element.data('otherDays');

        this._year = this.options.date.getFullYear();
        this._distance = parseInt(this.options.date.getFullYear()) - 4;
        this._month = this.options.date.getMonth();
        this._day = this.options.date.getDate();
        this._mode = this.options.startMode;

        element.data("_storage", []);

        this._renderCalendar();
    },
    setDate: function (d) {
        var r;
        d = new Date(d);
        d.setTime(d.getTime() + d.getTimezoneOffset() * 60 * 1000);
        r = (new Date(d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate())).format('yyyy-mm-dd');
        this._addDate(r);
        this._renderCalendar();
    },

    getDate: function (index) {
        var d = new Date(index != undefined ? this.element.data('_storage')[index] : this.element.data('_storage')[0]); 
        d.setTime(d.getTime() + d.getTimezoneOffset() * 60 * 1000);
        return d.format(this.options.format);
    },

    getDates: function () {
        return this.element.data('_storage');
    },

    unsetDate: function (d) {
        var r;
        d = new Date(d);
        d.setTime(d.getTime() + d.getTimezoneOffset() * 60 * 1000);
        r = (new Date(d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())).format('yyyy-mm-dd');
        this._removeDate(r);
        this._renderCalendar();
    },