Clock
Clock shows the current date and time, and optional AOS and LOS timers. It will typically be positioned on the Global Status Bar.
Guidelines
Web Components Usage
1. Installation
Install the Astro UXDS Clock package via Command Line (Preferred Method)
npm i --save @astrouxds/rux-clock
You may use Yarn, NPM, or your Node package manager of choice. The --save
flag adds this component as a dependency in your package.json
file.
Astro UXDS Component Library source to your project.
Alternatively, download theVia CLI:
git clone https://github.com/RocketCommunicationsInc/astro-components.git
Or, download the Astro UXDS Components as a .zip
2. Import the Astro Clock Web Component
This example assumes you're using the NPM package in node_modules
. Otherwise, import the component using the path to the Astro Components directory in your project.
import { RuxClock } from '@astrouxds/rux-clock/rux-clock.js'
3. Render the Astro Clock Web Component
Apply properties as attributes of the Astro Clock custom element:
<rux-clock timezone="Pacific/Guam" hideTimezone hideDate small></rux-clock>
Define AOS and LOS with valid Unix Time Stamp or ISO 8601 Datetime String and apply via aos
and los
attributes on the component:
<rux-clock aos="1557503698781" los="2019-05-10T16:21:12.000Z" small></rux-clock>
Properties
Property | Type | Default | Required | Description |
---|---|---|---|---|
aos |
String | — | No | When supplied with a valid date string or value displays a timestamp labeled "AOS" next to the standard clock. |
los |
String | — | No | When supplied with a valid date string or value, displays a timestamp labeled "LOS" next to the standard clock. |
timezone |
String | 'UTC' |
No | Accepts the IANA timezone string format such as 'America/Los_Angeles' or any single-character designation for a military timezones ('A' through 'Z' , excluding 'J' ), both case-insensitive. If no value for timezone is provided, the clock will use 'UTC' . See toLocaleString() on MDN for more details. |
hideTimezone |
Boolean | false |
No | Hides the timezone in the main 24-hour clock. Timezone does not display on AOS/LOS. |
hideDate |
Boolean | false |
No | Hides the day of the year. |
small |
Boolean | false |
No | Applies a smaller clock style. Previously compact
|
Revision History
4.1
- Added moment.js for date/time calculations, fixing Day of Year count error at EOD
- Added the 24 military timezone designations
4.0
- Renamed
compact
property tosmall
- Swapped kebab-cased
hide-timezone
andhide-date
attributes for standard camelCasehideTimezone
andhideDate
- Fixed duplicated
aria-labelledby
value when using AOS and/or LOS. - Removed
locale
property. All time displays assumeus-EN
locale. - Replaced Polymer 3 implementation with LitElement for improved speed and interoperability with JS Frameworks as well as simpler template declaration now available in vanilla JavaScript.