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".

Rails
React

Default

Code Example

import React from 'react'
import DateTime from '../_date_time.jsx'

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

    <br />

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

    <br />

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

    <br />

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

export default DateTimeDefault

Alignment

Code Example

import React from 'react'
import DateTime from '../_date_time.jsx'

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

    <br />

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

    <br />

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

export default DateTimeAlign

Size

Code Example

import React from 'react'
import DateTime from '../_date_time.jsx'

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

    <br />

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

    <br />

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

    <br />

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

    <br />
    <br />

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

    <br />

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

    <br />

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

    <br />

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

export default DateTimeDefault