Can HTML5 "data-*" custom attributes be targeted instead?

[jschrab]

trafficstars

In dom.ts, getDateAttribute(...) fetches the custom datetime attribute...

export function getDateAttribute(node: HTMLElement): string {
  return node.getAttribute('datetime');
}

But AFAIK, HTML5 would prefer the use of data- prefixed custom attributes. I am in a development environment that returns proxy objects instead of direct DOM references. The handler for this proxy is strict and does not pass back any value to the datetime attribute. If the target attribute were (optionally) data-datetime, that would work and be more HTML5-ish.

Perhaps...?

export function getDateAttribute(node: HTMLElement): string {
  return node.getAttribute('datetime') || node.dataset.datetime;
}

...for backwards compatibility? More validation is probably necessary for the above.

[jschrab]

Actually, being able to define what the name of the attribute should be would be even better:

export function getDateAttribute(node: HTMLElement): string {
  return node.getAttribute(this.dateTimeAttributeName);
}

...which would still work if the attribute was data-datetime.

[nicholaschiang]

When using timeago.js with React and Typescript, you're unable to specify the datetime attribute (but you are able to specify any custom data-* attributes, as suggested by @jschrab).

Current fix for me was to just use the timeago-react package instead.