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 '../_time' const TimeDefault = (props) => { return ( <div> <Time date={new Date().getTime()} showTimezone={false} {...props} /> <br /> <Time date={new Date()} timeZone="America/New_York" {...props} /> <br /> <Time date={new Date().getTime()} showIcon showTimezone={false} {...props} /> <br /> <Time date={new Date()} showIcon timeZone="America/New_York" {...props} /> <br /> <br /> <Time date={new Date()} showTimezone={false} size="md" {...props} /> <br /> <Time date={new Date()} size="md" timeZone="America/New_York" {...props} /> <br /> <Time date={new Date()} showIcon showTimezone={false} size="md" {...props} /> <br /> <Time date={new Date()} showIcon size="md" timeZone="America/New_York" {...props} /> </div> ) } export default TimeDefault
import React, { Fragment } from 'react' import Time from '../_time' const TimeSizes = (props) => { return ( <Fragment> <Time date={new Date()} {...props} /> <br /> <Time date={new Date()} size="md" timeZone="America/New_York" {...props} /> </Fragment> ) } export default TimeSizes
import React from 'react' import Time from '../_time' const TimeStamp = (props) => { return ( <div> <Time date={new Date()} size="sm" {...props} /> <br /> <Time date={new Date().getTime()} size="sm" {...props} /> </div> ) } export default TimeStamp
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 '../_time' 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} {...props} /> <br /> <h4>{'Central'}</h4> <Time date={new Date()} timeZone={zones.central} {...props} /> <br /> <h4>{'Mountain'}</h4> <Time date={new Date()} timeZone={zones.mountain} {...props} /> <br /> <h4>{'West Coast'}</h4> <Time date={new Date()} timeZone={zones.west} {...props} /> <br /> <h4>{'Tokyo, Japan'}</h4> <Time date={new Date()} timeZone={zones.asia} {...props} /> </div> ) } export default TimeTimezone
import React from 'react' import Time from '../_time' const TimeAlign = (props) => { return ( <div> <Time date={new Date()} size="md" {...props} /> <br /> <Time align="center" date={new Date()} size="md" {...props} /> <br /> <Time align="right" date={new Date()} size="md" {...props} /> </div> ) } export default TimeAlign
Try to not use this as a small time stamp to display a status update.