This kit consist of large display and table display format. It includes and icon, and a time zone.
Use this anywhere needed to display a certain timestamp
import React from 'react' import Time from 'playbook-ui' const TimeDefault = (props) => { return ( <div> <Time date={new Date().getTime()} showTimezone={false} /> <br /> <Time date={new Date()} timeZone="America/New_York" /> <br /> <Time date={new Date().getTime()} showIcon showTimezone={false} /> <br /> <Time date={new Date()} showIcon timeZone="America/New_York" /> <br /> <br /> <Time date={new Date()} showTimezone={false} size="md" /> <br /> <Time date={new Date()} size="md" timeZone="America/New_York" /> <br /> <Time date={new Date()} showIcon showTimezone={false} size="md" /> <br /> <Time date={new Date()} showIcon size="md" timeZone="America/New_York" /> </div> ) } export default TimeDefault
Simply enter the timezone you would like to use and it will appear.
The list of supported timezones is exhaustive and we're most likely to only use timezones from the Americas so we've highlighted those in the examples.
However, if you need to support another timezone you should be able to Google a specific list, otherwise you can follow the string pattern and try entering a continent and a city.
Remember, this is just labeling the timezone, please verify the actual time for a specified timezone is rendering properly.
Format: <Continent>/<Large_City_Name>
Continent Options: America | Europe | Asia | Africa | Pacific | India | Atlantic | Australia
import React from 'react' import Time from 'playbook-ui' const TimeTimezone = (props) => { const zones = { east: 'America/New_York', central: 'America/Chicago', mountain: 'America/Denver', west: 'America/Los_Angeles', asia: 'Asia/Tokyo', } return ( <div> <h4>{'East Coast'}</h4> <Time date={new Date()} size="md" timeZone={zones.east} /> <br /> <h4>{'Central'}</h4> <Time date={new Date()} timeZone={zones.central} /> <br /> <h4>{'Mountain'}</h4> <Time date={new Date()} timeZone={zones.mountain} /> <br /> <h4>{'West Coast'}</h4> <Time date={new Date()} timeZone={zones.west} /> <br /> <h4>{'Tokyo, Japan'}</h4> <Time date={new Date()} timeZone={zones.asia} /> </div> ) } export default TimeTimezone
import React from 'react' import Time from 'playbook-ui' const TimeAlign = (props) => { return ( <div> <Time date={new Date()} size="md" /> <br /> <Time align="center" date={new Date()} size="md" /> <br /> <Time align="right" date={new Date()} size="md" /> </div> ) } export default TimeAlign
For alternative typography styles, you can pass a boolean prop called unstyled
to the Time
kit and wrap it in any of our typography kits (Title
, Body
, Caption
, etc.). This will allow the Time
kit to inherit any of our typography styles.
import React from 'react' import Time from 'playbook-ui' import Caption from 'playbook-ui' import Title from 'playbook-ui' const TimeUnstyled = (props) => { return ( <> <Caption size="xs" text="Basic unstyled example" /> <Time date={new Date()} showIcon showTimezone timeZone="America/New_York" unstyled /> <br /> <Caption size="xs" text="Example with wrapping typography kit" /> <Title size={1}> <Time date={new Date()} showIcon showTimezone timeZone="America/New_York" unstyled /> </Title> <br /> <Caption size="xs" text="Example with icon + subcaption" /> <Caption size="xs"> <Time date={new Date()} showIcon showTimezone timeZone="America/New_York" unstyled /> </Caption> <br /> </> ) } export default TimeUnstyled