Skip to content

Commit 51caa17

Browse files
estellewbamberg
andauthored
New page: dateTime property (#36987)
* New page: dateTime property * New page: dateTime property * add intro to example * add intro to example * remove extra character * updates per review --------- Co-authored-by: wbamberg <[email protected]>
1 parent ca0ac39 commit 51caa17

File tree

2 files changed

+75
-3
lines changed
  • files/en-us/web/api

2 files changed

+75
-3
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
title: "HTMLModElement: dateTime property"
3+
short-title: dateTime
4+
slug: Web/API/HTMLModElement/dateTime
5+
page-type: web-api-instance-property
6+
browser-compat: api.HTMLModElement.dateTime
7+
---
8+
9+
{{ APIRef("HTML DOM") }}
10+
11+
The **`dateTime`** property of the {{domxref("HTMLModElement")}} interface is a string containing a machine-readable date with an optional time value. It reflects the [`datetime`](/en-US/docs/Web/HTML/Element/time#datetime) HTML attribute of the {{HTMLElement("del")}} and {{HTMLElement("ins")}} elements.
12+
13+
## Value
14+
15+
A string. For valid string formats, see the [`datetime` valid values](/en-US/docs/Web/HTML/Element/time#valid_datetime_values).
16+
17+
## Examples
18+
19+
Given the following HTML:
20+
21+
```html
22+
<p>The paragraph <del datetime="2021-11-01">has been</del> changed</p>
23+
```
24+
25+
We can get the value of the `dateTime` attribute of the `<del>` element:
26+
27+
```js
28+
const deletedText = document.querySelector("del");
29+
console.log(deletedText.dateTime); // "2021-11-01"
30+
```
31+
32+
We can also set the `dateTime` property. Here, we create an `<ins>` element, then set the `dateTime` property of the `<ins>` element to the current date in `YYYY-MM-DD` format then insert it after the deleted text:
33+
34+
```js
35+
const insertedText = document.createElement("ins");
36+
const now = new Date();
37+
insertedText.dateTime = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
38+
insertedText.appendChild(document.createTextNode("was"));
39+
deletedText.insertAdjacentElement("afterend", insertedText);
40+
```
41+
42+
If our script ran on January 9, 2025, our HTML would be as follows:
43+
44+
```html
45+
<p>
46+
The paragraph <del datetime="2021-11-01">has been</del
47+
><ins datetime="2025-1-9">was</ins> changed
48+
</p>
49+
```
50+
51+
## Specifications
52+
53+
{{Specifications}}
54+
55+
## Browser compatibility
56+
57+
{{Compat}}
58+
59+
## See also
60+
61+
- {{HTMLElement("del")}}
62+
- {{HTMLElement("ins")}}
63+
- {{domxref("HTMLModElement")}}
64+
- {{domxref("HTMLModElement.cite")}}
65+
- {{domxref("HTMLTimeElement.dateTime")}}
66+
- [Date strings](/en-US/docs/Web/HTML/Date_and_time_formats#date_strings)
67+
- [Local date and time strings](/en-US/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings)
68+
- {{jsxref("Date")}}
69+
- {{domxref("Element.insertAdjacentElement()")}}

files/en-us/web/api/htmltimeelement/datetime/index.md

+6-3
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ browser-compat: api.HTMLTimeElement.dateTime
99
{{ APIRef("HTML DOM") }}
1010

1111
The
12-
**`HTMLTimeElement.dateTime`**
13-
property is a string that reflects the [`datetime`](/en-US/docs/Web/HTML/Element/time#datetime) HTML attribute, containing a machine-readable form of the element's date and
12+
**`dateTime`**
13+
property of the {{domxref("HTMLTimeElement")}} interface is a string that reflects the [`datetime`](/en-US/docs/Web/HTML/Element/time#datetime) HTML attribute, containing a machine-readable form of the element's date and
1414
time value.
1515

1616
## Value
@@ -36,4 +36,7 @@ t.dateTime = "6w 5h 34m 5s";
3636

3737
## See also
3838

39-
- The {{domxref("HTMLTimeElement")}} interface it belongs to.
39+
- {{domxref("HTMLTimeElement")}}
40+
- {{domxref("HTMLModElement.dateTime")}}
41+
- [Date strings](/en-US/docs/Web/HTML/Date_and_time_formats#date_strings)
42+
- [Local date and time strings](/en-US/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings)

0 commit comments

Comments
 (0)