Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Add a Datepicker in Form using HTML?
Forms are a crucial component of any web application, containing input fields for information like names, emails, and dates. A datepicker is an interactive dropdown calendar that allows users to select dates easily without manually typing them. This feature is commonly used for birthdate entries, appointment scheduling, and event planning.
In HTML5, adding a datepicker to forms is straightforward using the built-in <input type="date"> element, which provides native browser support for date selection.
HTML <input type="date">
The <input> element with type="date" creates input fields where users can enter dates using either a text box with validation or a visual date picker interface. The resulting value includes the year, month, and day in YYYY-MM-DD format. Related input types include time for time-only input and datetime-local for combined date and time selection.
Syntax
Following is the basic syntax for HTML date input
<input type="date" id="dateField" name="dateField">
The date input accepts several attributes including min, max, value, required, and standard form attributes like name and id.
Basic Date Input Example
Following example demonstrates a simple form with a date picker for date of birth
<!DOCTYPE html>
<html>
<head>
<title>Basic Date Picker</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" style="margin: 10px;">
<br><br>
<label for="DOB">Date of Birth:</label>
<input type="date" id="DOB" name="DOB" style="margin: 10px;">
<br><br>
<input type="submit" value="Submit" style="padding: 8px 16px;">
</form>
</body>
</html>
This creates a form with a text field for name entry and a date picker for selecting the date of birth. The date picker displays a calendar interface when clicked.
Date Range Validation with Min and Max
The min and max attributes restrict the selectable date range, useful for scenarios like vacation booking or event scheduling.
Example
<!DOCTYPE html>
<html>
<head>
<title>Date Range Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label for="vacation">Select Vacation Date:</label>
<input type="date" id="vacation" name="vacation" min="2024-01-01" max="2024-12-31" style="margin: 10px;">
<br><br>
<label for="reason">Reason:</label>
<input type="text" id="reason" name="reason" style="margin: 10px;">
<br><br>
<input type="submit" value="Book Vacation" style="padding: 8px 16px;">
</form>
</body>
</html>
The date picker only allows selection within the specified range from January 1, 2024, to December 31, 2024. Dates outside this range are disabled in the calendar interface.
DateTime-Local Input for Date and Time
The <input type="datetime-local"> combines date and time selection in a single field, useful for appointment scheduling and event planning.
Example
<!DOCTYPE html>
<html>
<head>
<title>DateTime Local Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label for="partyTime">Choose Party Date and Time:</label>
<input id="partyTime" type="datetime-local" name="partyTime" value="2024-06-15T19:30" style="margin: 10px;">
<br><br>
<input type="submit" value="Schedule Party" style="padding: 8px 16px;">
</form>
</body>
</html>
The datetime-local input provides both date and time selection with a default value of June 15, 2024, at 7:30 PM. The format is YYYY-MM-DDTHH:MM.
Form Validation with Required Attribute
Adding validation ensures users provide necessary date information before form submission.
Example
<!DOCTYPE html>
<html>
<head>
<title>Date Validation Example</title>
<style>
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="datetime-local"], input[type="submit"] { padding: 8px; }
.error { color: red; font-size: 12px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<div class="form-group">
<label for="appointmentTime">Choose Preferred Appointment Date and Time:</label>
<input id="appointmentTime" type="datetime-local" name="appointmentTime"
min="2024-01-01T08:00" max="2024-12-31T17:00" required>
<div class="error">* This field is required</div>
</div>
<div class="form-group">
<input type="submit" value="Book Appointment">
</div>
</form>
</body>
</html>
This form includes validation with required attribute and time constraints between 8:00 AM and 5:00 PM. The browser prevents submission if the date field is empty or outside the specified range.
Browser Compatibility and Fallbacks
Modern browsers provide native support for date inputs with visual calendar interfaces. Older browsers that don't support HTML5 date inputs fall back to regular text inputs, where users can manually enter dates.
| Input Type | Format | Example Value | Use Case |
|---|---|---|---|
type="date" |
YYYY-MM-DD | 2024-06-15 | Birthdate, appointment date |
type="time" |
HH:MM | 14:30 | Meeting time, alarm time |
type="datetime-local" |
YYYY-MM-DDTHH:MM | 2024-06-15T14:30 | Event scheduling, appointments |
type="month" |
YYYY-MM | 2024-06 | Monthly reports, billing periods |
type="week" |
YYYY-W## | 2024-W24 | Weekly planning, work schedules |
Conclusion
HTML5's built-in date input types provide an easy way to add datepickers to forms without additional JavaScript libraries. The <input type="date"> element offers native browser support with validation, range restrictions, and user-friendly calendar interfaces. For applications requiring both date and time selection, datetime-local provides a comprehensive solution.
2K+ Views
