How to add a datepicker in HTML
problem
You wish to let your user select a date on your website in a user-friendly way. Instead of typing in the day, month and year, you wish to use a pop up calendar and let the user select the date.
SOLUTION
By using the <input> tag with the attribute type set to date. For example:
<input type="date" />
output
By clicking on the calendar icon 
, the user can select a specific date by changing the year and month as shown in the screenshot below.
Setting default date/ value to show
By specifying the value attribute we can set a default date to appear when the web page is loaded. The accepted format of the date is: yyyy-mm-dd. For example:
<input type="date" value=’2027-01-15’/>
output
As we can see in the screenshot, it’s showing the default date (15 of January, 2027) we specified in the value attribute.
Setting a particular range of date
We might want to limit the user to selecting only a date from e.g. only between 2 years. For example, we wish to limit the date selection to be from the beginning of year 2024 till the end of year 2025. We can do so by specifying the attributes min and max respectively. The format of the date accepted is as in the previous example: yyyy-mm-dd
<input type="date" min="2024-01-01" max="2025-12-31"/>
output
As we can see from the screenshots above, the one to the left shows the effect of using attributes min and max to limit the selection of dates. In contrast, the screenshot to the right shows no particular limit on date selection.
conclusion
In this post we saw how to use the input tag with the type=date to show a calendar pop up and let the user pick a date. Also, we used the min, max and value attributes to customize the behavior of the tag.
Reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
Share it!
Ellion
Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