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
HTML DOM Time dateTime Property
The HTML DOM Time dateTime property is used to get or set the datetime attribute of a <time> element. This attribute provides a machine-readable format for dates and times, making content more accessible to browsers, search engines, and assistive technologies.
Syntax
Following is the syntax for getting the dateTime property −
timeObject.dateTime
Following is the syntax for setting the dateTime property −
timeObject.dateTime = "YYYY-MM-DDThh:mm:ssTZD"
DateTime Format Components
The datetime value follows the ISO 8601 standard format. Here are the components of YYYY-MM-DDThh:mm:ssTZD −
| Component | Description |
|---|---|
| YYYY | 4-digit year (e.g., 2024) |
| MM | 2-digit month (01-12, e.g., 05 for May) |
| DD | 2-digit day (01-31, e.g., 23) |
| T | Separator between date and time |
| hh | 2-digit hour in 24-hour format (00-23) |
| mm | 2-digit minutes (00-59) |
| ss | 2-digit seconds (00-59) |
| TZD | Time Zone Designator (Z for UTC, +05:30 for IST, etc.) |
Getting the DateTime Property
Example
Following example demonstrates how to retrieve the dateTime property value −
<!DOCTYPE html>
<html>
<head>
<title>Getting Time DateTime Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Notification</h2>
<p>Conference starts at <time id="eventTime" datetime="2024-12-15T09:30:00Z">9:30 AM UTC</time></p>
<button onclick="getDateTime()">Get DateTime Value</button>
<p id="result"></p>
<script>
function getDateTime() {
var timeElement = document.getElementById("eventTime");
var dateTimeValue = timeElement.dateTime;
document.getElementById("result").textContent = "DateTime: " + dateTimeValue;
}
</script>
</body>
</html>
The output displays the machine-readable datetime value when the button is clicked −
Event Notification Conference starts at 9:30 AM UTC [Get DateTime Value] DateTime: 2024-12-15T09:30:00Z
Setting the DateTime Property
Example
Following example shows how to dynamically update the dateTime property −
<!DOCTYPE html>
<html>
<head>
<title>Setting Time DateTime Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Meeting Schedule</h2>
<p>Next meeting: <time id="meetingTime" datetime="2024-01-01T10:00:00Z">TBD</time></p>
<button onclick="setMorningMeeting()">Set Morning Meeting</button>
<button onclick="setAfternoonMeeting()">Set Afternoon Meeting</button>
<button onclick="showCurrentDateTime()">Show Current DateTime</button>
<p id="display"></p>
<script>
var timeElement = document.getElementById("meetingTime");
var display = document.getElementById("display");
function setMorningMeeting() {
timeElement.dateTime = "2024-03-20T09:00:00-05:00";
timeElement.textContent = "March 20, 2024 at 9:00 AM EST";
display.textContent = "Updated to morning meeting time.";
}
function setAfternoonMeeting() {
timeElement.dateTime = "2024-03-20T14:30:00-05:00";
timeElement.textContent = "March 20, 2024 at 2:30 PM EST";
display.textContent = "Updated to afternoon meeting time.";
}
function showCurrentDateTime() {
display.textContent = "Current dateTime: " + timeElement.dateTime;
}
</script>
</body>
</html>
The buttons update both the datetime attribute and the visible text content −
Meeting Schedule Next meeting: TBD [Set Morning Meeting] [Set Afternoon Meeting] [Show Current DateTime] (Clicking buttons updates the meeting time and displays current datetime value)
Comprehensive Example
Following example demonstrates both getting and setting the dateTime property with validation −
<!DOCTYPE html>
<html>
<head>
<title>Time DateTime Property Demo</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div style="max-width: 500px; margin: 0 auto; text-align: center;">
<h2>Examination Schedule</h2>
<p>Next exam: <time id="examTime" datetime="2024-05-15T14:30:00+05:30">May 15, 2024 at 2:30 PM IST</time></p>
<button onclick="getExamDateTime()" style="padding: 8px 15px; margin: 5px;">Get DateTime</button>
<button onclick="setNewExamTime()" style="padding: 8px 15px; margin: 5px;">Reschedule Exam</button>
<button onclick="setCurrentTime()" style="padding: 8px 15px; margin: 5px;">Set Current Time</button>
<div id="output" style="margin-top: 20px; padding: 15px; background: #f9f9f9; border-radius: 5px;"></div>
</div>
<script>
var examTimeElement = document.getElementById("examTime");
var output = document.getElementById("output");
function getExamDateTime() {
var dateTimeValue = examTimeElement.dateTime;
output.innerHTML = "<strong>Current DateTime:</strong> " + dateTimeValue;
}
function setNewExamTime() {
examTimeElement.dateTime = "2024-06-01T10:00:00+05:30";
examTimeElement.textContent = "June 1, 2024 at 10:00 AM IST";
output.innerHTML = "<strong>Exam rescheduled!</strong><br>New DateTime: " + examTimeElement.dateTime;
}
function setCurrentTime() {
var now = new Date();
var isoString = now.toISOString();
examTimeElement.dateTime = isoString;
examTimeElement.textContent = "Current time";
output.innerHTML = "<strong>Set to current time:</strong><br>" + isoString;
}
</script>
</body>
</html>
This example shows how the dateTime property can be dynamically updated and retrieved −
Examination Schedule Next exam: May 15, 2024 at 2:30 PM IST [Get DateTime] [Reschedule Exam] [Set Current Time] Current DateTime: 2024-05-15T14:30:00+05:30
Common DateTime Formats
Here are some common valid datetime formats you can use −
2024-12-25− Date only2024-12-25T15:30:00− Date and time (local)2024-12-25T15:30:00Z− Date and time in UTC2024-12-25T15:30:00+05:30− Date and time with timezone offset15:30:00− Time only
Conclusion
The HTML DOM Time dateTime property provides a standardized way to work with dates and times in web pages. It accepts ISO 8601 formatted strings and enables both programmatic access to temporal data and improved semantic markup for better accessibility and SEO.
134 Views
