Playbook Design System

Date

Default

import React from 'react'

import { Date as FormattedDate, Caption, Title } from 'playbook-ui'

const DateDefault = (props) => {
  return (
    <>
      <FormattedDate
          size="sm"
          value={new Date()}
      />

      <br />

      <div style={{display: "flex", columnGap: 4}}>
        <FormattedDate
            size="sm"
            value={"2012-08-03"}
        />
        <Caption>{"(Hyphenated Date)"}</Caption>
      </div>

      <br />

      <FormattedDate
          size="sm"
          value={new Date('03 Aug 2012')}
      />

      <br />

      <FormattedDate
          showDayOfWeek
          size="sm"
          value={new Date('03 Dec 2017')}
      />

      <br />
      <br />

      <FormattedDate
          value={new Date()}
      />

      <br />

      <div style={{display: "flex", columnGap: 4}}>
        <FormattedDate
            value={"2012-08-03"}
        />
        <Title
            size={4}
            text={"(Hyphenated Date)"}
        />
      </div>

      <br />

      <FormattedDate
          value={new Date('03 Aug 2012')}
      />

      <br />

      <FormattedDate
          showDayOfWeek
          value={new Date('03 Dec 2017')}
      />
    </>
  )
}

export default DateDefault

// *Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from 'playbook-ui'

Variants

import React from 'react'

import { Date as FormattedDate } from 'playbook-ui'

const DateVariants = (props) => {
  return (
    <div>
      <FormattedDate
          showIcon
          size="sm"
          value={new Date('25 Dec 1995')}
      />

      <br />
      <br />

      <FormattedDate
          value={new Date('25 Dec 1995')}
      />

      <br />
      <br />

      <FormattedDate
          showIcon
          value={new Date('25 Dec 1995')}
      />

      <br />
      <br />

      <FormattedDate
          showDayOfWeek
          value={new Date('25 Dec 1995')}
      />

      <br />
      <br />

      <FormattedDate
          showDayOfWeek
          showIcon
          value={new Date('25 Dec 1995')}
      />
    </div>
  )
}

export default DateVariants

Alignment

import React from 'react'

import { Date as FormattedDate } from 'playbook-ui'

const DateAlignment = (props) => {
  return (
    <div>
      <FormattedDate
          dayOfWeek
          icon
          value={new Date('25 Dec 1995')}
      />

      <br />

      <FormattedDate
          alignment="center"
          dayOfWeek
          icon
          value={new Date('25 Dec 2020')}
      />

      <br />

      <FormattedDate
          alignment="right"
          value={new Date()}
      />
    </div>
  )
}

export default DateAlignment

Show Current Year

By default, the Date kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting showCurrentYear/show_current_year to true as shown here.

import React from 'react'

import { Date as FormattedDate } from 'playbook-ui'

const DateWithShowCurrentYear = (props) => {
  return (
    <>
      <FormattedDate
          showCurrentYear
          value={new Date()}
      />
    </>
  )
}

export default DateWithShowCurrentYear

Unstyled

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

import React from 'react'

import { Caption, Date as FormattedDate, Title } from 'playbook-ui'

const DateUnstyled = (props) => {
  return (
    <>
      <Caption
          size="xs"
          text="Basic unstyled example"
      />
      <FormattedDate
          unstyled
          value={new Date()}
      />

      <br />

      <Caption
          size="xs"
          text="Example with wrapping typography kit"
      />
      <Title
          size={1}
      >
        <FormattedDate
            unstyled
            value={new Date('25 Dec 1995')}
        />
      </Title>

      <br />

      <Caption
          size="xs"
          text="Example with icon + subcaption"
      />
      <Caption
          size="xs"
      >
        <FormattedDate
            showDayOfWeek
            showIcon
            unstyled
            value={new Date('25 Dec 1995')}
        />
      </Caption>
    </>
  )
}

export default DateUnstyled

Date Range Inline

Default

import React from 'react'

import { DateRangeInline } from 'playbook-ui'

