diff --git a/files/en-us/web/api/htmlmodelement/datetime/index.md b/files/en-us/web/api/htmlmodelement/datetime/index.md new file mode 100644 index 000000000000000..14ef48acb0d85fa --- /dev/null +++ b/files/en-us/web/api/htmlmodelement/datetime/index.md @@ -0,0 +1,69 @@ +--- +title: "HTMLModElement: dateTime property" +short-title: dateTime +slug: Web/API/HTMLModElement/dateTime +page-type: web-api-instance-property +browser-compat: api.HTMLModElement.dateTime +--- + +{{ APIRef("HTML DOM") }} + +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. + +## Value + +A string. For valid string formats, see the [`datetime` valid values](/en-US/docs/Web/HTML/Element/time#valid_datetime_values). + +## Examples + +Given the following HTML: + +```html +

The paragraph has been changed

+``` + +We can get the value of the `dateTime` attribute of the `` element: + +```js +const deletedText = document.querySelector("del"); +console.log(deletedText.dateTime); // "2021-11-01" +``` + +We can also set the `dateTime` property. Here, we create an `` element, then set the `dateTime` property of the `` element to the current date in `YYYY-MM-DD` format then insert it after the deleted text: + +```js +const insertedText = document.createElement("ins"); +const now = new Date(); +insertedText.dateTime = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`; +insertedText.appendChild(document.createTextNode("was")); +deletedText.insertAdjacentElement("afterend", insertedText); +``` + +If our script ran on January 9, 2025, our HTML would be as follows: + +```html +

+ The paragraph has beenwas changed +

+``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("del")}} +- {{HTMLElement("ins")}} +- {{domxref("HTMLModElement")}} +- {{domxref("HTMLModElement.cite")}} +- {{domxref("HTMLTimeElement.dateTime")}} +- [Date strings](/en-US/docs/Web/HTML/Date_and_time_formats#date_strings) +- [Local date and time strings](/en-US/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings) +- {{jsxref("Date")}} +- {{domxref("Element.insertAdjacentElement()")}} diff --git a/files/en-us/web/api/htmltimeelement/datetime/index.md b/files/en-us/web/api/htmltimeelement/datetime/index.md index 7a2fe1f396a67e2..737066945d3dc24 100644 --- a/files/en-us/web/api/htmltimeelement/datetime/index.md +++ b/files/en-us/web/api/htmltimeelement/datetime/index.md @@ -9,8 +9,8 @@ browser-compat: api.HTMLTimeElement.dateTime {{ APIRef("HTML DOM") }} The -**`HTMLTimeElement.dateTime`** -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 +**`dateTime`** +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 time value. ## Value @@ -36,4 +36,7 @@ t.dateTime = "6w 5h 34m 5s"; ## See also -- The {{domxref("HTMLTimeElement")}} interface it belongs to. +- {{domxref("HTMLTimeElement")}} +- {{domxref("HTMLModElement.dateTime")}} +- [Date strings](/en-US/docs/Web/HTML/Date_and_time_formats#date_strings) +- [Local date and time strings](/en-US/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings)