Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
datepicker
communitycreator

How to set minimum and maximum date in HTML date picker

Theodore Kelechukwu Onyejiaku

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!

<input type="datetime-local" min="2010-01-01T00:00" max="2020-12-31T00:00">

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! ๐Ÿ˜Š

RELATED TAGS

html
datepicker
communitycreator

CONTRIBUTOR

Theodore Kelechukwu Onyejiaku
RELATED COURSES

View all Courses

Keep Exploring