const DateRangeInlineDefault = (props) => {
  return (
    <div>
      <DateRangeInline
          endDate={new Date('20 Mar 2015')}
          size="xs"
          startDate={new Date('18 Jun 2013')}
      />
      <DateRangeInline
          endDate={new Date('20 Mar 2015')}
          size="sm"
          startDate={new Date('18 Jun 2013')}
      />
      <br />
      <br />
      <DateRangeInline
          align="center"
          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
          icon
          size="xs"
          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
      />
      <DateRangeInline
          align="center"
          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
          icon
          size="sm"
          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
      />
      <br />
      <br />
      <DateRangeInline
          align="right"
          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
          icon
          size="xs"
          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
      />
      <DateRangeInline
          align="right"
          endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
          icon
          size="sm"
          startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
      />
    </div>
  )
}

export default DateRangeInlineDefault

Show Current Year

By default, the Date Range Inline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting showCurrentYear/show_current_year to true as shown here.

import React from 'react'

import { DateRangeInline } from 'playbook-ui'

const DateRangeInlineShowCurrentYear = (props) => {
  return (
    <div>
      <DateRangeInline
          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
          showCurrentYear
          size="xs"
          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
      />
      <DateRangeInline
          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
          showCurrentYear
          size="sm"
          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
      />
      <DateRangeInline
          align="center"
          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
          icon
          showCurrentYear
          size="xs"
          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
      />
      <DateRangeInline
          align="center"
          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
          icon
          showCurrentYear
          size="sm"
          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
      />
    </div>
  )
}

export default DateRangeInlineShowCurrentYear

Date Range Stacked

Default

import React from 'react'

import { DateRangeStacked } from 'playbook-ui'

const DateRangeStackedDefault = (props) => (
  <div>
    <DateRangeStacked
        endDate={new Date('20 Mar 2020')}
        startDate={new Date('18 Jun 2019')}
    />
  </div>
)

export default DateRangeStackedDefault

Date Stacked

Default

import React from 'react'

import { DateStacked } from 'playbook-ui'

const DateStackedDefault = (props) => {
  return (
    <div>

      <DateStacked
          align="left"
          date={new Date()}
          size="sm"
      />

      <br />

      <DateStacked
          date={new Date('20 Mar 2018')}
          size="md"
      />

    </div>
  )
}

export default DateStackedDefault

Show Current Year

By default, the Date Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting showCurrentYear/show_current_year to true as shown here.

import React from 'react'

import { DateStacked } from 'playbook-ui'

const DateStackedCurrentYear = (props) => {
  return (
    <div>

      <DateStacked
          date={new Date()}
          showCurrentYear
          size="sm"
      />

      <br />

      <DateStacked
          date={new Date()}
          showCurrentYear
          size="md"
      />
    </div>
  )
}

export default DateStackedCurrentYear

Day & Month Reverse

import React from 'react'

import { DateStacked } from 'playbook-ui'

const DateStackedDefault = (props) => {
  return (
    <div>

      <DateStacked
          align="left"
          date={new Date()}
          reverse
          size="sm"
      />

      <br />

      <DateStacked
          date={new Date()}
          reverse
          size="md"
      />

    </div>
  )
}

export default DateStackedDefault

Sizes

import React from 'react'

import { DateStacked } from 'playbook-ui'

const DateStackedSizes = (props) => {
  return (
    <div>
      <DateStacked
          date={new Date()}
          size="sm"
      />
      <br />
      <DateStacked
          date={new Date()}
          size="md"
      />
    </div>
  )
}

export default DateStackedSizes

Bold

import React from 'react'

import { DateStacked } from 'playbook-ui'

const DateStackedBold = (props) => {
  return (
    <div>
      <DateStacked
          align="left"
          bold
          date={new Date()}
      />

      <br />

      <DateStacked
          align="center"
          bold
          date={new Date('20 Mar 2018')}
      />

      <br />

      <DateStacked
          align="right"
          bold
          date={new Date()}
      />

      <br />

    </div>
  )
}

export default DateStackedBold

Date Time

Default

import React from 'react'

import { DateTime } from 'playbook-ui'

