React JSX add min date time to datetime-local input

Question

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 .

T J · Accepted Answer · 2021-05-06 17:57:51Z

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" />

edited May 6, 2021 at 17:57

answered May 6, 2021 at 17:42

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

3 Comments

David Blanco Over a year ago

i had to add this split method: new Date().toISOString().slice(0, -8).split('T')[0]

Biobrolly Over a year ago

When I select your option and select from the date time picker the current time, the form does not allow me to submit saying that I should choose 2 hours less. Any ideas?

T J Over a year ago

@Biobrolly there is no <form> in my codesanbox, that validation is likely something implemented somewhere inside your application

Collectives™ on Stack Overflow

React JSX add min date time to datetime-local input

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related