[calendar] Parsing date in format yyyy-mm-ddT00:00:00 in Firefox

[scblack]

Bug Report

On Firefox (I'm currently using the latest version 76.0.1), parsing a date such as 2018-08-13T00:00:00 results in August 13, 2000.

Steps to reproduce

See #935

1. Using Firefox, supply the date in the format 2018-08-13T00:00:00 using set date

Expected result

August 13, 2018

Actual result

August 13, 2000

Testcase

https://jsfiddle.net/scblack/qzLvkxm9/1/

Additional Information

In the date parser, assuming text is '2018-08-13T00:00:00'.

It changes to lowercase with the following line:

text = ('' + text).trim().toLowerCase();

After this line, text is '2018-08-13t00:00:00', which is then used to attempt to create a date:

var textDate = new Date(text);

After this, textDate is an invalid date. Firefox doesn't seem to handle a lowercase 't'. when parsing the date.

Version

2.8.4

[ko2in]

@scblack Since you're providing both date and time, the type property in setting should be 'datetime' instead of 'date'.

Here's fiddle (https://jsfiddle.net/u9pnt8zo/);.

[scblack]

@ko2in Thanks for the reply. The calendar is for a date-only field. When parsing "2018-08-13" without a time, the calendar shows August 12, 2013 because a timezone adjustment is made. Adding T00:00:00 is a workaround to keep from Calendar doing a timezone adjustment, as suggested #935 by @lubber-de.

I'm in Mountain time, or GMT-0600, so

new Date('2018-08-13')

results in Sun Aug 12 2018 18:00:00 GMT-0600 (Mountain Daylight Time), which shows August 12, 2018 in Calendar.

See https://jsfiddle.net/eLaqm7ud/

[ko2in]

@scblack T00:00:00 is only time, it doesn't identify the timezone.

Check this fiddle (https://jsfiddle.net/Lb6g5k2o/2/) whether it works for you. It works as expected for me on both Firefox and Chrome.

If you're trying to convert base on your timezone as your said, it's GMT-06:00.

$calendar.calendar('set date', new Date('2018-08-13T00:00:00-06:00'));

It also works for me and alert the date and time from your timezone.

[scblack]

@ko2in Thanks again.
Here's what your fiddle shows in both Firefox and Chrome:

What I ultimately would like to see is the date "2018-08-13" to show up in Calendar as timezone agnostic "August 13, 2018", not "August 12, 2018". If Calendar could do that, then it wouldn't matter that the workaround doesn't work in Firefox, which is the problem I described initially in this thread.

[ko2in]

@scblack My fiddle was converted from GMT timezone and you're behind 6 hours GMT. So, you're still in Aug 12. The output is correct.

What I want to point is if you pass the date object instead of string, you'll get the correct date as 'Aug 13, 2018'.

I changed my system time to your timezone and it returns the correct date on Firefox. Check this fiddle (https://jsfiddle.net/nLoa9pzu/).

If you're still having incorrect date, then something might be wrong.

I'm not sure how exactly the method set date works in calendar module. But for your own use, you should pass the date object, not the string to get the correct result on both browsers.

[scblack]

@ko2in In your fiddle https://jsfiddle.net/nLoa9pzu/ you are passing a date object, so it works for me as well. I'm aware that if I supply a Javascript date object, I can manipulate it so that the date is correct in the Calendar. However, my usual use case is that I apply the Calendar to a text input with a date value populated from a database. I want Calendar to initialize using the input value and have it show the same date as contained in the input.

I've used mdehoog/Semantic-UI-Calendar for years without any issue. In comparing the date parser code with that of Fomantic's, Fomantic has the following lines near the top of the parser (starting at line 4483 in version 2.8.4), which Semantic-UI-Calendar does not have:

      var textDate = new Date(text);
      if(!isNaN(textDate.getDate())) {
        return textDate;
      }

When I comment those lines out, I no longer have the issue with Fomantic's Calendar. The rest of the parser correctly parses the date to match the input date. Without those lines it just works on a textbox date, and I don't have to hack it with timezone workarounds.

Now an analysis of how those lines of code are giving an incorrect result:
Suppose the text variable contains "2018-08-13"

      var textDate = new Date(text);

If I am in the Mountain timezone, then textDate becomes Sun Aug 12 2018 18:00:00 GMT-0600 (Mountain Daylight Time). Calendar then begins to use the date of August 12, 2018 instead of the supplied date of August 13, 2018.

See https://jsfiddle.net/scblack/x61c4ky0/3/
Which results in this for me because of my location:

I apologize that the thread has evolved to focus more on what I view as the root issue rather than describing how a workaround won't work. I initially set out to describe that adding T00:00:00 as a timezone workaround (as was the solution for #935) wouldn't work in Firefox, but it would be better if the root issue could be resolved.

[ko2in]

@scblack I get your point now. If you want the calendar to initialize using the input value populated from database. Then why are you triggering set date method?

Isn't possible to generate the date time for your input field from your server side code that returns from your database and then initialize the calendar? Example:

<div class="ui calendar" id="datepicker" data-type="date" data-date="2018-08-13 00:00:00">
  <div class="ui input left icon">
    <i class="calendar icon"></i>
    <input type="text" placeholder="Date">
  </div>
</div>

Here's fiddle (https://jsfiddle.net/xe82Lma5/1/). I've tested with your time zone (GMT-06:00) and it works as expected. I don't event need to provide time zone.

Not sure how you're implementing in your project.

[scblack]

@ko2in I was using the set date method only to illustrate the behavior in jsfiddle.

Your suggestion works, as you appended " 00:00:00" to the date, but I still think it is a hack to get around a deficiency in Calendar. If that is how it is intended for Calendar to work, then maybe rather than a bug report, this should be a feature request: Allow a date, without a time, to be entered into a text input, and when a Calendar is applied to the text input, have the Calendar show the same date as in the text input, regardless of where the user happens to be in the world.

Here's a fiddle with code from my project: https://jsfiddle.net/scblack/yqrfghbe/

For me, even though I am supplying the date of "2020-05-13" as the input value coming from the database, the Calendar shows "May 12, 2020". I hesitate to append " 00:00:00" just to satisfy the date picker, but it looks like I may have to. Incidentally, the original problem was that I was attempting to append "T00:00:00", and Firefox would choke because the uppercase T was converted to a lowercase t, but using a space instead of a T solves that problem.

Thanks much for your time on this.

[lubber-de]

@scblack This should be fixed by #1492
Please try your adjusted jsfiddle here https://jsfiddle.net/8b3rta4u/

[whsyu]

got issue after this patch at safari (13.1.2)/ macos catalina (10.15.6) 😮

$calendar.calendar('set date', '2020-08-12')

2.8.5 => August 12, 2020
2.8.6 => August 12, 2000

[lubber-de]

@whsyu I cannot reproduce this, but i guess it's fixed by #1569

Please test the following jsfiddle, which uses the latest nightly version
https://jsfiddle.net/eb0ynj6x/1/

[whsyu]

@lubber-de thanks!

but... the same :(

2020-08-12 => August 12, 2000
2020-08-12T00:00:00 => August 12, 2020

btw, I just do more test, seems only safari has this problem.
safari@mac (X)
safari@ios (X)
firefox@mac (O)
chrome@mac (O)
chrome@android (O)

[lubber-de]

👀 Confirmed.... (using browserstack)
We'll check this.
In the meantime you can use "/" instead of "-" as a workaround, which works in Safari

$calendar.calendar('set date', '2020/08/12')

https://jsfiddle.net/rbsf72zc/

[lubber-de]

@whsyu Your issue with safari is fixed by #1647
See https://jsfiddle.net/lubber/s82zoc5w/1/