const DateTimeDefault = (props) => (
  <div>
    <DateTime
        datetime={new Date('2020-12-31 14:24:09')}
        showDayOfWeek
        showIcon
    />

    <br />

    <DateTime
        datetime={new Date()}
        showDayOfWeek
    />

    <br />

    <DateTime
        datetime={new Date()}
        showIcon
    />

    <br />

    <DateTime
        datetime={new Date('2020/12/31 14:24:09 -0500')}
        timeZone="Asia/Tokyo"
    />
  </div>
)

export default DateTimeDefault

Alignment

import React from 'react'

import { DateTime } from 'playbook-ui'

const DateTimeAlign = (props) => (
  <div>
    <DateTime
        datetime={new Date()}
        dayOfWeek
        icon
    />

    <br />

    <DateTime
        align="center"
        datetime={new Date()}
        dayOfWeek
        icon
    />

    <br />

    <DateTime
        align="right"
        datetime={new Date()}
        dayOfWeek
        icon
    />
  </div>
)

export default DateTimeAlign

Size

import React from 'react'

import { DateTime } from 'playbook-ui'

const DateTimeDefault = (props) => (
  <div>
    <DateTime
        datetime={new Date()}
        showDayOfWeek
        showIcon
        size="sm"
    />

    <br />

    <DateTime
        datetime={new Date()}
        showDayOfWeek
        size="sm"
    />

    <br />

    <DateTime
        datetime={new Date()}
        showIcon
        size="sm"
    />

    <br />

    <DateTime
        datetime={new Date()}
        size="sm"
    />

    <br />
    <br />

    <DateTime
        datetime={new Date()}
        showDayOfWeek
        showIcon
    />

    <br />

    <DateTime
        datetime={new Date()}
        showDayOfWeek
    />

    <br />

    <DateTime
        datetime={new Date()}
        showIcon
    />

    <br />

    <DateTime
        datetime={new Date()}
    />
  </div>
)

export default DateTimeDefault

Show Current Year

Pass in showCurrentYear to show this date's current year.

import React from 'react'

import { DateTime } from 'playbook-ui'

const DateTimeShowCurrentYear = (props) => (
  <div>
    <DateTime
        datetime={new Date()}
        showCurrentYear
    />
  </div>
)

export default DateTimeShowCurrentYear

Date Time Stacked

Default

import React from 'react'

import { DateTimeStacked } from 'playbook-ui'

const DateTimeStackedDefault = (props) => (
  <div>
    <DateTimeStacked
        datetime={new Date()}
    />
    <br />
    <DateTimeStacked
        datetime={new Date(2018, 2, 20)}
    />
    <br />
    <DateTimeStacked
        datetime={new Date()}
        timeZone="Asia/Tokyo"
    />
    <br />
    <DateTimeStacked
        datetime={new Date()}
        timeZone="America/Denver"
    />

  </div>
)

export default DateTimeStackedDefault

Show Current Year

By default, the Date Time Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting showCurrentYear/show_current_year to true as shown here.

import React from 'react'

import { DateTimeStacked } from 'playbook-ui'

const DateTimeStackedShowCurrentYear = (props) => (
  <div>
    <DateTimeStacked
        datetime={new Date()}
        showCurrentYear
    />
    <br />
    <DateTimeStacked
        datetime={new Date()}
        showCurrentYear
        timeZone="America/Denver"
    />
  </div>
);

export default DateTimeStackedShowCurrentYear;

Date Year Stacked

Default

Use this kits on table displays or column headers to display a single date format.

import React from 'react'

import { DateYearStacked } from 'playbook-ui'

const DateYearStackedDefault = (props) => {
  return (
    <div>
      <DateYearStacked
          date={new Date()}
      />
      <DateYearStacked
          align="center"
          date={new Date()}
      />
      <DateYearStacked
          align="right"
          date={new Date()}
      />
    </div>
  )
}

export default DateYearStackedDefault

Time

Default

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

Sizes

import React, { Fragment } from 'react'

import { Time } from 'playbook-ui'

const TimeSizes = (props) => {
  return (
    <Fragment>
      <Time
          date={new Date()}
      />
      <br />
      <Time
          date={new Date()}
          size="md"
          timeZone="America/New_York"
      />
    </Fragment>
  )
}

export default TimeSizes

Timestamp Values

import React from 'react'

import { Time } from 'playbook-ui'

