Timestamp

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

Default

By default, the timestamp kit will display the date and time as shown here. If the date is NOT within the current year, the year will also be shown while dates in the current year will not show the year.

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
          timestamp={todaysDate}
      />

      <br />

      <Timestamp
          timestamp={futureDate}
      />

      <br />

      <Timestamp
          timestamp={pastDate}
      />
    </div>
  )
}

export default TimestampDefault

Hide Date

The showDate/show_date prop is set to true by default but can be set to false to hide the date.

import React from 'react'

import { Timestamp } from 'playbook-ui'

const TimestampShowDate = (props) => {
  return (
    <div>
      <Timestamp
          align="left"
          showDate={false}
          timestamp={new Date()}
      />
    </div>
  )
}

export default TimestampShowDate

Hide Time

The showTime/show_time prop is set to true by default but can be set to false to hide the time.

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 TimestampShowTime = (props) => {
  return (
    <div>
      <Timestamp
          align="left"
          showTime={false}
          timestamp={todaysDate}
      />
      <br />

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

      <br />

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

export default TimestampShowTime

Show Current Year

Use the showCurrentYear/show_current_year prop to show the year even if it is the current year. This is set to false by default.

import React from 'react'

import { Timestamp } from 'playbook-ui'

const TimestampShowCurrentYear = (props) => {
  return (
    <div>
      <Timestamp
          showCurrentYear
          timestamp={new Date()}
      />
      <br />
      <Timestamp
          showCurrentYear
          showTime={false}
          timestamp={new Date()}
      />

    </div>
  )
}

export default TimestampShowCurrentYear

Show Timezones

The showTimezone/show_timezone prop can be used to show the timezone as well. This is set to false by default. NOTE: This prop must be used in conjunction with the timezone prop to specify which timezone to display.

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
          showDate={false}
          showTimezone
          timestamp={todaysDate}
          timezone="America/New_York"
      />

      <br />

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

      <br />

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

      <br />

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

      <br />

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

      <br />

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

      <br />

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

      <br />

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

export default TimestampTimezones

Alignments

The align prop can be used to set alignment. This prop is set to 'left' by 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 TimestampAlign = (props) => {
  return (
    <div>
      <Timestamp
          align="left"
          showDate={false}
          timestamp={todaysDate}
      />

      <br />

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

      <br />

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

      <br />

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

      <br />
      <br />

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

      <br />

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

      <br />

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

      <br />

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

      <br />
      <br />

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

      <br />

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

      <br />

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

      <br />

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

export default TimestampAlign

Time Ago (Elapsed Variant)

Use variant elapsed to show time ago. This variant can be customized in several ways:

Use the optional showUser/show_user prop to show user as part of the text. When showing the user, pass in the user name using the text prop as shown. showUser/show_user is set to false by default.

Use the optional hideUpdated/hide_updated prop to hide the 'Last updated' text if needed.

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
          timestamp={customDate}
          variant="elapsed"
      />

      <br />

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

export default TimestampElapsed

Last Updated by (Updated Variant)

Use variant updated to show last updated at timestamp.

This variant can be customized using the optional showUser/show_user prop to show user as part of the text. When showing the user, pass in the user name using the text prop as shown.

showUser/show_user is set to false by default.

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
          timestamp={todaysDate}
          variant="updated"
      />
    </div>
  )
}

export default TimestampUpdated

Last Updated by (Updated Variant) - Show Current Year

The updated variant can also be used in conjunction with the showCurrentYear/show_current_year prop to show the year even if it is the current year.

import React from 'react'

import { Timestamp } from 'playbook-ui'

const todaysDate = new Date()

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

      <br />

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

export default TimestampUpdatedShowCurrentYear

Last Updated by (Updated Variant) - Hide Date

The updated variant can also be used in conjunction with the showDate/show_date prop. This prop is set to true by default but can be set to false to hide the date.

import React from 'react'

import { Timestamp } from 'playbook-ui'

const todaysDate = new Date()

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

      <br />

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

export default TimestampUpdatedShowDate

Last Updated by (Updated Variant) - Hide Time

The updated variant can also be used in conjunction with the showTime/show_time prop. This prop is set to true by default but can be set to false to hide the time. This can also be used in conjunction with showCurrentYear/show_current_year to show the year even if it is the current year.

import React from 'react'

import { Timestamp } from 'playbook-ui'

const todaysDate = new Date()

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

      <br />

      <Timestamp
          showTime={false}
          timestamp={todaysDate}
          variant="updated"
      />

       <br />

      <Timestamp
          showCurrentYear
          showTime={false}
          timestamp={todaysDate}
          variant="updated"
      />

    </div>
  )
}

export default TimestampUpdatedShowTime

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
          timestamp={new Date()}
          unstyled
      />

      <br />

      <Caption size="xs"
          text="Example with wrapping typography kit"
      />
      <Title size={1}>
        <Timestamp
            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

Github

Connect Chat