Time And Date

Close

import React from 'react'
import { Date as FormattedDate } from '../../'

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

      <br />

      <FormattedDate
          size="sm"
          value="2012-08-03"
          {...props}
      />

      <br />

      <FormattedDate
          showDayOfWeek
          size="sm"
          value="2017-12-03"
          {...props}
      />

      <br />
      <br />

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

      <br />

      <FormattedDate
          value="2012-08-03"
          {...props}
      />

      <br />

      <FormattedDate
          showDayOfWeek
          value="2017-12-03"
          {...props}
      />
    </>
  )
}

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 '../../'

Close

import React from 'react'
import { Date as FormattedDate } from '../..'

const DateVariants = (props) => {
  return (
    <div>
      <FormattedDate
          showIcon
          size="sm"
          value="1995-12-25"
          {...props}
      />

      <br />
      <br />

      <FormattedDate
          value="1995-12-25"
          {...props}
      />

      <br />
      <br />

      <FormattedDate
          showIcon
          value="1995-12-25"
          {...props}
      />

      <br />
      <br />

      <FormattedDate
          showDayOfWeek
          value="1995-12-25"
          {...props}
      />

      <br />
      <br />

      <FormattedDate
          showDayOfWeek
          showIcon
          value="1995-12-25"
          {...props}
      />
    </div>
  )
}

export default DateVariants

Close

import React from 'react'
import { Date as FormattedDate } from '../..'

const DateAlignment = (props) => {
  return (
    <div>
      <FormattedDate
          dayOfWeek
          icon
          value="1995-12-25"
          {...props}
      />

      <br />

      <FormattedDate
          alignment="center"
          dayOfWeek
          icon
          value="2020-12-25"
          {...props}
      />

      <br />

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

export default DateAlignment

Close

import React from 'react'
import DateRangeInline from '../_date_range_inline'

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

export default DateRangeInlineDefault

Close

import React from 'react'
import { DateRangeStacked } from '../../'

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

export default DateRangeStackedDefault

Close

import React from 'react'
import DateStacked from '../_date_stacked'

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

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

      <br />

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

    </div>
  )
}

export default DateStackedDefault

Close

import React from 'react'
import DateStacked from '../_date_stacked'

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

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

      <br />

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

    </div>
  )
}

export default DateStackedNotCurrentYear

Close

import React from 'react'
import DateStacked from '../_date_stacked'

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

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

      <br />

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

    </div>
  )
}

export default DateStackedDefault

Close

import React from 'react'
import DateStacked from '../_date_stacked'

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

export default DateStackedSizes

Close

import React from 'react'
import DateStacked from '../_date_stacked'

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

      <br />

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

      <br />

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

      <br />

    </div>
  )
}

export default DateStackedBold

Close

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

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

    <br />

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

    <br />

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

    <br />

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

export default DateTimeDefault

Close

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

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

Close

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

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

Close

import React from 'react'

import DateTimeStacked from '../_date_time_stacked'

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

  </div>
)

export default DateTimeStackedDefault

Close

import React from 'react'
import { DateYearStacked } from '../../'

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

export default DateYearStackedDefault

Close

import React from 'react'
import Time from '../_time'

const TimeDefault = (props) => {
  return (
    <div>
      <Time
          date={new Date().getTime()}
          showTimezone={false}
          {...props}
      />
      <br />
      <Time
          date={new Date()}
          timeZone="America/New_York"
          {...props}
      />
      <br />
      <Time
          date={new Date().getTime()}
          showIcon
          showTimezone={false}
          {...props}
      />
      <br />
      <Time
          date={new Date()}
          showIcon
          timeZone="America/New_York"
          {...props}
      />
      <br />
      <br />
      <Time
          date={new Date()}
          showTimezone={false}
          size="md"
          {...props}
      />
      <br />
      <Time
          date={new Date()}
          size="md"
          timeZone="America/New_York"
          {...props}
      />
      <br />
      <Time
          date={new Date()}
          showIcon
          showTimezone={false}
          size="md"
          {...props}
      />
      <br />
      <Time
          date={new Date()}
          showIcon
          size="md"
          timeZone="America/New_York"
          {...props}
      />
    </div>
  )
}

export default TimeDefault

Close

import React, { Fragment } from 'react'
import Time from '../_time'

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

export default TimeSizes

Close

import React from 'react'
import Time from '../_time'

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

      <br />

      <Time
          date={new Date().getTime()}
          size="sm"
          {...props}
      />
    </div>
  )
}

export default TimeStamp

Close