const TimeStamp = (props) => {
  return (
    <div>
      <Time
          date={new Date()}
          size="sm"
      />

      <br />

      <Time
          date={new Date().getTime()}
          size="sm"
      />
    </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>

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

Alignment

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

Unstyled

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, Caption, 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

Time Range Inline

Default

import React from 'react'

import { TimeRangeInline } from 'playbook-ui'

const TimeRangeInlineDefault = (props) => (
  <div>
    <TimeRangeInline
        endTime="2012-08-02T17:49:29Z"
        size="xs"
        startTime="2012-08-02T15:49:29Z"
    />
    <br />
    <TimeRangeInline
        endTime="2012-08-02T17:49:29Z"
        size="sm"
        startTime="2012-08-02T15:49:29Z"
    />
    <br />
    <br />
    <TimeRangeInline
        alignment="center"
        endTime="2012-08-02T17:49:29Z"
        size="xs"
        startTime="2012-08-02T15:49:29Z"
        timezone="true"
    />
    <br />
    <TimeRangeInline
        alignment="center"
        endTime="2012-08-02T17:49:29Z"
        size="sm"
        startTime="2012-08-02T15:49:29Z"
        timezone="true"
    />
    <br />
    <br />
    <TimeRangeInline
        alignment="center"
        endTime="2012-08-02T17:49:29Z"
        icon="true"
        size="xs"
        startTime="2012-08-02T15:49:29Z"
    />
    <br />
    <TimeRangeInline
        alignment="center"
        endTime="2012-08-02T17:49:29Z"
        icon="true"
        size="sm"
        startTime="2012-08-02T15:49:29Z"
    />
    <br />
    <br />
    <TimeRangeInline
        alignment="right"
        endTime="2012-08-02T17:49:29Z"
        icon="true"
        size="xs"
        startTime="2012-08-02T15:49:29Z"
        timezone="true"
    />
    <br />
    <TimeRangeInline
        alignment="right"
        endTime="2012-08-02T17:49:29Z"
        icon="true"
        size="sm"
        startTime="2012-08-02T15:49:29Z"
        timezone="true"
    />
  </div>
)

export default TimeRangeInlineDefault

Time Stacked

Default

import React from 'react'

import { TimeStacked } from 'playbook-ui'

const TimeStackedDefault = (props) => {
  return (
    <div>
      <TimeStacked
          time={new Date()}
          timeZone="America/New_York"
      />
      <br />
      <TimeStacked
          align="center"
          time={new Date()}
          timeZone="America/New_York"
      />
      <br />
      <TimeStacked
          align="right"
          time={new Date()}
          timeZone="America/New_York"
      />
    </div>
  )
}

export default TimeStackedDefault

Timestamp

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

Weekday Stacked

Default

import React from 'react'

import { WeekdayStacked } from 'playbook-ui'

const WeekdayStackedDefault = (props) => (
  <div>
    <WeekdayStacked
        className="test"
    />
    <WeekdayStacked
        align="center"
    />
    <WeekdayStacked
        align="right"
    />
  </div>
)

export default WeekdayStackedDefault

Compact

import React from 'react'

import { WeekdayStacked } from 'playbook-ui'

const WeekdayStackedCompact = (props) => (
  <div>
    <WeekdayStacked
        compact
        variant="day_only"
    />
    <WeekdayStacked
        align="center"
        compact
        variant="month_day"
    />
    <WeekdayStacked
        align="right"
        compact
        variant="expanded"
    />
  </div>
)

export default WeekdayStackedCompact

Variant

import React from 'react'

import { WeekdayStacked } from 'playbook-ui'

const WeekdayStackedVariant = (props) => (
  <div>
    <WeekdayStacked
        variant="day_only"
    />
    <WeekdayStacked
        align="center"
        variant="month_day"
    />
    <WeekdayStacked
        align="right"
        variant="expanded"
    />
  </div>
)

export default WeekdayStackedVariant

Date And Time Text Patterns

Date

Date Range Inline

Date Range Stacked

Date Stacked

Date Time

Date Time Stacked

Date Year Stacked

Time

Time Range Inline

Time Stacked

Timestamp

Weekday Stacked

Contribute to Playbook

Power

Connect