Date

Use to display the date. Year will not display if it is the current year.

DateTime defaults to the "America/New_York" timezone. Date ignores timezone.

Please note: this kit could potentially change the dates on you!

This is because the Javascript Date class does not have the concept of a date without time. If you pass a Ruby Date string to JavaScript, you will receive a date and a time which makes use of the timezone it infers from your browser based on your virtual geolocation or custom browser settings.

For example, if you pass a date like "7/2/2022" and your browser is on London time, Javascript will convert this to "7/2/2022 at 0:00 BST".

Subsequently, if you have not passed in a timezone to this kit, it will convert that time into US Eastern Time (default), making the resulting date and time "7/1/2022 at 19:00 EST". In this case the expected July 2 date will now be presented as July 1.

Summary

Uses Icons

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

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