0

I'm using react.js to my web page, and I want to know how to get the server's date and put it according the client's country format.

Example: birthday at server: 2002-22-12 birthday the way that I want, if the client is brazilian: 22/12/2002

Thanks.

I have seen other questions about date, but they just get the real date and format it. I need to get it from the API/backend.

Mikalayla
  • 11
  • 1
    Parse it into JavaScript Date object then use date.toLocaleDateString(). Date will be formatted acording to user's browser locale. – Jan Pfeifer Jan 06 '23 at 12:56
  • Does your backend really send the date in `YYYY-DD-MM`? I would have thought it would use the format `YYYY-MM-DD`. – Oskar Grosser Jan 06 '23 at 12:56
  • @JanPfeifer—not reliably. *toLocaleString* might use the browser default language, but it's questionable whether users bother to set it (the default is typically en-us). Also, it doesn't make sense to format dates according to the browser default when the page might be written in a totally different language. – RobG Jan 09 '23 at 12:06
  • "2002-22-12" is not a valid date in any common format. – RobG Jan 09 '23 at 12:10

2 Answers2

0

Initiallly, It's a best practice to get dates from server in ISO-8601 format YYYY-MM-DDTHH:mm:ss.sssZ. That helps us handle dates in a better way.

Nowadays, the native Intl API has a good browser support and we can use it easily to achieve that:

const dateInIsoFormatFromServer = "2022-06-03T19:38:34.203Z";
const date = new Date(dateInIsoFormatFromServer);

const formatter1 = new Intl.DateTimeFormat("en-US");
console.log("Format for United States locale: ", formatter1.format(date));
// Format for United States locale:  6/3/2022 

const formatter2 = new Intl.DateTimeFormat("pt-BR");
console.log("Format for Brasil locale: ", formatter2.format(date));
// Format for Brasil locale:  03/06/2022 

const formatter3 = new Intl.DateTimeFormat("es-AR");
console.log("Format for Argentina locale: ", formatter3.format(date));
// Format for Argentina locale:  3/6/2022

Locale string here could be sent from server to set in Intl.DateTimeFormat method. However, you could get the locale from user browser with navigator object and dinamically set that locale to formatter:


const dateInIsoFormatFromServer = "2022-06-03T19:38:34.203Z";
const date = new Date(dateInIsoFormatFromServer);

const browserLocale =
  window.navigator.language || window.navigator.browserLanguage;

const formatter1 = new Intl.DateTimeFormat(browserLocale);
console.log("Format for browser locale: ", formatter1.format(date));
// Format for browser locale:  03/06/2022 
// * My browserLocale is pt-BR

if necessary, you can set options to customize the format output:


const dateInIsoFormatFromServer = "2022-06-03T19:38:34.203Z";
const date = new Date(dateInIsoFormatFromServer);

const browserLocale =
  window.navigator.language || window.navigator.browserLanguage;

const options = {
  year: "numeric",
  month: "numeric",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
  second: "numeric",
  hour12: false
};
const formatter1 = new Intl.DateTimeFormat(browserLocale, options);
console.log("Format for browser locale with options: ", formatter1.format(date));
// Format for browser locale with options:  03/06/2022 12:38:34 
// * My browserLocale is pt-BR
Cássio Lacerda
  • 1,554
  • 1
  • 12
  • 14
-1

When it comes to working with dates on client-side (no matter which framework I use) - I always use moment.js package https://momentjs.com/

That's pure-js library with 0 dependencies, so it's able to work with any front-end technology on one hand, and it's easy to achieve any date-related operation with small amount of code on the other hand, f.e.

moment().format('MMMM Do YYYY, h:mm:ss a');

For your specific case to format date in current locale format you just have to do following:

let date = Date.now();
let dateMoment = moment(date);
console.log(dateMoment.format('L')); // 01/06/2023

If you'd like to have all your dates formatted in non-current locale, please change it explicitly, I referenced this article Locale detection with Moment.js:

moment.locale('ar');

let yourDateVariable = Date.now();
let yourDateMoment = moment(yourDateVariable);

console.log(yourDateMoment.format()); // ٢٠٢٣-٠١-٠٦T١٦:٣٤:١٩+٠٣:٠٠

Finally, to get current browser locale (if needed), please try following:

var locale = window.navigator.userLanguage || window.navigator.language;
Uladzimir
  • 500
  • 2
  • 5
  • Use of a library is unnecessary given the wide support for the *Intl* object and *toLocaleString*. Moment's *L* token uses the browser default language, which in many cases does not reflect the preferred language of the user. Also, it might be surprising for users to see dates in a format that is different to that of the language of the page. If I'm reading the New York Times online, I'd expect to see US format dates, not some other language. In any case, it's much preferred to use unambiguous values (e.g. month name or abbreviation rather than number) so order doesn't impede understanding. – RobG Jan 09 '23 at 12:18
  • firstly, moment.js is a kind of "standard", well-known for all developers. Secondly, Intl, according to my experience, never seen people using it, and it's support is not excellent https://caniuse.com/?search=datetimeformat. And finally moment.js supports any locale you want to target (not browser current one only) and lots of formats across any locale, just have a look please https://momentjs.com/ @RobG – Uladzimir Jan 09 '23 at 15:23
  • Luxon, the successor to moment.js, uses the Intl object rather than shipping its own data files so support must be fairly ubiquitous. Formatting according to language is only a small subset of the broad range of Date operations that many sites need, hence the use of a library. – RobG Jan 09 '23 at 22:49