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 pilation error: Type '{ dateStyle: string; timeStyle: string; }' has no properties in mon with type 'DateTimeFormatOptions'.

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

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 pilation error: Type '{ dateStyle: string; timeStyle: string; }' has no properties in mon with type 'DateTimeFormatOptions'.

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

• javascript
• html
• angular
• datetime
• internationalization

3 Answers 3

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.

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());

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()}`;
  };