Timestamp

This low profile kit displays time. Elapsed, current, future, or otherwise.

Default

import React from 'react'
import Timestamp from 'playbook-ui'

const todaysDate = new Date()
const futureYear = new Date().getFullYear() + 4
const pastYear = new Date().getFullYear() - 1
const month = new Date().getMonth()
const date = new Date().getDate()
const hours = new Date().getHours()
const minutes = new Date().getMinutes()
const futureDate = new Date(futureYear, month, date, hours, minutes)
const pastDate = new Date(pastYear, month, date, hours, minutes)

const TimestampDefault = (props) => {
  return (
    <div>
      <Timestamp
          align="left"
          showDate={false}
          timestamp={todaysDate}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={todaysDate}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={futureDate}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={pastDate}
      />
    </div>
  )
}

export default TimestampDefault

Alignments

import React from 'react'
import Timestamp from 'playbook-ui'

const todaysDate = new Date()
const futureYear = new Date().getFullYear() + 4
const pastYear = new Date().getFullYear() - 1
const month = new Date().getMonth()
const date = new Date().getDate()
const hours = new Date().getHours()
const minutes = new Date().getMinutes()
const futureDate = new Date(futureYear, month, date, hours, minutes)
const pastDate = new Date(pastYear, month, date, hours, minutes)

const TimestampAlign = (props) => {
  return (
    <div>
      <Timestamp
          align="left"
          showDate={false}
          timestamp={todaysDate}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={todaysDate}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={futureDate}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={pastDate}
      />

      <br />
      <br />

      <Timestamp
          align="center"
          showDate={false}
          timestamp={todaysDate}
      />

      <br />

      <Timestamp
          align="center"
          showDate
          timestamp={todaysDate}
      />

      <br />

      <Timestamp
          align="center"
          showDate
          timestamp={futureDate}
      />

      <br />

      <Timestamp
          align="center"
          showDate
          timestamp={pastDate}
      />

      <br />
      <br />

      <Timestamp
          align="right"
          showDate={false}
          timestamp={todaysDate}
      />

      <br />

      <Timestamp
          align="right"
          showDate
          timestamp={todaysDate}
      />

      <br />

      <Timestamp
          align="right"
          showDate
          timestamp={futureDate}
      />

      <br />

      <Timestamp
          align="right"
          showDate
          timestamp={pastDate}
      />
    </div>
  )
}

export default TimestampAlign

Timezones

import React from 'react'
import Timestamp from 'playbook-ui'

const todaysDate = new Date()
const futureYear = new Date().getFullYear() + 4
const pastYear = new Date().getFullYear() - 1
const month = new Date().getMonth()
const date = new Date().getDate()
const hours = new Date().getHours()
const minutes = new Date().getMinutes()
const futureDate = new Date(futureYear, month, date, hours, minutes)
const pastDate = new Date(pastYear, month, date, hours, minutes)

const TimestampTimezones = (props) => {
  return (
    <div>
      <Timestamp
          align="left"
          showDate={false}
          showTimezone
          timestamp={todaysDate}
          timezone="America/New_York"
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={todaysDate}
          timezone="America/New_York"
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={futureDate}
          timezone="America/New_York"
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={pastDate}
          timezone="America/New_York"
      />

      <br />

      <Timestamp
          align="left"
          showDate={false}
          showTimezone
          timestamp={todaysDate}
          timezone="Asia/Hong_Kong"
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={todaysDate}
          timezone="Asia/Hong_Kong"
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={futureDate}
          timezone="Asia/Hong_Kong"
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={pastDate}
          timezone="Asia/Hong_Kong"
      />
    </div>
  )
}

export default TimestampTimezones

Last Updated by

import React from 'react'
import Timestamp from 'playbook-ui'

const todaysDate = new Date()

const TimestampUpdated = (props) => {
  return (
    <div>
      <Timestamp
          showUser
          text="Maricris Nonato"
          timestamp={todaysDate}
          variant="updated"
      />

      <br />

      <Timestamp
          showUser={false}
          timestamp={todaysDate}
          variant="updated"
      />
    </div>
  )
}

export default TimestampUpdated

Time Ago

import React from 'react'
import Timestamp from 'playbook-ui'

const todaysDate = new Date()
const year = new Date().getFullYear()
const month = new Date().getMonth()
const date = new Date().getDate()
const hours = new Date().getHours() - 10
const minutes = new Date().getMinutes()
const customDate = new Date(year, month, date, hours, minutes)

const TimestampElapsed = (props) => {
  return (
    <div>
      <Timestamp
          showUser
          text="Maricris Nonato"
          timestamp={todaysDate}
          variant="elapsed"
      />

      <br />

      <Timestamp
          showUser={false}
          timestamp={customDate}
          variant="elapsed"
      />

      <br />

      <Timestamp
          hideUpdated
          showUser={false}
          timestamp={customDate}
          variant="elapsed"
      />
    </div>
  )
}

export default TimestampElapsed

Unstyled

For alternative typography styles, you can pass a boolean prop called unstyled to the Timestamp kit and wrap it in any of our typography kits (Title, Body, etc.). This will allow the Timestamp kit to inherit any of our typography styles.

import React from 'react'
import { Caption, Timestamp, Title } from 'playbook-ui'

const TimestampUnstyled = (props) => {
  return (
    <>
      <Caption size="xs"
          text="Basic unstyled example"
      />
      <Timestamp
          align="left"
          showDate
          timestamp={new Date()}
          unstyled
      />

      <br />

      <Caption size="xs"
          text="Example with wrapping typography kit"
      />
      <Title size={1}>
        <Timestamp
            align="left"
            showDate
            timestamp={new Date()}
            unstyled
        />
      </Title>
    </>
  )
}

export default TimestampUnstyled

Things To Avoid

Leave the text style as is. Don’t use timestamps to display important or sensitive time information.

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat