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 del dateTime Property
The HTML DOM del dateTime property is associated with the HTML <del> element and specifies when text content was deleted from the document. This property corresponds to the datetime attribute and provides a machine-readable timestamp indicating the date and time of deletion.
Syntax
Following is the syntax for setting the dateTime property −
delObject.dateTime = "YYYY-MM-DDThh:mm:ssTZD"
Following is the syntax for getting the dateTime property −
var dateTimeValue = delObject.dateTime
Parameters
The dateTime property accepts a string value in the following format −
YYYY − Four-digit year (e.g., 2023)
MM − Two-digit month (01-12)
DD − Two-digit day (01-31)
T − Separator between date and time
hh − Two-digit hours (00-23)
mm − Two-digit minutes (00-59)
ss − Two-digit seconds (00-59)
TZD − Time zone designator (Z for UTC, or ±hh:mm)
Return Value
The dateTime property returns a string representing the date and time when the text was deleted, or an empty string if no datetime attribute is set.
Example − Setting dateTime Property
Following example demonstrates how to set the dateTime property of a <del> element −
<!DOCTYPE html>
<html>
<head>
<title>del dateTime Property Example</title>
<style>
#Sample { color: blue; font-weight: bold; }
del { background-color: #ffe6e6; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>del dateTime Property Example</h2>
<p><del id="Del1" datetime="2019-02-22T05:10:22Z">Some text has been deleted</del></p>
<p>Click the button to change the datetime attribute value of the deleted text above</p>
<button onclick="changeDate()">CHANGE DATETIME</button>
<p id="Sample"></p>
<script>
function changeDate() {
document.getElementById("Del1").dateTime = "2019-06-27T10:20:02Z";
document.getElementById("Sample").innerHTML = "The datetime attribute was changed to '2019-06-27T10:20:02Z'.";
}
</script>
</body>
</html>
The output shows deleted text with a light red background. Clicking the button updates the datetime property −
del dateTime Property Example Some text has been deleted (crossed out, light red background) Click the button to change the datetime attribute value of the deleted text above [CHANGE DATETIME] After clicking: The datetime attribute was changed to '2019-06-27T10:20:02Z'. (blue, bold)
Example − Getting dateTime Property
Following example shows how to retrieve the current dateTime value from a <del> element −
<!DOCTYPE html>
<html>
<head>
<title>Get del dateTime Property</title>
<style>
.result { background-color: #f0f8ff; padding: 10px; margin: 10px 0; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Get del dateTime Property</h2>
<p>Original text: <del id="delText" datetime="2023-12-15T14:30:45Z">This content was removed</del></p>
<button onclick="getDateTime()">GET DATETIME</button>
<div id="output" class="result"></div>
<script>
function getDateTime() {
var delElement = document.getElementById("delText");
var dateTimeValue = delElement.dateTime;
document.getElementById("output").innerHTML = "Current datetime value: " + dateTimeValue;
}
</script>
</body>
</html>
The output displays the current datetime value when the button is clicked −
Get del dateTime Property Original text: This content was removed (crossed out) [GET DATETIME] After clicking: Current datetime value: 2023-12-15T14:30:45Z (in light blue box)
Example − Multiple Del Elements
Following example demonstrates working with multiple <del> elements and their datetime properties −
<!DOCTYPE html>
<html>
<head>
<title>Multiple del Elements</title>
<style>
.info { background-color: #e8f4fd; padding: 8px; margin: 5px 0; }
del { background-color: #ffeaea; padding: 2px; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Document Revision History</h2>
<p><del id="del1" datetime="2023-01-15T09:00:00Z">Old company name</del> TutorialsPoint</p>
<p>Contact: <del id="del2" datetime="2023-02-20T14:30:00Z">old@email.com</del> support@tutorialspoint.com</p>
<button onclick="showAllDates()">SHOW ALL DELETION DATES</button>
<div id="results"></div>
<script>
function showAllDates() {
var del1 = document.getElementById("del1").dateTime;
var del2 = document.getElementById("del2").dateTime;
var output = "<div class='info'>Company name deleted: " + del1 + "</div>";
output += "<div class='info'>Email deleted: " + del2 + "</div>";
document.getElementById("results").innerHTML = output;
}
</script>
</body>
</html>
This example shows how to track multiple deletions with their respective timestamps −
Document Revision History Old company name (crossed out, light red) TutorialsPoint Contact: old@email.com (crossed out, light red) support@tutorialspoint.com [SHOW ALL DELETION DATES] After clicking: Company name deleted: 2023-01-15T09:00:00Z (light blue box) Email deleted: 2023-02-20T14:30:00Z (light blue box)
How It Works
The dateTime property provides a standardized way to record when content was deleted from a document. When you set this property, it updates the datetime attribute of the <del> element. This information can be useful for:
Version Control − Track when changes were made to documents
Audit Trails − Maintain records of content modifications
Accessibility − Screen readers can announce deletion timestamps
Legal Documentation − Provide evidence of when content was removed
Conclusion
The HTML DOM del dateTime property provides a standardized way to record and access deletion timestamps for content marked with the <del> element. It accepts ISO 8601 formatted datetime strings and is essential for maintaining document revision history and audit trails. The property can be both set and retrieved using JavaScript for dynamic content management.
177 Views
