react intl - Set formating options globally.

[ktyminski]

Recently I stumbled upon issue with formatting time h12 vs h24 on default, so I though i would just set it globally like this: (according to documentation):

<IntlProvider
    locale='en-GB'   
    formats={{ time: { hour12: true, hourCycle: 'h12' } }}  
    key={locale}  
    messages={messages}> 
        {children}  
    </IntlProvider>  

but when i use it somewhere inside with:

const { formatTime } = useIntl();
console.log(formatTime(someTimestamp)) //doesnt work
console.log(formatTime(someTimestamp), {hour12: true}) //works

formats settings for IntlProvider doesnt seem to be taken into consideration. Do i miss something?

[longlho]

I believe the type for formats is:

{
	  formats: {
		  time: {
			  myCustomFormat: { hour12: true}
		  }
	  }
}
intl.formatTime(ts, {format: myCustomFormat});

[ktyminski]

Thanks for the response. So basically i need to pass the parameter every time i use formatTime method? Is there any mechanism to inherit it from IntlProvider to have custom formating by default somehow, not passing it to every method? Now it looks like the formats is stored by intl object but it is user responsibility to use it every time manually.

[longlho]

yeah there's no support for that because there's no single setting that is applicable for every locale. Even with hour12 there are side effects I don't know if you've tested since it can modify time pattern in subtle ways. Some locales prefer h23/h24 so in general I wouldn't recommend forcing it.