There is a timestamp that is converted to a date of format DD/MM/YYYY using Date object.

Is there a way to convert to the date format of the user locale?

Here is the code:

const getDateFromTimestamp = (timeStamp: number) => {
  const date = new Date(timeStamp * 1000);
  const day = ('0'   date.getDate()).slice(-2);
  const month = ('0'   (date.getMonth()   1)).slice(-2);
  const year = date.getFullYear();
  return day   '/'   month   '/'   year;
};

I guess it should use Intl, something like Intl.DateTimeFormat(timeStamp).format() but not sure

CodePudding user response：

There are 2 ways for doing the the "Locale Formatting" in Javasript.

1. Using the Date.prototype.toLocaleDateString()

This method is useful if you also want something specific in the dates and there are not large number of dates you want to format. The usage is pretty simple for this method:

1. You get the Locale of the browser (I prefer getting this using globalThis.navigate.language as it returns me the Locale Code to be used while defining the format.
2. You create the date object and then attach the toLocaleDateString() function to it and passing in the Locale parameter to get desired output.

• Do note that this method also supports the passing in the options, but if not passed, you will get the date formatted in Locale with only Date,Month and Year. Example code:

const getDateFromTimestamp = (timeStamp: number) => {
  const userLocale = globalThis.navigator.language // will give you locale, eg. 'en-US' or 'en-IN')
  const date = new Date(timeStamp * 1000); // your Date object
  return date.toLocaleDateString(userLocale); // will return the formatted date, eg: for 'en-IN', 22/2/2022
};

For advanced formatting, we can use options:

const getDateFromTimestamp = (timeStamp: number) => {
  const options = { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric' };
  const userLocale = globalThis.navigator.language // will give you locale, eg. 'en-US' or 'en-IN')
  const date = new Date(timeStamp * 1000); // your Date object
  return date.toLocaleDateString(userLocale, options); // will return the formatted date, eg: for 'en-IN', "Tue, 22 February, 2022"
};

2. Using the DateTimeFormat().format(date)

You can use this method as well, where in you first create the object of the DateTimeFormat.DateTimeFormat and then reuse it wherever you want to format the date. For eg:

const userLocale = globalThis.navigator.language;
const options = { year: 'numeric', month: 'long', day: 'numeric' };
const a = new Intl.DateTimeFormat(userLocale, options);
const getDateFromTimestamp = (timeStamp) => {
  const date = new Date(timeStamp * 1000); // your Date object
  return a.format(date) 
};

CodePudding user response：

Is there a way to convert to the date format of the user locale?

The short answer is a very qualified "yes", but using default language settings means results are unreliable so that isn't an advisable approach.

The term "locale" is general use means location. In the world of the ECMA-402 Internationalization API specification (and hence EMCAScript) it's used as a synonym (many would say misnomer) for language.

You can determine the default language for the host and use that with Intl.DateTimeFormat, or it's proxy toLocaleString, for formatting. However it assumes that the user has set the language to an appropriate setting and wants to see dates in that format. It also means that you, as a developer, have no idea what format the date will be presented to the user.

Another issue is whether the user has set the default language of the host to an appropriate setting. Very likely they haven't, especially if the device is not theirs. So relying on the default language for formatting may well produce unexpected and unwelcome results.

It makes far more sense to present dates in the same language as the page in an unambiguous format, e.g. English speakers will not be confused by 2 February 2022 or February 2 2022 regardless of their preferred format (where en-GB might be d/m/y, en-US m/d/y and en-CA y-m-d). This also covers the case where pages are presented in multiple languages: dates should be presented in a language and format appropriate to the selected language, not some other language and format based on a default language setting.

That way you can ensure that dates are sensibly presented in the context of the page.