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
<!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
<!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: