How to add a date picker in form using HTML ?
To add a date picker in a form using HTML, you can use the <input>
element with the type
attribute set to “date”. A date picker is an interactive dropdown that makes it easy to choose the date from a calendar instead of typing it manually. In this article, we will learn how to add a date picker in form using HTML5.
Syntax:
<input type="datetime-local">
Additional Attributes for Date Picker:
Attribute Values |
Description |
---|---|
Min attribute |
It is used to set the minimum allowable date, ensuring users select dates after the specified minimum. |
Max attribute |
It is used to establish the maximum selectable date in a date picker, limiting users to choosing dates before the specified maximum. |
Step attribute |
It is used to define the increment value for date selection, allowing users to jump between dates based on the specified step size. |
Approach:
- Create an HTML document that contains a form with an input field.
- Using a type attribute in the input element which is set to “datetime-local“.
Example 1: Implementation of datetime-local in an HTML document
HTML
<!DOCTYPE html> < html > < head > < style > body { text-align: center; } </ style > </ head > < body > < h2 style = "color:green" >w3wiki</ h2 > < b > How to add a datepicker in form using HTML </ b > < br > < h4 >Date Of Birth: < input type = "datetime-local" id = "Test_DatetimeLocal" > </ h4 > </ body > </ html > |
Output:
Example 2: Implementation of datetime-local with attributes in an HTML document
HTML
<!DOCTYPE html> < html > < head > < style > body { text-align: center; } </ style > </ head > < body > < h2 style = "color:green" >w3wiki</ h2 > < b >How to add a datepicker in form using HTML</ b > < br > < h4 >Date Of Birth: < input type = "datetime-local" id = "Test_DatetimeLocal" min = "2015-01-01T00:00" max = "2025-12-31T23:59" step = "1" > </ h4 > </ body > </ html > |
Output: