How to customise Intl.DateTimeFormat date?

Question

I'm trying to update dates in my angular 6 application using Intl.DateTimeFormat and passing locale and dateStyle, timeStyle options. I'm able to get the custom date while trying in browser console however as soon as I try to integrate the same in my app, it throws compilation error: Type '{ dateStyle: string; timeStyle: string; }' has no properties in common with type 'DateTimeFormatOptions'.

    transformDate() {
    const options = { dateStyle: "full", timeStyle: "medium" };
    console.log(new Intl.DateTimeFormat('en-US',options).format(this.date));
  }

Allabakash · Accepted Answer · 2019-12-31T06:23:41.697

It is the datatype issue. You need specify the data type for options.

You can try like -

 const options: any = { dateStyle: "full", timeStyle: "medium" };

Basically Intl.DateTimeFormat accepts options of type DateTimeFormatOptions, and it has the properties

interface DateTimeFormatOptions {
        localeMatcher?: string;
        weekday?: string;
        era?: string;
        year?: string;
        month?: string;
        day?: string;
        hour?: string;
        minute?: string;
        second?: string;
        timeZoneName?: string;
        formatMatcher?: string;
        hour12?: boolean;
        timeZone?: string;
    }

Since dateStyle and timeStyle not available , it is throwing an error.

omikes · Answer 2 · 2020-02-17T12:13:34.947

0

edit: actiually it appears i've answered the wrong question by mistake, for your situations use a trick if i need it to be the default format of en-US; it won't let you put nothing, but for some reason it will allow an empty array. if you really want it short, put any single digit number, which will also be assumed to be 'en-US'

function numericDate() {
  var ops = {year: 'numeric'};
  ops.month = ops.day = '2-digit';
  return new Date().toLocaleDateString([], ops);
}

console.log(numericDate());

edited Feb 17 '20 at 12:13

answered Feb 11 '20 at 22:54

omikes

8,064
8
37
50

Appreciate your efforts! However, what I intended to achieve here was to format a specific date as per the format in different country cultures, like in US its MM/DD/YYYY and in Germany its DD.MM.YYYY. – Shashank Salaj Feb 13 '20 at 05:05
ah, forgot about that part, editing now. i have a neat trick for that that works in the latest version of ALL browsers, unlike this one., eh its still not an appropriate answer for this one; i was aiming for another one (https://stackoverflow.com/questions/46228846/how-to-format-javascript-date-to-mm-dd-yyyy) that one and got mixed up somehow. – omikes Feb 14 '20 at 18:12
btw you can use `DateTimeFormat('default')` instead of `[]` – Eonasdan Jan 19 '21 at 20:00

score 0 · Answer 3 · edited Jul 10 '20 at 06:39

In the node, by default, we do not have access to the dateStyle property as in browsers.

I use the following configuration:

const TimeFormat = () => {
    const options = {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "numeric",
      minute: "numeric",
      second: "numeric",
      fractionalSecondDigits: 3,
      hour12: false,
      timeZone: "UTC",
    };
    return `${Intl.DateTimeFormat("pt-BR", options).format(
      data
    )}.${data.getMilliseconds()}`;
  };

How to customise Intl.DateTimeFormat date?

3 Answers3