Date Time

Date Time is a composite kit that leverages the Date and Time kits. The Date Time kit is affected by time zones and defaults to "America/New_York".

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

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