Typescript: Intl DateTimeFormatOptions Missing Properties

[nikarc]

Hi guys,

I'm using Intl.DateTimeFormat to format some database dates into human readable format. TS is throwing an error:

Argument of type '{ year: string; month: string; day: string; weekday: string; hour: string; minute: string; dayPeriod: string; }' is not assignable to parameter of type 'DateTimeFormatOptions'.
  Object literal may only specify known properties, and 'dayPeriod' does not exist in type 'DateTimeFormatOptions'.  TS2345

    13 |         hour: 'numeric',
    14 |         minute: 'numeric',
  > 15 |         dayPeriod: 'short'
       |         ^
    16 |     });
    17 |     const date = new Date(eventDate);
    18 |     const [

I noticed that the TS documentation here does not reflect all the options present here

I tried searching the issues but i did not see anything about this specifically. Is this known/intentional? Could I make a quick pr to add the options to the DateTimeFormatOptions interface, if not?

Thanks

TypeScript Version: 3.8.3

Search Terms:
DateTimeFormatOptions, DateTimeFormat

Code

    const dtFormatter = new Intl.DateTimeFormat('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        weekday: 'short',
        hour: 'numeric',
        minute: 'numeric',
        dayPeriod: 'short'
    });

Expected behavior:
dayPeriod is exposed in the DateTimeFormatOptions interface

Actual behavior:
Error is thrown because dayPeriod is not present in DateTimeFormatOptions

Playground Link:
playground

[MartinJohns]

35865

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[casey6]

@RyanCavanaugh I don't believe this is a duplicate as it's talking about adding missing parameters. The referenced ticket proposes using string literal types to match the exact values allowed, which would be a potential breaking change. I think that would be avoided here when adding these missing parameters.

[raymonschouwenaar]

I'm also experiencing a issue with the fact, dateStyle property is also giving an error.

In the MDN docs we can see the should exist in the DateTimeFormat https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#Examples

[JorisWillig]

I am also encountering this issue, with the 'timeStyle' and 'dateStyle' options

[costasovo]

Same here with the 'timeStyle' !

[amychang0401]

same here with timeStyle + dateStyle ! Also one odd thing I found was

// SUCCESS with timeStyle and dateStyle 
new Intl.DateTimeFormat('en-US', {
  timeStyle:'short', dateStyle:'short'
}).format(date)
"11/2/20, 12:13 PM" 

// FAILED with additional `hour` option added
new Intl.DateTimeFormat('en-US', {
  hour:'numeric', timeStyle:'short', dateStyle:'short'
}).format(date)
VM788:1 Uncaught TypeError: Invalid option : dateStyle
    at new DateTimeFormat (<anonymous>)
    at <anonymous>:1:1

[dev99problems]

@amychang0401 seems like one odd thing happens because according to the MDN Doc

dateStyle can be used with timeStyle, but not with other options (e.g. weekday, hour, month, etc.)

So while using Intl.DateTimeFormat there are 2 options — to use dateStyle, timeStyle OR any other options, like hour, month, etc.