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 use datetime input type in HTML?
The datetime-local input type in HTML allows users to select both date and time using a built-in date and time picker. This input type creates a form control that displays a calendar and time selector when clicked, making it easy for users to enter accurate date-time values.
Syntax
Following is the syntax for the datetime-local input type −
<input type="datetime-local" name="fieldName" value="YYYY-MM-DDTHH:MM">
The value format follows the ISO 8601 standard: YYYY-MM-DDTHH:MM where the T separates the date and time components.
Basic Example
Following example demonstrates how to use the datetime-local input type in a form −
<!DOCTYPE html>
<html>
<head>
<title>HTML DateTime-Local Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Registration Form</h2>
<form action="" method="get">
<label for="sname">Student Name:</label><br>
<input type="text" id="sname" name="sname" style="padding: 5px; margin: 5px 0;"><br><br>
<label for="datetime">Exam Date and Time:</label><br>
<input type="datetime-local" id="datetime" name="datetime" style="padding: 5px; margin: 5px 0;"><br><br>
<input type="submit" value="Submit" style="padding: 8px 16px; background-color: #4CAF50; color: white; border: none; cursor: pointer;">
</form>
</body>
</html>
The output displays a form with a text input for the student name and a datetime-local picker for selecting the exam date and time −
Event Registration Form Student Name: [Text Input Field] Exam Date and Time: [DateTime Picker - shows calendar and time selector when clicked] [Submit Button]
Using Default Values
You can set a default date and time value using the value attribute −
<!DOCTYPE html>
<html>
<head>
<title>DateTime with Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Appointment Booking</h2>
<form>
<label for="appointment">Select Appointment Time:</label><br>
<input type="datetime-local" id="appointment" name="appointment"
value="2024-12-25T10:30"
style="padding: 8px; margin: 10px 0; font-size: 14px;"><br><br>
<button type="submit" style="padding: 8px 16px; background-color: #2196F3; color: white; border: none; cursor: pointer;">Book Appointment</button>
</form>
</body>
</html>
The datetime input field will be pre-filled with December 25, 2024 at 10:30 AM −
Appointment Booking Select Appointment Time: [DateTime Picker with default value: 12/25/2024, 10:30 AM] [Book Appointment Button]
Setting Min and Max Values
You can restrict the selectable date and time range using min and max attributes −
<!DOCTYPE html>
<html>
<head>
<title>DateTime with Range Restriction</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Scheduling</h2>
<form>
<label for="eventtime">Select Event Time:</label><br>
<input type="datetime-local" id="eventtime" name="eventtime"
min="2024-01-01T09:00"
max="2024-12-31T18:00"
style="padding: 8px; margin: 10px 0; font-size: 14px;"><br>
<p style="font-size: 12px; color: #666; margin: 5px 0;">
Available: Jan 1, 2024 9:00 AM to Dec 31, 2024 6:00 PM
</p><br>
<button type="submit" style="padding: 8px 16px; background-color: #FF9800; color: white; border: none; cursor: pointer;">Schedule Event</button>
</form>
</body>
</html>
Users can only select dates and times within the specified range. Values outside this range will be invalid −
Event Scheduling Select Event Time: [DateTime Picker - restricted to 2024 range, 9 AM to 6 PM] Available: Jan 1, 2024 9:00 AM to Dec 31, 2024 6:00 PM [Schedule Event Button]
JavaScript Integration
You can access and manipulate the datetime-local value using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>DateTime with JavaScript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Meeting Scheduler</h2>
<label for="meetingtime">Select Meeting Time:</label><br>
<input type="datetime-local" id="meetingtime" name="meetingtime"
style="padding: 8px; margin: 10px 0; font-size: 14px;"><br><br>
<button onclick="showDateTime()" style="padding: 8px 16px; background-color: #4CAF50; color: white; border: none; cursor: pointer; margin-right: 10px;">Show Selected Time</button>
<button onclick="setCurrentTime()" style="padding: 8px 16px; background-color: #008CBA; color: white; border: none; cursor: pointer;">Set Current Time</button>
<p id="output" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0; border-radius: 4px;"></p>
<script>
function showDateTime() {
var datetime = document.getElementById("meetingtime").value;
var output = document.getElementById("output");
if (datetime) {
output.innerHTML = "Selected: " + new Date(datetime).toLocaleString();
} else {
output.innerHTML = "Please select a date and time.";
}
}
function setCurrentTime() {
var now = new Date();
var year = now.getFullYear();
var month = String(now.getMonth() + 1).padStart(2, '0');
var day = String(now.getDate()).padStart(2, '0');
var hour = String(now.getHours()).padStart(2, '0');
var minute = String(now.getMinutes()).padStart(2, '0');
var currentDateTime = year + '-' + month + '-' + day + 'T' + hour + ':' + minute;
document.getElementById("meetingtime").value = currentDateTime;
}
</script>
</body>
</html>
The JavaScript functions allow you to retrieve the selected datetime value and set the current date and time programmatically −
Meeting Scheduler Select Meeting Time: [DateTime Picker Field] [Show Selected Time] [Set Current Time] [Output area showing selected time or current time]
Browser Compatibility
Following table shows the browser support for the datetime-local input type −
| Browser | Support | Notes |
|---|---|---|
| Chrome | Yes (20+) | Full support with native picker |
| Firefox | Yes (57+) | Added support in later versions |
| Safari | Yes (14.1+) | Native picker on macOS/iOS |
| Edge | Yes (12+) | Full support |
| Internet Explorer | No | Falls back to text input |
Note − In browsers that don't support datetime-local, the input falls back to a regular text input. Consider using a JavaScript date picker library for better cross-browser compatibility.
Common Attributes
Following are the commonly used attributes with datetime-local input −
value − Sets the default date and time in YYYY-MM-DDTHH:MM format
min − Specifies the earliest acceptable date and time
max − Specifies the latest acceptable date and time
step − Specifies the time intervals (in seconds)
required − Makes the field mandatory
disabled − Disables the input field
readonly − Makes the field read-only
Conclusion
The datetime-local input type provides an intuitive way for users to select date and time values through native browser controls. It offers built-in validation and formatting, making it ideal for scheduling applications, event registration forms, and any scenario requiring precise date-time input. Always consider fallback solutions for older browsers that may not support this input type.
29K+ Views
