Date Time

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

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

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