Category: HTML

Added: 4th of February 2020

Updated On: 2nd of October 2020

Viewed: 1339 times

How do I display a popup calendar using HTML5

This article was rechecked and updated on 02/10/20

In the early days of the internet, the only way to create a popup calendar for your website form was to use javascript.

These days it's a lot simpler with HTML5, you simply set the input type in your form to date. The calendar works across all modern browsers, mobiles and tablets.

If you want to make sure your user picks a date once they have submitted the form, use the required attribute at the end of the input tag.

The required attribute works with other input types, these include email, radio, file, tel, password, url and checkbox.

Please copy and paste the code below. This sets the default date of the calendar to 2020-01-29

<input type="date" name="date_picker" value="2020-01-29" required>

Select date

Other Tips & Tutorials


How do I display a popup calendar using HTML5

Posted: 4th of February 2020

Views: 1339


HTML select menu, displaying counties in England, Scotland, Wales and Northern Ireland

Posted: 26th of September 2019

Views: 1915