Generating a date from a string

Question

Generating a date from a string

Given two strings, `2017-03-15` (date) and `12:26` (time), the objective is to create a localized date object without relying on any library.

Assuming the current date and time are: `Tue Mar 14 2017 12:26:33 GMT+0800 (AWST)`, using the code:

new Date( date + 'T' + time )

Results in an incorrect output as the date is interpreted as UTC:

Wed Mar 15 2017 20:26:00 GMT+0800 (AWST)

If a space is used instead:

new Date( date + ' ' + time )

The result is correct:

Wed Mar 15 2017 12:26:00 GMT+0800 (AWST)

However, this method will not function correctly on Safari (without the T). In fact, Safari will throw an error!

It is acknowledged that parsing date strings varies by implementation. Therefore, the most accurate approach would be:

var timeSplit = time.split(':');
var dateSplit = date.split('-');

new Date( dateSplit[0], dateSplit[1] - 1, dateSplit[2], timeSplit[ 0 ], timeSplit[ 1 ] )

Nevertheless, this solution may seem cumbersome. Is there a more efficient method that works consistently across different browsers?

javascript date

Answer 1

Answer №1

The result is incorrect due to the consideration of the date as UTC:

This issue stemmed from a mistake in the ES5 specification, which stated that no timezone indicator meant UTC, contrary to the ISO-8601 standard it was supposed to adhere to. ES2015 rectified this by defining that no timezone indicator implied local time (in alignment with ISO-8601), but this would have caused compatibility issues when used on strings containing dates only (like "2018-01-17"). Subsequently, ES2016 made further adjustments, leading to stability since then. In cases where there is no timezone indicator:

A date-only string (e.g., "2019-05-20") is parsed in UTC
A date/time string (e.g., "2019-05-20T10:00") is parsed in local time

Due to these specification inconsistencies, various JavaScript engines initially exhibited behaviors aligned with old specifications (ES5), ES2015, or ES2016. Notably, iOS continues to maintain an incorrect behavior.

As of May 20th, 2019, the situation is as follows:

Desktop versions of Chrome, Firefox, Edge, and even IE11 all correctly adhere to the ES2016+ specification.
Safari (on desktop or iOS) erroneously parses date/time strings without timezone indicators as UTC.
All current iOS browsers (including Safari, Chrome, Firefox, Brave, Dolphin...) also parse date/time strings without timezone indicators as UTC due to the use of JavaScriptCore (JSC) on iOS. The limitation arises because non-Apple iOS applications cannot allocate executable memory for other optimizing engines like V8 or SpiderMonkey, hence resorting to JSC. (Chrome's V8 may transition away from JSC towards a "JIT-less" interpreter.)

You can verify your browser's behavior through the following code snippet:

var may20 = new Date("2019-05-20");
// If parsed in UTC, UTC hours should be 0
console.log(may20.getUTCHours() === 0 ? "OK:" : "Error:", may20.toLocaleString());

var may20At10 = new Date("2019-05-20T10:00");
// If parsed in local time, local hours should be 10
console.log(may20At10.getHours() === 10 ? "OK:" : "Error:", may20At10.toLocaleString());

(The accuracy of this check depends on the differentiation between UTC and local time on May 20th, 2019. It works in regions like the UK [GMT+0100] or New York [not on GMT], but not in locations observing GMT year-round like Timbuktu.)

Note, Safari does not support this without the T.

Indeed, the only mandatory date/time format supported by JavaScript engines is the ISO-8601 subset defined here (along with the output of toString, albeit its specifics are unspecified). Current observations as of May 20th, 2019, indicate Safari's deviation from this specification.

However, isn't there a more elegant solution compatible across different browsers?

The process may seem complex, but that's the necessary mechanism within the Date constructor. By incorporating it into your standard library, you ensure seamless functionality.

Answer 2

The result is incorrect due to the consideration of the date as UTC:

This issue stemmed from a mistake in the ES5 specification, which stated that no timezone indicator meant UTC, contrary to the ISO-8601 standard it was supposed to adhere to. ES2015 rectified this by defining that no timezone indicator implied local time (in alignment with ISO-8601), but this would have caused compatibility issues when used on strings containing dates only (like "2018-01-17"). Subsequently, ES2016 made further adjustments, leading to stability since then. In cases where there is no timezone indicator:

A date-only string (e.g., "2019-05-20") is parsed in UTC
A date/time string (e.g., "2019-05-20T10:00") is parsed in local time

Due to these specification inconsistencies, various JavaScript engines initially exhibited behaviors aligned with old specifications (ES5), ES2015, or ES2016. Notably, iOS continues to maintain an incorrect behavior.

As of May 20th, 2019, the situation is as follows:

Desktop versions of Chrome, Firefox, Edge, and even IE11 all correctly adhere to the ES2016+ specification.
Safari (on desktop or iOS) erroneously parses date/time strings without timezone indicators as UTC.
All current iOS browsers (including Safari, Chrome, Firefox, Brave, Dolphin...) also parse date/time strings without timezone indicators as UTC due to the use of JavaScriptCore (JSC) on iOS. The limitation arises because non-Apple iOS applications cannot allocate executable memory for other optimizing engines like V8 or SpiderMonkey, hence resorting to JSC. (Chrome's V8 may transition away from JSC towards a "JIT-less" interpreter.)

You can verify your browser's behavior through the following code snippet:

var may20 = new Date("2019-05-20");
// If parsed in UTC, UTC hours should be 0
console.log(may20.getUTCHours() === 0 ? "OK:" : "Error:", may20.toLocaleString());

var may20At10 = new Date("2019-05-20T10:00");
// If parsed in local time, local hours should be 10
console.log(may20At10.getHours() === 10 ? "OK:" : "Error:", may20At10.toLocaleString());

(The accuracy of this check depends on the differentiation between UTC and local time on May 20th, 2019. It works in regions like the UK [GMT+0100] or New York [not on GMT], but not in locations observing GMT year-round like Timbuktu.)

Note, Safari does not support this without the T.

Indeed, the only mandatory date/time format supported by JavaScript engines is the ISO-8601 subset defined here (along with the output of toString, albeit its specifics are unspecified). Current observations as of May 20th, 2019, indicate Safari's deviation from this specification.

However, isn't there a more elegant solution compatible across different browsers?

The process may seem complex, but that's the necessary mechanism within the Date constructor. By incorporating it into your standard library, you ensure seamless functionality.

Answer 3

Answer №2

My results are incorrect because the date is being treated as UTC:

Consider this:

new Date('2017-03-15T12:26')

Internet Explorer up to version 8 sees it as an invalid string, while IE 9+ and Firefox 38 treat it as UTC.

Using a space instead... yields the correct result

However, Safari returns an invalid date without the 'T'.

In fact, Safari will throw an error if you try without the 'T'

All versions of ECMAScript handle this consistently. Safari rejects it as a valid ISO 8601 string, while others fallback on implementation-specific methods.

The lesson learned here is to avoid using Date constructor for parsing strings (or Date.parse).

To do it correctly, manual parsing is the only option...

You can use libraries for convenience, but they essentially do the same thing.

Is there a universal solution that works on all browsers?

No. Push for better standards by joining the ECMA TC39 committee and advocating for a more robust Date object with a proper parser and formatter. There are plenty of good implementations available in other languages and existing JavaScript libraries.

Unfortunately, parsing has been overlooked and ECMA-402 now handles formatting inadequately for dates.

Answer 4

My results are incorrect because the date is being treated as UTC:

Consider this:

new Date('2017-03-15T12:26')

Internet Explorer up to version 8 sees it as an invalid string, while IE 9+ and Firefox 38 treat it as UTC.

Using a space instead... yields the correct result

However, Safari returns an invalid date without the 'T'.

In fact, Safari will throw an error if you try without the 'T'

All versions of ECMAScript handle this consistently. Safari rejects it as a valid ISO 8601 string, while others fallback on implementation-specific methods.

The lesson learned here is to avoid using Date constructor for parsing strings (or Date.parse).

To do it correctly, manual parsing is the only option...

You can use libraries for convenience, but they essentially do the same thing.

Is there a universal solution that works on all browsers?

No. Push for better standards by joining the ECMA TC39 committee and advocating for a more robust Date object with a proper parser and formatter. There are plenty of good implementations available in other languages and existing JavaScript libraries.

Unfortunately, parsing has been overlooked and ECMA-402 now handles formatting inadequately for dates.

Generating a date from a string

Answer №1

Answer №2

Similar questions

Explore our product gallery with just a simple hover

What makes a single numerical value in an array suitable for basic arithmetic operations?

Developing a Chessboard Using JavaScript

Maximizing the use of JavaScript's prototype.js library: Passing parameters to callback functions

Tips for integrating the C++ icon into a ReactJs project

I am encountering the ERR_STREAM_WRITE_AFTER_END error in my Node.js API. Does anyone know how to resolve this problem?

Iterate through each selection from the multiple chosen in Select2, and utilize jQuery to add the text value of the

Enhancing User Experience: Creating a Vue Button Component for Adding Items to Cart with the Power of Axios and Laravel Backend Integration

Get the base64 encoding of a File object by utilizing the FileReader.readAsDataURL() method

Add the component view to the webpage's body section

Headers can't be set after they have been sent. This issue arises when calling create(data,cb) function

Hide the popup menu when the user clicks outside of it

Utilize PHP to transform JSON data into JavaScript

What is the process for displaying node_modules directories in a json/javascript document?

How can I retrieve an updated object array within an extended class in JavaScript?

Ensure there is a sufficient gap between the top and bottom icons within the Material-UI Drawer

The module in the relative path cannot be located by Node.js

Problem with jQueryUI Sortable cancel property preventing input editing

Generate a line chart adorned with dots and customized labels utilizing a pair of distinct data sets

Populating options in <select> for Internet Explorer version 5