This package has been deprecated

Author message:

This package has been deprecated. Please use https://www.npmjs.com/package/@astrouxds/astro-web-components instead.

@astrouxds/rux-clock

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

• Astro UXDS: Clock

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.

Alternatively, download the Astro UXDS Component Library source to your project.

Via 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 to small
• Swapped kebab-cased hide-timezone and hide-date attributes for standard camelCase hideTimezone and hideDate
• Fixed duplicated aria-labelledby value when using AOS and/or LOS.
• Removed locale property. All time displays assume us-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.