Playbook Design System

Default

Use this anywhere needed to display a certain timestamp

Code Example

Close

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

Sizes

Code Example

Close

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

Timestamp Values

Code Example

Close

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

Handling Timezones

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>

Code Example

Close

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

Alignment

Code Example

Close

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

Time

Things To Avoid