import React from 'react'
import Time from '../_time'

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}
          {...props}
      />

      <br />

      <h4>{'Central'}</h4>
      <Time
          date={new Date()}
          timeZone={zones.central}
          {...props}
      />

      <br />

      <h4>{'Mountain'}</h4>
      <Time
          date={new Date()}
          timeZone={zones.mountain}
          {...props}
      />

      <br />

      <h4>{'West Coast'}</h4>
      <Time
          date={new Date()}
          timeZone={zones.west}
          {...props}
      />

      <br />

      <h4>{'Tokyo, Japan'}</h4>
      <Time
          date={new Date()}
          timeZone={zones.asia}
          {...props}
      />

    </div>
  )
}

export default TimeTimezone

Close

import React from 'react'
import Time from '../_time'

const TimeAlign = (props) => {
  return (
    <div>
      <Time
          date={new Date()}
          size="md"
          {...props}
      />
      <br />
      <Time
          align="center"
          date={new Date()}
          size="md"
          {...props}
      />
      <br />
      <Time
          align="right"
          date={new Date()}
          size="md"
          {...props}
      />
    </div>
  )
}

export default TimeAlign

Close

import React from 'react'
import { TimeRangeInline } from '../../'

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

export default TimeRangeInlineDefault

Close

import React from 'react'
import TimeStacked from '../_time_stacked'

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

export default TimeStackedDefault

Close

import React from 'react'
import Timestamp from '../_timestamp'

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
          align="left"
          showDate={false}
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={futureDate}
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={pastDate}
          {...props}
      />
    </div>
  )
}

export default TimestampDefault

Close

import React from 'react'
import Timestamp from '../_timestamp'

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}
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={futureDate}
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          timestamp={pastDate}
          {...props}
      />

      <br />
      <br />

      <Timestamp
          align="center"
          showDate={false}
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="center"
          showDate
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="center"
          showDate
          timestamp={futureDate}
          {...props}
      />

      <br />

      <Timestamp
          align="center"
          showDate
          timestamp={pastDate}
          {...props}
      />

      <br />
      <br />

      <Timestamp
          align="right"
          showDate={false}
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="right"
          showDate
          timestamp={todaysDate}
          {...props}
      />

      <br />

      <Timestamp
          align="right"
          showDate
          timestamp={futureDate}
          {...props}
      />

      <br />

      <Timestamp
          align="right"
          showDate
          timestamp={pastDate}
          {...props}
      />
    </div>
  )
}

export default TimestampAlign

Close

import React from 'react'
import Timestamp from '../_timestamp'

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
          align="left"
          showDate={false}
          showTimezone
          timestamp={todaysDate}
          timezone="America/New_York"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={todaysDate}
          timezone="America/New_York"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={futureDate}
          timezone="America/New_York"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={pastDate}
          timezone="America/New_York"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate={false}
          showTimezone
          timestamp={todaysDate}
          timezone="Asia/Hong_Kong"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={todaysDate}
          timezone="Asia/Hong_Kong"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={futureDate}
          timezone="Asia/Hong_Kong"
          {...props}
      />

      <br />

      <Timestamp
          align="left"
          showDate
          showTimezone
          timestamp={pastDate}
          timezone="Asia/Hong_Kong"
          {...props}
      />
    </div>
  )
}

export default TimestampTimezones

Close

import React from 'react'
import Timestamp from '../_timestamp'

const todaysDate = new Date()

const TimestampUpdated = (props) => {
  return (
    <div>
      <Timestamp
          showUser
          text="Maricris Nonato"
          timestamp={todaysDate}
          variant="updated"
          {...props}
      />

      <br />

      <Timestamp
          showUser={false}
          timestamp={todaysDate}
          variant="updated"
          {...props}
      />
    </div>
  )
}

export default TimestampUpdated

Close

import React from 'react'
import Timestamp from '../_timestamp'

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"
          {...props}
      />

      <br />

      <Timestamp
          showUser={false}
          timestamp={customDate}
          variant="elapsed"
          {...props}
      />

      <br />

      <Timestamp
          hideUpdated
          showUser={false}
          timestamp={customDate}
          variant="elapsed"
          {...props}
      />
    </div>
  )
}

export default TimestampElapsed

Close

import React from 'react'

import WeekdayStacked from '../_weekday_stacked'

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

export default WeekdayStackedDefault

Close

import React from 'react'

import WeekdayStacked from '../_weekday_stacked'

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

export default WeekdayStackedCompact

Close

import React from 'react'

import WeekdayStacked from '../_weekday_stacked'

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

export default WeekdayStackedVariant