HTML input type="date"

The HTML input type date is a type of form control that allows users to select a date from a calendar widget. The date input type was introduced in HTML5 and has since become widely adopted by modern web browsers. The syntax for using the date input type is simple:

<input type="date" name="myDate">

The name attribute is used to specify the name of the input field, while the type attribute is set to "date" to indicate that this is a date input field. When the user selects a date from the calendar widget, the date value is stored in the input field.

Some more examples:

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

<label for="arrival-date">Arrival date:</label>
<input type="date" id="arrival-date" name="arrival-date" min="2023-04-02" max="2023-04-30">


<label for="event-date">Event date:</label>
<input type="date" id="event-date" name="event-date" placeholder="DD/MM/YYYY" pattern="\d{2}/\d{2}/\d{4}">

The min and max attributes can be used to set boundaries for the user when selecting dates. This way, it ensures that any date chosen has to be between an upper and lower limit and is not outside the specific range.

The date input in HTML can be represented in the ways listed on examples above. The browser, however, will not recognize different formats of dates when written as a text input. The pattern attribute is useful when it comes to having a text input fallback for when the date picker isn't used. This can allow the browser to recognize different formats of dates and normalize them to the standard format of yyyy-mm-dd.