How can I format the date coming from the server to date format of client machine?

Question

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.

Answer 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, fe

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;

Answer 2

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