I am using React and JSX to return an input field of type "datetime-local". I want the min value to be the date we have today with the current time. I do not know how to write this however.

What I tried :

<input min = {new Date().toLocaleString()}  id = "date" type = "datetime-local"/>

which did not work and no min value is set when I choose datetime .

I am using React and JSX to return an input field of type "datetime-local". I want the min value to be the date we have today with the current time. I do not know how to write this however.

What I tried :

<input min = {new Date().toLocaleString()}  id = "date" type = "datetime-local"/>

which did not work and no min value is set when I choose datetime .

• javascript
• html
• reactjs
• datetime
• input

Share Improve this question Follow edited May 6, 2021 at 17:55 T J 43.2k1313 gold badges8686 silver badges142142 bronze badges asked May 6, 2021 at 17:20 Βαρβάρα ΞιάρχουΒαρβάρα Ξιάρχου 9911 silver badge1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

The min, max values needs the format: yyyy-MM-ddThh:mm.

new Date().toISOString() returns a string which is always 24 or 27 characters long (YYYY-MM-DDTHH:mm:ss.sssZ or ±YYYYYY-MM-DDTHH:mm:ss.sssZ, respectively.

We can then use string manipulation methods to get the format we want, without the seconds and milliseconds bit :ss.sssZ, for example using String.slice():

 <input 
       min={new Date().toISOString().slice(0, -8)}
       id="date" type="datetime-local" />