Format Date based on timezone/UTC offeset

Question

It will be very helpful to know if there is a way to format Date based on Timezone.

Ex:we give America/Los_Angeles as timezone,the output date should be formatted as MM-DD-YYYY.If we give timezone as Asia/Kolkata, It should be changed to DD-MM-YYYY. I wanted to know if any library have any OOB method to auto format Date based on selected Timezone.

I have already tried using Locale support.Using Locale (en-US,en-GB,ja) we can format the date but none of the libraries stores which timezone uses which locale. We can use the browser locale(navigator.language) But This will not give desired output on locale and timezone mismatch.

Ex: 
    new Date(value).toLocaleString('en-US',{timeZone: "Asia/kolkata"}) // gives o/p in MM-DD-YYYY format. 
    ideally this should give O/P in DD-MM-YYYY format.

most of the libraries gives an OOB method to format the date but it expects an input string.

Ex: DateTime.fromFormat('May 25, 1982', 'MMMM dd, yyyy')

   formatInTimeZone(date, 'America/New_York', 'yyyy-MM-dd HH:mm:ssXXX') 

   dayjs('2019-01-25').format('[YYYYescape] YYYY-MM-DDTHH:mm:ssZ[Z]') 

i have checked below libraries:

https://www.npmjs.com/package/luxon

https://www.npmjs.com/package/dayjs

https://www.npmjs.com/package/date-fns-tz

I am looking for any help would be greatly appreciated. Thanks!!

Answer 1

You can simply use Intl.DateTimeFormat API. Here is how:

const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
// Results below assume UTC timezone - your results may vary

// Specify default date formatting for language (locale)
console.log(new Intl.DateTimeFormat('en-US').format(date));
// Expected output: "12/20/2020"

console.log(new Intl.DateTimeFormat('en-GB').format(date));
// Expected output: "20/12/2020"

console.log(
  new Intl.DateTimeFormat(undefined, options = {
  timeZone: "America/New_York"
}).format(date));

You can specify more options for formatting. Look at the documantation.

Answer 2

First: the timeZone "India/kolkata" is not valid.

I have pointed you to my es-date-fiddler library in a comment to your question, you answered it was not useful.

I'm not sure what you want to achieve, but as far as I know it is not possible to infer locale values from a timeZone value. Working with ES Dates, when no locale is given, the locale of the user is used. The locale (either specified or the users' locale) determines the formatting for toLocaleString([locale(s)]). In other words: locale is not related to timeZone.

Let's give an example using the aforementioned library for the current date, locale en-IN (India) and timeZone Asia/Kolkata. Maybe it helps ...

See also the library's demo for a bunch of examples.

const $D = window.$D;
const now = $D(new Date(), {locale: `en-IN`, timeZone: "Asia/Kolkata"});
const nowHere = $D(new Date());
console.log(`now.local: ${now.local}`);
console.log(`nowHere.local: ${nowHere.local}`);
console.log(`now.format("dd-mm-yyyy h:mi:s dp"): ${
  now.format(`dd-mm-yyyy h:mi:s dp`)}`);
console.log(`now.values.resolvedLocale:`, now.values.resolvedLocale);
console.log(`nowHere.values.resolvedLocale:`, nowHere.values.resolvedLocale);

.as-console-wrapper {
    max-height: 100% !important;
}

<script 
  src="https://kooiinc.github.io/es-date-fiddler/Bundle/index.browser.min.js">
</script>