wc-likes web-component demo

Now time is 

<time is="wc-time"></time>

use lang= example

by default use browser navigator.language

1 febrary lang=ru 🇷🇺

13 мая lang=en 🏴󠁧󠁢󠁥󠁮󠁧󠁿 

<time is="wc-time" lang="ru" datetime="2023-02-01">1 febrary 2023</time>
current year in wc-time hides by default.See 2020 year for example

1 февраля 2020 lang=en 🏴󠁧󠁢󠁥󠁮󠁧󠁿

customize data-view-format

Customize data-view-format for change directly render text behavior in time tag. By default wc-time use date,time

<time is="wc-time" data-view-format="date" datetime="2022-02-01"></time>

data-view-format="time"

data-view-format="date"

data-view-format="ago"

data-view-format="time,ago"

customize data-dialog-format

Customize data-dialog-format for change render behavior in dialog in time tag. By default wc-time use date,time,ago

data-dialog-format="time"

data-dialog-format="date"

data-dialog-format="ago"

data-dialog-format="time,ago"

use data-show-dialog="0" for disable dialog

<time is="wc-time" data-show-dialog="0" data-view-format="date" datetime="2022-02-01"></time>

customize date and time Intl.DateTimeFormat format options

See default options definitions here Intl.DateTimeFormat()

const defaultIntDateOptions = this.defaultIntDateOptions = {
    timeZone: this.getAttribute('data-format-timeZone') || Intl.DateTimeFormat().resolvedOptions().timeZone,
    hour12: this.getAttribute('data-format-hour12') !== null || false,
    weekday: this.getAttribute('data-format-weekday') || 'narrow',
    era: this.getAttribute('data-format-era') || 'narrow',
    year: this.getAttribute('data-format-year') || 'numeric',
    month: this.getAttribute('data-format-month') || 'long',
    day: this.getAttribute('data-format-day') || 'numeric',
    hour: this.getAttribute('data-format-hour') || '2-digit',
    minute: this.getAttribute('data-format-minute') || '2-digit',
    second: this.getAttribute('data-format-second') || '2-digit',
    timeZoneName: this.getAttribute('data-format-timeZoneName') || 'short',
};

data-format-month="numric"

data-format-year="2-digit"

customize date/time render format

data-format-date="era,day,month,weekday" 

<time is="wc-time" data-format-date="era,day,month,weekday" datetime="2012-05-22"></time>

data-format-time="minute,hour,second" 

<time is="wc-time" data-view-format="time" data-format-date="minute,hour,second" datetime="2012-05-22"></time>

Observable attributes bindings

Single Observable attribute in wc-time is datetime. Look how fast time flies into future. 

<time is="wc-time" id="timereact2" data-view-format="date,time,ago" data-format-date="era,day,month,weekday" data-format-time="minute,hour,second" data-view-format="date" datetime="2012-05-22"></time>
Javascript example for interactive time on this page 
document.addEventListener('DOMContentLoaded', e => {
    let now = Date.now();
    const timereact = document.getElementById('timereact');
    const timereact2 = document.getElementById('timereact2');
    setInterval(() => {
        now += 100001231;
        timereact.setAttribute('datetime', new Date(Date.now()).toISOString());
        timereact2.setAttribute('datetime', new Date(now).toISOString());
    }, 100)
})

Render wc-time text mode

By default wc-time use span for wrap text in tags, this helps customize web-component with CSS styles but you can set data-as-string="1" for time and componennt will render date as sting-

render render css tooltip in place of dialog set data-css-hint="1"

hover ->

and you can set data-date-hint="foo bar biz" for prepend hind to dialog\css tooltip

wc-time links