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 Date and Time Picker using only one tag in HTML?
Incorporating date and time pickers into web forms is a common requirement for many web developers. While you might think that adding date and time pickers requires JavaScript libraries, HTML5 provides a simple, native solution. Using the input element with the datetime-local type, you can create a combined date and time picker with just one tag, significantly reducing code complexity.
Syntax
Following is the syntax for creating a combined date and time picker
<input type="datetime-local" name="datetime" id="datetime">
The <input> tag is an interactive element in HTML whose main purpose is to take different forms of inputs from the user. The type attribute specifies what kind of input the user should enter.
Available Date and Time Input Types
HTML5 provides several input types for date and time selection
type="date"Displays only a date pickertype="time"Displays only a time pickertype="datetime-local"Displays both date and time picker in one controltype="month"Displays month and year pickertype="week"Displays week and year picker
Using datetime-local for Combined Picker
The datetime-local input type creates a control for entering both a date and time, without time zone information. This is the most efficient way to get both date and time input using a single HTML tag.
Example Basic Date and Time Picker
Following example demonstrates a simple date and time picker using the datetime-local input type
<!DOCTYPE html>
<html>
<head>
<title>Date and Time Picker Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Schedule</h2>
<form>
<label for="event-datetime">Select Event Date and Time:</label><br><br>
<input type="datetime-local" id="event-datetime" name="event-datetime">
<br><br>
<input type="submit" value="Schedule Event">
</form>
</body>
</html>
This creates a single input field that allows users to select both date and time in one control.
Setting Default Values and Constraints
You can enhance the datetime-local input with additional attributes for better user experience and validation
Example Enhanced Date and Time Picker
<!DOCTYPE html>
<html>
<head>
<title>Enhanced Date and Time Picker</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Appointment Booking</h2>
<form>
<label for="appointment">Select Appointment Date and Time:</label><br><br>
<input type="datetime-local"
id="appointment"
name="appointment"
value="2024-12-25T10:00"
min="2024-01-01T09:00"
max="2024-12-31T18:00"
required>
<br><br>
<p><small>Available: 9:00 AM to 6:00 PM, Year 2024</small></p>
<input type="submit" value="Book Appointment">
</form>
</body>
</html>
This example includes
valueSets a default date and timeminandmaxSets acceptable date and time rangerequiredMakes the field mandatory
Accessing Values with JavaScript
Example JavaScript Integration
<!DOCTYPE html>
<html>
<head>
<title>Date Time Picker with JavaScript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Meeting Scheduler</h2>
<label for="meeting-time">Select Meeting Date and Time:</label><br><br>
<input type="datetime-local" id="meeting-time" name="meeting-time">
<br><br>
<button onclick="showDateTime()">Show Selected Time</button>
<p id="result"></p>
<script>
function showDateTime() {
var dateTime = document.getElementById("meeting-time").value;
var result = document.getElementById("result");
if (dateTime) {
var date = new Date(dateTime);
result.innerHTML = "Selected: " + date.toLocaleString();
} else {
result.innerHTML = "Please select a date and time.";
}
}
</script>
</body>
</html>
When a user selects a date and time and clicks the button, JavaScript formats and displays the selected value in a readable format.
Selected: 12/25/2024, 10:00:00 AM
Browser Support and Value Format
The datetime-local input type is supported in modern browsers including Chrome, Firefox, Safari, and Edge. The value is always returned in the format YYYY-MM-DDTHH:MM (ISO 8601), regardless of how it appears in the user interface.
| Input Type | Value Format | Example |
|---|---|---|
| date | YYYY-MM-DD | 2024-12-25 |
| time | HH:MM | 14:30 |
| datetime-local | YYYY-MM-DDTHH:MM | 2024-12-25T14:30 |
Conclusion
The datetime-local input type provides a native, single-tag solution for adding both date and time pickers to web forms. This approach eliminates the need for external JavaScript libraries while providing a consistent user experience across modern browsers. Always include proper labels and consider adding validation attributes for better usability.
1K+ Views
