github / relative-time-element

Web component extensions to the standard <time> element.

Home Page:https://github.github.io/relative-time-element/examples/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Is there something missing in installation/usage?

BurtHarris opened this issue · comments

Please forgive me; my client-side experience is way out of date. However, I do know server-side typescript, just not how it plays in the browser. Can someone offer appropriate advice?

I've used NPM to install the package, and created a simple index.htm:

<html>
<head>
    <script src="node_modules/@github/time-elements/dist/index.js"></script>
</head>
<body>
    <local-time datetime="2022-04-01T16:30:00Z">
        default time
    </local-time>
</body>
</html>

I don't see the UTC datetime attribute converted to local time. I must be missing something; perhaps the docs are too.

I'm running Microsoft Edge Version 94.0.992.31 (Official build) (64-bit)

Hey @BurtHarris; I don't know what's happening for you but I think it's unrelated to this component. I'd take a look at your browsers devtools to see if there are any error in the Web Console.

Your browser might not find this file on disk or you are missing the type="module" attribute on your script tag.

Thanks, @koddsson. I've added the type="module" attribute and verified the module is loaded (both in Edge and Chrome). The only error in the console is one saying it can't find favicon.ico.

How is the browser supposed to know to use the module for the tag?

Do I need a polyfill? (The readme text under Browser Support is a bit ambiguous, but I think I'm using up-to-date modern browser)

OK, I tried using the HTML file in the example directory. I see it updating the dates, but the PAST Date formats as "Local date: Wed Dec 31, 1969".

I guess that's right given I'm in Pacific time, but initially I thought it should read Jan 1st, 1970.

With the example, I'll be able to figure out the problem with my original example from here, and I'll open a separate issue with more questions on usage.