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:
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" >GeeksforGeeks</ 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:
Datepicker modalÂ
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" >GeeksforGeeks</ 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:
Last Updated :
10 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...