DevExtreme React - Date String Handling Issues

Different browsers follow different rules when they handle date strings.

To minimize cross-browser inconsistencies, DevExtreme parses date strings with its own, browser-independent algorithm. When DevExtreme loads data from a date string, the framework automatically detects the string's format, and converts the string into a timestamp.

If the format of a date string is not compatible with the ISO 8601 standard, DevExtreme may not be able to perform the conversion.

This article describes what DevExtreme does when it parses date strings, how you can influence this process, and why some date string data causes errors.

Supported Formats, Exceptions, and Settings

Automatic format detection

When DevExtreme initializes a component, and the component's data source includes a date string, DevExtreme checks if the date string belongs to one of the following ISO 8601 formats:

  • "yyyy-MM-dd" - local date

  • "yyyy-MM-ddTHH:mm:ss" - local date and time

  • "yyyy-MM-ddTHH:mm:ssZ" - UTC date and time

  • "yyyy-MM-ddTHH:mm:ssx" - date and time with a timezone

DevExtreme guarantees correct serialization of such data.

Non-standard date strings

If the format of your Date string is different, DevExtreme uses the Date.parse() method to extract the timestamp. Due to the differences in browser engines, this method can yield different results in different browsers. For example:

Date.parse("04 11 1991");
// 671338800000 in Chrome and Firefox (Thu Nov 04 1991 00:00:00 GMT+0000);
// NaN in Safari

Use ISO 8601 date strings to ensure that DevExtreme handles your data with consistency.

Set the format manually

If the component's initial data source is empty, you have to manually specify the expected data string format. Otherwise, DevExtreme cannot handle user-specified date strings.

Specify an ISO 8601 format with the dateSerializationFormat property. This property is compatible with all DevExtreme components that allow users to input date values:

IMPORTANT
The format of the date string in your component's data source does not determine the date's final display format.

DevExtreme does not maintain the format of the original date string when it converts a timestamp into human-readable form.

The dateSerializationFormat property does not determine how DevExtreme displays your date.

The Value Formatting guide explains how to change the way DevExtreme displays time and date data.