README
Stencil Date Time Component
Simple web component to display Date, Time and Time Zone built with Stencil.
About Stencil
Stencil is a compiler for building fast web apps using Web Components.
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
Stencil components are just Web Components, so they work in any major framework or with no framework at all.
Usage
Include the below scripts in the <head> of your webpage or app.
<!-- For modern browsers with JS modules support -->
<script src="https://unpkg.com/stencil-date-time-component/dist/stencil-date-time-component/stencil-date-time-component.esm.js" type="module"></script>
<!-- Fallback script for older browsers that do not support JS modules -->
<script src="https://unpkg.com/stencil-date-time-component/dist/stencil-date-time-component/stencil-date-time-component.js" nomodule></script>
Then add the date-time web component snippet in your preferred place.
<date-time time-zone="Asia/Calcutta" should-update="true" show-clock="true"></date-time>
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
should-update |
Should the time keep updating. | boolean |
false |
show-clock |
Should the clock be shown. | boolean |
false |
time-zone |
Timezone in which the date and time should be shown. | string |
Browser Timezone |
Browser Support
| Browser | Support |
|---|---|
| Chrome 60+ | Full native support |
| Firefox 63+ | Full native support |
| Safari 10.1+ | Full native support |
| Edge 79+ | Full native support |
| IE 11, Edge 16-18 | Support with bundled polyfills |
| IE 10-6 | Not Supported |