Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Add a Datepicker in Form using HTML?
Forms are a crucial and typical component of any application. They include entry fields for things like name, gender, email, and many others. A datepicker is used on several forms to fill up the date type inputs. We are aware that choosing a certain day from a calendar is done via a datepicker. Instead of typing the date by hand, a datepicker is an interactive dropdown that makes it simple to select it from a calendar. In many situations, it is also used to save a user's birthdate.
Let's dive into the article for getting better understanding on how to add a datepicker in form using HTML. This can be done by using the
HTML <input type="date">
The <input> element with the type="date" establish input fields where the user can enter a date using either a textbox that validates the input or a specific date picker interface. The resultant value contains the time but not the year, month, or day. Time and date+time inputs are supported via the time and datetime-local input types.
Syntax
Following is the syntax for HTML <input type="date">
<input type="date">
Let's look into the following examples to get more idea on adding a datepicker in the form using the HTML.
Example
Let's look into the general example on the usage of <input type="date">
<!DOCTYPE html> <html> <body> <label for="nane">Name:</label> <input type="text" id="name" name="name"> <br /> <label for="DOB">Enter Date Of Birth:</label> <input type="date" id="DOB" name="DOB"> </body> </html>
On running the above code, the output window will pop up, displaying the input field for the name and the datepicker dropdown calendar for the user to select the date of birth.
Example
Following is an example where we are going to add the min and max attributes to the datepicker.
<!DOCTYPE html>
<html>
<body>
<form> Enter Vacation Date: <input type="date" name="Vacation" min="2023-05-06" max="2023-05-25">
<br /> Reason : <input type="text" name="reason">
</form>
</body>
</html>
When the above code gets executed, it will generate an output consisting of the date picker mentioned with a min and max attribute allowing the user to select the date between them, along with an input field displayed on the webpage.
Example
In the following example, we are going to add the input type "datetime-local" and using the value attribute.
<!DOCTYPE html> <html> <body> <label for="time">Choose Party Date And Time :</label> <input id="time" type="datetime-local" name="time" value="2023-05-05T11:55" /> </body> </html>
On running the above code, the output window will pop up, allowing the user to enter a date along with a time for the start of the party with the help of datetime-local.
Example
Consider the following example, where we are going to check the validation of the user entered input.
<!DOCTYPE html>
<html>
<body>
<form>
<div>
<label for="party"> Choose Preferred Date And Time: </label>
<input id="party" type="datetime-local" name="partydate" min="2023-05-05T07:30" max="2023-05-30T16:30" required />
<span class="validity"></span>
</div>
<div>
<input type="submit" value="Book For Party!">
</div>
</form>
</body>
</html>
When we execute the above code, the output window will pop up, displaying the date and time picker for the user to select along with a submit button. When the user clicks the button, it checks whether the input is valid or not.
264 Views
