How to format date in ReactJS

Question

I'm getting my backend date as follows:

2020-01-01T03:00:00.000Z

I am using the daterangepicker from the AdminLTE template.

my field:

<div className="col-sm-3">
  <label>Contratação *</label>
  <Field
    name="dt_contracting"
    type="date"
    className="form-control"
  />
</div>

I want to convert the received date, to the format "DD/MM/YYYY"

my input is already in the correct format to select, but when I receive the Back-End date, it is not filled due to difference in format.

Does this answer your question? How to format a JavaScript date — Heretic Monkey
– Heretic Monkey, Commented Oct 6, 2020 at 20:14

casieber · Accepted Answer · 2020-10-06 20:14:08Z

2

Easiest way is to use the built-in toLocaleDateString() function. MDN

In your case you can use it like this:

function toPrettyDate( rawDateStr ) {
    const date = new Date( rawDateStr );
    return date.toLocaleDateString('en-GB'); // Should really use user-based locale here
}

answered Oct 6, 2020 at 20:14

casieber

7,6122 gold badges23 silver badges35 bronze badges

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

5 Comments

casieber Over a year ago

The accepted answer on your linked "duplicate" is not the best answer for this user's use case. It is overly complex.

casieber Over a year ago

Ah yes, Stack Overflow, the site I come to when I want to read through 56 answers and decide on the best one when I didn't know the answer in the first place. How user friendly.

Heretic Monkey Over a year ago

Sure, you'd rather them go through thousands of duplicate questions, each with slightly different answer, and having the same person try to figure out which one is better. Yeah, no, much more user friendly.

casieber Over a year ago

UTC string => DD/MM/YYYY is a different question than Date instance => DD-mon-YYYY. You or I may understand the inherent similarities in the question and know how to convert one problem into another, but someone asking this type of question may not even know how to go from UTC string => Date.

Heretic Monkey Over a year ago

If you spent half the time you spent on these comments actually looking for similar questions, you'd find there are hundreds of questions about dates, strings containing dates, etc. on Stack Overflow. For instance, Convert Date from one format to another format in JavaScript

BeaST 30 · Accepted Answer · 2020-10-06 20:11:56Z

0

You can use momentjs.

Prefer this for installation https://www.npmjs.com/package/react-moment

https://momentjs.com/docs/ for examples

answered Oct 6, 2020 at 20:11

BeaST 30

7441 gold badge11 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to format date in ReactJS

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related