<time-formatted>
๐ Example: โtime-formattedโ (JS.info)
๐ Intl.DateTimeFormat (MDN)
๐พ replit
Custom Element Upgrade
code
// โญ๏ธ get/set attribute
// get: elem.attr(name)
// set: elem.attr(name, value)
Element.prototype.attr = function(name, value=undefined){
if(value !== undefined){ this.setAttribute(name, value) };
return this.getAttribute(name) || undefined;
};
// 1. define new element
class TimeFormatted extends HTMLElement {
/* ---------- life cycle callbacks ---------- */
// triggers when <time-formatted> element is added to page
// (or when HTML parser detects it)
connectedCallback() {
this.render();
}
// observed attributes
static get observedAttributes() { // (3)
return [
'datetime', 'year', 'month', 'day',
'hour', 'minute', 'second', 'time-zone-name'
];
}
attributeChangedCallback(name, oldValue, newValue) {
// re-render when attributes changed
this.render();
}
/* ---------- helper methods ---------- */
render() {
let date = new Date(this.attr('datetime') || Date.now());
// built-in Intl.DateTimeFormat formatter
let formatter = new Intl.DateTimeFormat("default", {
year : this.attr('year'),
month : this.attr('month'),
day : this.attr('day'),
hour : this.attr('hour'),
minute: this.attr('minute'),
second: this.attr('second'),
timeZoneName: this.attr('time-zone-name'),
});
// show a nicely formatted time.
// โญ๏ธ ๆณจๆ๏ผ้่ฃก่จญๅฎ็ๆฑ่ฅฟๅฑฌๆผ light DOMโ๏ธ
this.innerHTML = formatter.format(date);
}
}
// 2. register new element
customElements.define("time-formatted", TimeFormatted);
// change attribute 'datetime' per second.
setInterval(
() => elem.attr('datetime', new Date()),
1000
);
Last updated
Was this helpful?