Converting string date in react/javascript

Question

I'm getting a string date from a JSON object. I need to convert the date

"2018-05-18T04:00:00.000Z" to. May 18 , 2018

I tried using the Date() constructor but I wasn't successful.

I've heard of Intl.DateTimeFormat but I don't understand the documentation. Any help and explanation is appreaiated .

ninjaAF · Accepted Answer · 2018-05-27 01:38:19Z

19

You should be able to do this purely with JavaScript, including parsing with Date() and, depending on your browser support requirements, format with toLocaleDateString().

The second example (commented out) just shows how it can work with a specific locale (as a string, though that can be an array of such strings).

function formatDate(string){
    var options = { year: 'numeric', month: 'long', day: 'numeric' };
    return new Date(string).toLocaleDateString([],options);
}
var dateString = "2018-05-18T04:00:00.000Z"
document.getElementById("results").innerHTML = formatDate(dateString);
 
// You could also provide specific locale, if needed. For example:
//function formatDate(string){
//    var options = { year: 'numeric', month: 'long', day: 'numeric' };
//    return new Date(string).toLocaleDateString('en-US',options);
//}

<div id="results"</div>

edited May 27, 2018 at 1:38

answered May 20, 2018 at 2:16

ninjaAF

5342 silver badges5 bronze badges

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

2 Comments

bruce Over a year ago

This is a good answer. The answer included the day but I guess I can just exclude it. Your explanation was straightforward as well.

RobG Over a year ago

The format of the result of the above is dependent on the default language for the implementation, so it may not be "May 18, 2018".

peter bray · Accepted Answer · 2018-05-20 06:10:06Z

16

You can use Moment.js to do this.

const date = moment("2018-05-18T04:00:00.000Z").format('DD MMM, YYYY');
console.log(date);
// May 18, 2018

Here's a fiddle.

edited May 20, 2018 at 6:10

answered May 20, 2018 at 2:15

peter bray

1,3451 gold badge12 silver badges22 bronze badges

1 Comment

Tung Over a year ago

I also like this solution because of its simplicity! A vote for your contribution!

Randy Casburn · Accepted Answer · 2018-05-20 02:21:34Z

You've created a new Date object correctly and JavaScript stored the correct date. The issue has to do with Locale. In this next line of code, JS has created and stored that exact time. But when we ask for an output from JS we usually get exactly what we ask. From you're example, you've asked for the date based upon a locale that is most likely in the USA. So this:

new Date('2018-05-18T04:00:00Z').toLocaleString(); //(or .toString()

will give you exactly the result you ask, which is a UTC time shifted to a different locale (I've left the time on for demonstration).

On the other hand, using this:

new Date('2018-05-18T04:00:00Z').toUTCString();

Will produce the result you expect because it enforces the correct locale to be UTC.

document.querySelector('#a').innerText = new Date('2018-05-18T04:00:00Z').toString();
document.querySelector('#b').innerText = new Date('2018-05-18T04:00:00Z').toUTCString();

Incorrect: <p id="a"></p>
<hr>
Correct: <p id="b"></p>

user9483138 · Accepted Answer · 2018-05-20 02:16:13Z

1

I think what you need to do is:

let date = new Date(string);

let readableDate = date.toDateString();

answered May 20, 2018 at 2:16

user9483138

562 bronze badges

Collectives™ on Stack Overflow

Converting string date in react/javascript

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related