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
Input type DateTime Value format with HTML
The datetime-local input type in HTML allows users to select both a date and time from a built-in browser picker. When the input field is clicked, a date-time picker popup appears. The value is stored in the format YYYY-MM-DDThh:mm, where T separates the date and time portions.
Value Format
The <input type="datetime-local"> element uses the following ISO 8601-based format −
YYYY-MM-DDThh:mm
For example, 2025-03-15T14:30 represents March 15, 2025 at 2:30 PM. You can use this format to set a default value with the value attribute, or to set minimum and maximum allowed dates with min and max.
Example: Basic DateTime Input
The following example creates a form with a student name field and a date-time picker for selecting an exam date and time ?
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML input datetime</title>
</head>
<body>
<form action="" method="get">
<p><b>Details:</b></p>
<label for="sname">Student Name</label><br>
<input type="text" name="sname" id="sname"><br><br>
<label for="examdt">Exam Date and Time</label><br>
<input type="datetime-local" name="datetime" id="examdt"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
This renders a form with a text input for the name and a date-time picker for selecting the exam schedule. The browser displays a calendar and time selector when the user clicks the datetime-local field.
Setting a Default Value and Range
You can set a default date-time value and restrict the selectable range using the value, min, and max attributes ?
Example
<!DOCTYPE html>
<html>
<body>
<label for="meeting">Schedule a meeting:</label><br>
<input type="datetime-local"
id="meeting"
name="meeting"
value="2025-06-15T09:00"
min="2025-01-01T00:00"
max="2025-12-31T23:59">
</body>
</html>
In this example, the input defaults to June 15, 2025 at 9:00 AM. Users can only select dates within the year 2025.
Conclusion
The <input type="datetime-local"> element provides a native date-time picker in HTML. Its value follows the YYYY-MM-DDThh:mm format, and you can use the value, min, and max attributes to set defaults and restrict the selectable range.
2K+ Views
