HTML DOM del dateTime Property

The HTML DOM del dateTime property associated with the HTML <del> element is used for telling the user when some text on the website was deleted. It tells the date and time of when the text was deleted.

Syntax

Following is the syntax for −

Setting the dateTime property −

delObject.dateTime = YYYY -MM-DDThh:mm:ssTZD

Here, YYYY=years , MM=months , DD=days, T=separator or a space, hh=hours , mm=minutes,ss=seconds, TZD=Time zone designator

Example

Let us look at an example for the del dateTime property −

<!DOCTYPE html>
<html>
<head>
<title>del dateTime property example</title>
<style>
   #Sample{color:blue};
</style>
</head>
<body>
<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 below button to change the datetime attribute value of the deleted text above</p>
<button onclick="changeDate()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeDate() {
      document.getElementById("Del1").dateTime = "2019-06-27T10:20:02Z";
      document.getElementById("Sample").innerHTML = "The datetime attribute attribute was changed to '2019-06-27T10:20:02Z'.";
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM del dateTime Property

On clicking the CHANGE button −

HTML DOM del dateTime Property

In the above example −

We have first created a <del> element inside the <p> element with id “Del1” and datetime attribute value “2019-02-22T05:10:22Z”.

<p><del id="Del1" datetime="2019-02-22T05:10:22Z">Some text has been deleted</del></p>

We have then created the button CHANGE that will execute the changeDate() method when clicked by the user −

<button onclick="changeDate()">CHANGE</button>

The changeDate() method gets the <del> element and sets it dateTime attribute value to “2019-06-27T10:20:02Z”. We then display this change in the paragraph with id “Sample” and sets its innerHTML property to the text we want to display. The text inside the paragraph “Sample” is displayed in blue color as it has the style corresponding to its id applied to it −

function changeDate() {
   document.getElementById("Del1").dateTime = "2019-06-27T10:20:02Z";
   document.getElementById("Sample").innerHTML = "The datetime attribute attribute was changed to '2019-06-27T10:20:02Z'.";
}