Timestamp format is not supporting the React `react-datepicker` as default value

Question

My date-time format from the api result is 2019-12-30T06:16:48.453Z. It is not supported by the react-datepicker.

My code is following and is a functional component. I didn't write the complete code below. Added just the required parts.

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

<DatePicker
    selected={'2019-12-30T06:16:48.453Z'}
    {...props}
/>

I also tried adding moment by importing it and used as selected={moment('2019-12-30T06:16:48.453Z')}

I'm getting the error in both cases like Maximum update depth exceeded.

when you give selected={moment('2019-12-30')} is it working ? without time — Learner, Dec 30 '19 at 11:14
This error - Maximum update depth exceeded - is about infinite loop in your react app. You have somewhere logic that is updating compontent, and updated component is triggering new update and so on, and so on. You should first try to solve that — Lazar Nikolic, Dec 30 '19 at 11:22
I'm using `Formik` library similar to Redux-Form and no more updations in my own ways. — Hareesh, Dec 30 '19 at 11:26
@Hareesh the selected prop accepts an object not a string, so you need to convert it using native Date. Added the answer kindly check and let me know if you need any further clarifications on this — Learner, Dec 30 '19 at 11:33

Learner · Accepted Answer · 2019-12-30T13:22:39.360

2

Still version 1.8 of react datepicker they were using moment, to reduce the package size they are using the native Date Objects. reference

So you can update your code as shown below

 function App() {
  return (
    <div className="App">
      <DatePicker selected={new Date("2019-12-30")} />
      <DatePicker selected={new Date("2019-12-30T06:16:48.453Z")} />
    </div>
  );
}

working codesandbox

Update

to get the required format react datepicker has a prop called dateFormat, so you can add like this dateFormat="dd/MM/yyyy", See here

edited Dec 30 '19 at 13:22

answered Dec 30 '19 at 11:32

Learner

8,379
7
44
82

This one works but the format is not working `dateFormat={'dd-MM-yyyy}` and it shows the default format. This is working when the date changes by selecting from the datepicker. – Hareesh Dec 30 '19 at 12:41
@Hareesh basically you need to transform it your required format in native Date, i think that will work, as mentioned in the question added the answer in that format so basically you want to show it in dd-mm-yyyy format, am i correct – Learner Dec 30 '19 at 13:03

score 0 · Answer 2 · answered Dec 30 '19 at 11:27

Maximum update depth exceeded

This error happens when your function call inside return of render method exceeds limits. Can you checkout any other function calls inside your component.

And for

react-datepicker

try basic JavaScript Date api.

selected={new Date('2019-12-30T06:16:48.453Z')}

This should work

score 0 · Answer 3 · answered Dec 30 '19 at 11:35

0

 const datee='2019-12-30T06:16:48.453Z';
 let filt = Date(datee);
 console.log(filt);
 document.write(filt);

answered Dec 30 '19 at 11:35

akhtarvahid

9,445
2
26
29

score 0 · Answer 4 · answered Dec 30 '19 at 11:36

This error about infinite loop . You can check this issue : ReactJS: Maximum update depth exceeded error And also you can set dateFormat in DatePicker component like : dateFormat="MMMM d, yyyy h:mm aa" Check this for formats: https://reactdatepicker.com/

Timestamp format is not supporting the React `react-datepicker` as default value

4 Answers4