Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Use Input Type Field with Date Field in HTML
In this article, we are going to use input type field with date field in HTML.
We use type="date" in the <input> elements to create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface.
The value includes the year, month, and day.
Syntax
Following is the syntax to use input type field with date field in HTML.
<input type="date" id="date" name="date">
Example
Following is the example program to use input type field with date field in HTML.
<!DOCTYPE html> <html> <body> <form > <label for="birthday">Date:</label> <input type="date" id="date" name="date"> <input type="submit"> </form> </body> </html>
Now we can choose a date from date picker.
Adding Date to an Input Field with Range
We can also use max and min attributes along with date attribute to create a range of the input field.
Syntax
Following is the syntax to use max and min attributes along with date attribute to create a range of the input field.
<input type="date" name="party" min="2022-06-10" max="2024-04-30">
Example
Following is the example program to use max and min attributes along with date attribute to create a range of the input field.
<!DOCTYPE html> <html> <body> <form > <label for="birthday">Date:</label> <input type="date" name="party" min="2022-06-01" max="2022-07-30"> <input type="submit"> </form> </body> </html>
We can see that the date picker disabled all other values. And created a range that we have specified in the above example.
In the above example program, we set min="2022-06-01" and max="2022-07-30". Therefore, the date picker is able to select the date from the min and max range.
Date Attribute as a RequiredField
We can also use the required attribute to the input field to make filling in the date mandatory. An error will be displayed if we try to submit an empty date field.
Syntax
Following is the syntax to use the required attribute to the input field to make filling in the date mandatory.
<input type="date" name="party" min="2022-06-10" max="2024-04-30" required>
Example
Following is the example to use the required attribute to the input field to make filling in the date mandatory.
<!DOCTYPE html> <html> <body> <form > <label for="birthday">Date:</label> <input type="date" name="party" min="2022-06-01" max="2022-07-30" required> <input type="submit"> </form> </body> </html>
An error message is displayed as we tried to submit an empty date in the input field.
2K+ Views
