How to set minimum and maximum date in HTML date picker

What is a date picker?

Date pickers appear when you want to select a date in a form on websites, or on any platform that requires your input as date and time.

How to set the range

When you create an input tag, set the type to date-time:

 <input type="datetime-local"/>

The magic

The magic is to use the min and max attributes and give them values. The values should be in the format YYYY-MM-DDThh:mm where:

• YYYY stands for year
• MM stands for month
• DD stands for date
• hh stands for hour
• mm stands for minutes

For example:

• 2020-07-18T00:00
• 2018-06-14T00:00

Let’s try it!

The code above will create a date picker that allows users to select date and time from 2010 to 2020.

The result

Click on the calendar icon to see the restriction.

Thank you for reading! 😊