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 time input type in HTML?
The time input type in HTML allows users to select time values through a user-friendly interface. This input type creates a time picker control that displays hours and minutes, and optionally seconds, in a standardized format.
The time input is created using <input type="time"> and displays time in 24-hour format by default. Users can select hours (0-23), minutes (0-59), and optionally seconds (0-59) through an interactive time picker interface.
Syntax
Following is the basic syntax for the time input type −
<input type="time" id="timeInput" name="time">
The time value follows the format HH:MM for hours and minutes, or HH:MM:SS when seconds are included.
Basic Time Input
The simplest implementation creates a time picker without any default value. Users can click the time field to open the time selection interface.
Example
<!DOCTYPE html>
<html>
<head>
<title>Basic Time Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label for="meetingTime">Meeting Time:</label>
<input type="time" id="meetingTime" name="meetingTime">
<br><br>
<input type="submit" value="Schedule Meeting">
</form>
</body>
</html>
The output displays a time input field with a clock icon. Clicking it opens the time picker interface −
Meeting Time: [--:--] ? [Schedule Meeting] (Time picker opens when clicked)
Setting Default Time Value
You can set a default time value using the value attribute. This pre-populates the time field with the specified time.
Example
<!DOCTYPE html>
<html>
<head>
<title>Time Input with Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label for="appointmentTime">Appointment Time:</label>
<input type="time" id="appointmentTime" name="appointmentTime" value="14:30">
<br><br>
<label for="lunchTime">Lunch Break:</label>
<input type="time" id="lunchTime" name="lunchTime" value="12:00">
<br><br>
<input type="submit" value="Save Schedule">
</form>
</body>
</html>
The time fields display the default values "14:30" (2:30 PM) and "12:00" (12:00 PM) respectively −
Appointment Time: [14:30] ? Lunch Break: [12:00] ? [Save Schedule]
Time Range Constraints
You can limit the time selection using min and max attributes. This is useful for business hours, appointment slots, or other time-restricted scenarios.
Example
<!DOCTYPE html>
<html>
<head>
<title>Time Input with Range</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Doctor Appointment Form</h2>
<form>
<table style="border: 2px solid #333; border-collapse: collapse; width: 100%;">
<tr style="background-color: #f0f0f0;">
<th style="border: 1px solid #333; padding: 10px;">Doctor</th>
<th style="border: 1px solid #333; padding: 10px;">Specialty</th>
<th style="border: 1px solid #333; padding: 10px;">Available Time</th>
<th style="border: 1px solid #333; padding: 10px;">Action</th>
</tr>
<tr>
<td style="border: 1px solid #333; padding: 10px;">Dr. Smith</td>
<td style="border: 1px solid #333; padding: 10px;">Cardiologist</td>
<td style="border: 1px solid #333; padding: 10px;">
<input type="time" id="cardioTime" name="appointmentTime"
value="10:00" min="09:00" max="17:00">
</td>
<td style="border: 1px solid #333; padding: 10px;">
<input type="submit" value="Book Appointment">
</td>
</tr>
</table>
</form>
</body>
</html>
The time input restricts selection between 09:00 and 17:00. Selecting outside this range shows a validation error −
Doctor Appointment Form ?????????????????????????????????????????????????????????????? ? Doctor ? Specialty ? Available Time? Action ? ?????????????????????????????????????????????????????????????? ?Dr. Smith? Cardiologist? [10:00] ? ? [Book Appointment] ? ??????????????????????????????????????????????????????????????
Required Time Input
The required attribute makes time selection mandatory, preventing form submission without a valid time value.
Example
<!DOCTYPE html>
<html>
<head>
<title>Required Time Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<h3>Event Registration</h3>
<label for="eventTime">Event Start Time (Required):</label>
<input type="time" id="eventTime" name="eventTime" required>
<br><br>
<label for="optionalTime">Break Time (Optional):</label>
<input type="time" id="optionalTime" name="optionalTime">
<br><br>
<input type="submit" value="Register Event">
</form>
</body>
</html>
Attempting to submit without selecting the required event time displays a browser validation message.
Time Input with Datalist
Using the <datalist> element with the list attribute provides predefined time options while allowing custom input.
Example
<!DOCTYPE html>
<html>
<head>
<title>Time Input with Datalist</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<h3>Flight Booking System</h3>
<label for="flightTime">Preferred Departure Time:</label>
<input type="time" id="flightTime" name="flightTime" list="flightTimes">
<datalist id="flightTimes">
<option value="06:00">Early Morning</option>
<option value="09:30">Morning</option>
<option value="14:15">Afternoon</option>
<option value="18:45">Evening</option>
<option value="22:30">Night</option>
</datalist>
<br><br>
<input type="submit" value="Search Flights">
</form>
</body>
</html>
The time input shows suggested flight times in a dropdown while allowing users to enter custom times −
Flight Booking System
Preferred Departure Time: [--:--] ? ?
?? 06:00 Early Morning
?? 09:30 Morning
?? 14:15 Afternoon
?? 18:45 Evening
?? 22:30 Night
[Search Flights]
JavaScript Integration
You can access and manipulate time input values using JavaScript for dynamic behavior and validation.
Example
<!DOCTYPE html>
<html>
<head>
<title>Time Input with JavaScript</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label for="startTime">Start Time:</label>
<input type="time" id="startTime" name="startTime" value="09:00">
<br><br>
<label for="endTime">End Time:</label>
<input type="time" id="endTime" name="endTime" value="17:00">
<br><br>
<button type="button" onclick="calculateDuration()">Calculate Duration</button>
<p id="result"></p>
</form>
<script>
function calculateDuration() {
const startTime = document.getElementById('startTime').value;
const endTime = document.getElementById('endTime').value;
if (startTime && endTime) {
const start = new Date('2023-01-01 ' + startTime);
const end = new Date('2023-01-01 ' + endTime);
const diffMs = end - start;
const diffHours = diffMs / (1000 * 60 * 60);
document.getElementById('result').innerHTML =
`Duration: ${diffHours} hours`;
} else {
document.getElementById('result').innerHTML =
'Please select both start and end times.';
}
}
</script>
</body>
</html>
The example calculates the duration between start and end times when the button is clicked −
Start Time: [09:00] ? End Time: [17:00] ? [Calculate Duration] Duration: 8 hours
Time Input Attributes
The time input type supports several attributes for enhanced functionality −
| Attribute | Description | Example |
|---|---|---|
value |
Sets the default time value | value="14:30" |
min |
Specifies the earliest acceptable time | min="09:00" |
max |
Specifies the latest acceptable time | max="18:00" |
step |
Defines time intervals in seconds |
step="900" (15 minutes) |
required |
Makes time selection mandatory | required |
list |
Associates with a datalist for suggestions | list="timeOptions" |
Browser Compatibility
The time input type is supported by all modern browsers including Chrome, Firefox, Safari, and Edge. In unsupported browsers, it gracefully degrades to a standard text input field, allowing manual time entry.
Conclusion
The HTML time input type provides an intuitive way for users to select time values with built-in validation and formatting. It supports various attributes like min, max
23K+ Views
