How parse a date string generated from Intl.DateTimeFormat

Question

Using Intl.DateTimeFormat.format function you can generate a date string formatted for a specific locale. The options passed to the Intl.DateTimeFormat.format() function allow to know some things about the format, for example if the year is two digit or four digit, but some things are not known, for example the separator used or the order of the year, month and day elements.

Trying to parse that string back to a Date object is not always possible using Date.parse.

For example this code fails for the spanish locale and works for the english:

const date = new Date(2020, 10, 28);

const regionEs = new Intl.DateTimeFormat('es', { timeZone: 'UTC' });
const regionEn = new Intl.DateTimeFormat('en', { timeZone: 'UTC' });

const stringEs = regionEs.format(date); // "28/11/2020"
const stringEn = regionEn.format(date); // "11/28/2020"

const parseEs = new Date(Date.parse(stringEs)); // Error -> Trying to set month to 28
const parseEn = new Date(Date.parse(stringEn)); // Ok

But it could be easy if the format template used to generate the string could be obtained from Intl: something like "dd/mm/yyyy". This way the string could be safely splited into parts that could be used to build a Date object. The problem is that it seems not possible to get that information from Intl.DateTimeFormat.

The [Intl.resolvedOptions()][1] method does not provide any help since it just provides back the options passed on the constructor plus defaults.

Question

Is there any way to parse back a string formatted with Intl to a Date object without using moment.js or any other external library?

My use case

I'm using a date-time component that accepts a format and parse functions to handle the dates. When the user selects a date using the calendar controls of the date time input there is no problem and the format function uses Intl to format it according to the locale and a set of format options. Sometimes the user edit the date displayed manually. If spanish locale is used he can see "27/11/2020" date displayed and he made decide to change the day to "28/11/2020". This will fail because Date.parse() can not parse this date (see above). This may get worse in other locales. I'm trying to avoid including an external date library, but don't see a way to overcome this. I know that the user may edit the date in any arbitrary format, but I would like to accept at least the same format that is displayed in the control, which I think is the most UI friendly, since there is always a default date displayed.

You should always work with a known (preferably standardised) format like ISO 8601 and only use other formats for presentation. Parsing arbitrarily formatted dates is fraught and bound to cause issues, see [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) If you don't know the format and can't supply it to the parser, then a library is no better than *Date.parse* (and most will fall back to it if the format is not specified and doesn't fit one of its supported formats). — RobG, Oct 28 '20 at 23:12
So the basic question is how do you get the format given a locale and a set of options (i.e. 4 digit year)? That info must be somewhere since `Intl.DateTimeFormat` uses it to format the date. — David Casillas, Oct 29 '20 at 09:12
The relevant standard is [ECMA-402](http://ecma-international.org/publications/standards/Ecma-402.htm), it doesn't provide a mapping of language to format. The information you seek is encoded in each implementation and is not necessarily consistent between them. However, ECMA-402 *recommends* that implementations use the language to format mapping suggested by the [*Unicode Common Locale Data Repository*](http://cldr.unicode.org/index/charts). You might try the [*ICU Locale Explorer*](http://demo.icu-project.org/icu-bin/locexp). — RobG, Oct 29 '20 at 10:40
I think it's a Sisyphean task. Even using just the language without options, there are a huge number of variants. Adding options changes the format in inconsistent ways, e.g. [here](https://stackoverflow.com/questions/64506088/cs-cz-locale-and-javascript-new-date-constructor-doesnt-allow-for-shorthand-dat). — RobG, Oct 29 '20 at 10:53
I see the only workaround is to change the view to the ISO 8601 format when the user tries to manually edit the date, so at least he can see what the expected format is, and then switch to the locale view when he finishes editing. — David Casillas, Oct 29 '20 at 11:11

score 1 · Answer 1 · answered Jul 27 '23 at 00:29

I ran into this issue building a date picker which needed to both display selected dates in the browser's locale and parse dates manually typed by the user in their own locale. A simplified version of my solution is here:

function getDateFormat(locale = undefined) {
  const formatted = new Intl.DateTimeFormat(locale).format(new Date(2000, 0, 2));
  return formatted
    .replace('2000', 'YYYY')
    .replace('01', 'MM')
    .replace('1', 'M')
    .replace('02', 'DD')
    .replace('2', 'D');
}

function getFormattedDateRegex(format) {
  return new RegExp(
      '^\\s*' + format.toUpperCase().replaceAll(/([MDY])\1*/g, '(?<$1>\\d+)') + '\\s*$'
    );
}

function parseFormattedDate(value, locale = undefined) {
  const format = getDateFormat(locale);
  const regex = getFormattedDateRegex(format);

  const { groups } = value.match(regex) ?? {};

  if (!groups) return null;

  const y = Number(groups.Y);
  const m = Number(groups.M);
  const d = Number(groups.D);

  // Validate range of year and month
  if (y < 1000 || y > 2999) return null;
  if (m < 1 || m > 12) return null;

  const date = new Date(y, m - 1, d);

  // Validate day of month exists
  if (d !== date.getDate()) return null;

  return isNaN(date.valueOf()) ? null : date;
}

getDateFormat generates a known date, formats it in the requested locale (or the browser locale), and then uses the output to determine what format Intl is using.

getFormattedDateRegex takes a format string (e.g. 'MM/DD/YYYY`) and creates a regex with named capture groups for parsing dates in that format.

parseFormattedDate simply takes a formatted date string (and optionally a locale) and attempts to parse it. It returns null if the date string does not appear to match the format Intl uses in the current locale.

score -1 · Answer 2 · answered Oct 28 '20 at 10:16

Sure you can use moment.js for such a thing, but you need to know the format in every region you are using, according to your code

const parseEs = moment("28/11/2020", "DD/MM/YYYY");
const parseEn = moment("11/28/2020", "MM/DD/YYYY");

In the end moment provides toDate() function so you can pass it again to region format (in case you add/subtract or edit the date with any component or library)

const stringEs = regionEs.format(parseEs.toDate()); // "28/11/2020"
const stringEn = regionEn.format(parseEn.ToDate()); // "11/28/2020"

The key is that the OP must know the format, then any library will do (and there are lots to chose from, many are much lighter than moment.js). — RobG, Oct 28 '20 at 23:13

How parse a date string generated from Intl.DateTimeFormat

2 Answers2