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 Object
The HTML DOM Time Object represents the <time> element in the Document Object Model. This object provides properties and methods to interact with HTML time elements, allowing developers to access and manipulate datetime information programmatically.
The <time> element is used to represent a specific period in time, such as dates, times, or durations. It provides semantic meaning to temporal content and can be styled with CSS or manipulated with JavaScript.
Syntax
To create a Time object using JavaScript −
var timeObject = document.createElement("TIME");
To access an existing time element −
var timeElement = document.getElementById("timeId");
Properties
The Time object has the following property −
| Property | Description |
|---|---|
| dateTime | Sets or returns the value of the datetime attribute of a <time> element. This represents a machine-readable format of the time/date. |
Creating a Time Element
Following example demonstrates how to create a time element dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Creating Time Element</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<button onclick="createTimeElement()">Create Time Element</button>
<div id="container"></div>
<script>
function createTimeElement() {
var timeElement = document.createElement("TIME");
timeElement.dateTime = "2024-12-25T09:00:00";
timeElement.textContent = "Christmas Day, 9:00 AM";
timeElement.id = "christmas";
document.getElementById("container").appendChild(timeElement);
}
</script>
</body>
</html>
Clicking the button creates a new time element with both human-readable text and machine-readable datetime attribute −
Christmas Day, 9:00 AM (displayed as regular text)
DateTime Property
The dateTime property sets or returns the value of the datetime attribute. This attribute provides a machine-readable format that browsers and search engines can understand, even if the displayed text is in a different format.
Example
Following example shows how to access and modify the dateTime property −
<!DOCTYPE html>
<html>
<head>
<title>Time dateTime Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Event Schedule</h2>
<p>Meeting scheduled for: <time id="meetingTime" datetime="2024-01-15T14:30:00">January 15th, 2:30 PM</time></p>
<button onclick="getDateTime()">Get DateTime Value</button>
<button onclick="setDateTime()">Change DateTime</button>
<div id="result"></div>
<script>
function getDateTime() {
var timeElement = document.getElementById("meetingTime");
document.getElementById("result").innerHTML = "DateTime value: " + timeElement.dateTime;
}
function setDateTime() {
var timeElement = document.getElementById("meetingTime");
timeElement.dateTime = "2024-01-20T10:00:00";
timeElement.textContent = "January 20th, 10:00 AM";
document.getElementById("result").innerHTML = "DateTime updated to: " + timeElement.dateTime;
}
</script>
</body>
</html>
The first button displays the current datetime value, while the second button changes both the datetime attribute and displayed text −
Meeting scheduled for: January 15th, 2:30 PM DateTime value: 2024-01-15T14:30:00 (After clicking "Change DateTime": DateTime updated to: 2024-01-20T10:00:00)
Practical Example
Following example demonstrates a practical use case with an examination notification system −
<!DOCTYPE html>
<html>
<head>
<title>Examination Schedule</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div style="border: 2px solid #ddd; padding: 20px; border-radius: 8px; text-align: center;">
<h3>Examination Notification</h3>
<p><strong>Upcoming Exam: Final Assessment</strong></p>
<time id="examTime" datetime="2024-06-15T09:00:00">June 15, 2024 at 9:00 AM</time>
<br><br>
<button onclick="getExamDetails()">Get Exam Details</button>
<button onclick="postponeExam()">Postpone Exam</button>
<div id="examInfo" style="margin-top: 15px; font-weight: bold;"></div>
</div>
<script>
function getExamDetails() {
var examTimeElement = document.getElementById("examTime");
var examDate = new Date(examTimeElement.dateTime);
document.getElementById("examInfo").innerHTML =
"Exam Date: " + examTimeElement.dateTime + "<br>" +
"Formatted: " + examDate.toLocaleDateString() + " at " + examDate.toLocaleTimeString();
}
function postponeExam() {
var examTimeElement = document.getElementById("examTime");
examTimeElement.dateTime = "2024-06-22T09:00:00";
examTimeElement.textContent = "June 22, 2024 at 9:00 AM";
document.getElementById("examInfo").innerHTML =
"<span style='color: red;'>Exam postponed to: " + examTimeElement.dateTime + "</span>";
}
</script>
</body>
</html>
This example shows both reading the datetime value and updating it dynamically. The datetime attribute provides a standardized format while the displayed text can be user-friendly −
Upcoming Exam: Final Assessment June 15, 2024 at 9:00 AM (After clicking "Get Exam Details"): Exam Date: 2024-06-15T09:00:00 Formatted: 6/15/2024 at 9:00:00 AM (After clicking "Postpone Exam"): Exam postponed to: 2024-06-22T09:00:00
DateTime Format
The datetime attribute accepts various formats −
Date only −
2024-12-25Date and time −
2024-12-25T09:00:00Date and time with timezone −
2024-12-25T09:00:00ZDuration −
PT2H30M(2 hours 30 minutes)
Conclusion
The HTML DOM Time Object provides access to the <time> element through the dateTime property. This allows developers to programmatically read and modify temporal information while maintaining both machine-readable datetime attributes and human-friendly display text. The Time object is essential for creating dynamic scheduling systems and time-sensitive applications.
231 Views
