How to format a Date in a Specific Format in React.js?

Question

I want to show the full date formatted from this 2020-11-09T17:50:00.000Z to this
22/1/2020 14:20:22 format.
I know how get the desired format via moment.js, but want to achieve this with JavaScript Date.
Here is what I have now, but this is not what I want.

let d = new Date("2020-11-09T17:50:00.000Z".toLocaleString("en-US"))
        console.log(d);

Any help will be appreciated

The reason moment (and it's replacement luxon) exists is that Date does not do that out of the box. You can do it with string operations and the Date api — Charlie Bamford
– Charlie Bamford, Commented Feb 19, 2021 at 23:46
Hi @CharlesBamford thanks for the response. Makes sense. I should have posted my question earlier, I spent a while to find a solution with the date. — FD3
– FD3, Commented Feb 19, 2021 at 23:55

Stephen P · Accepted Answer · 2021-02-20 00:41:03Z

2

toLocaleString() can produce many formats, and you can choose the locale to get the format (or close to it) that you want.

The locale "en-GB" gives you almost what you want; you just need to remove the comma that it puts in...

let d = new Date(2020, 0, 22, 14, 20, 22);
let output = d.toLocaleString("en-GB")
              .replace(',' ,'');
console.log(output);

You can actually control the output further by using the options parameter.

But also see the Intl object for its DateTimeFormat constructor.

answered Feb 20, 2021 at 0:41

Stephen P

14.9k2 gold badges50 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Da Mahdi03 · Accepted Answer · 2021-02-19 23:59:50Z

2

You can always do it manually, the Date API only has a limited set of functions like .toLocaleDateString() which will give you "11/9/2020" and .toGMTString() will return "Mon, 09 Nov 2020 17:50:00 GMT".

Using your Date APIs, you can build the string yourself using what you have.

var timeString = d.toGMTString().split(" ")[4]; //This will return your 17:50:00
//For the date string part of it
var dateNumber = d.getDate();
var monthNumber = d.getMonth() + 1;
var yearNumber = d.getFullYear();
var dateString = `${dateNumber}/${monthNumber}/${yearNumber}`;
var finalDateString = [dateString, timeString].join(" ");

answered Feb 19, 2021 at 23:59

Da Mahdi03

1,6081 gold badge12 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to format a Date in a Specific Format in React.js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related