Date Range Inline

Use to display a date range.

Summary

Default

import React from 'react'

import { DateRangeInline } from 'playbook-ui'

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

export default DateRangeInlineDefault

Show Current Year

By default, the Date Range Inline 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 { DateRangeInline } from 'playbook-ui'

const DateRangeInlineShowCurrentYear = (props) => {
  return (
    <div>
      <DateRangeInline
          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
          showCurrentYear
          size="xs"
          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
      />
      <DateRangeInline
          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
          showCurrentYear
          size="sm"
          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
      />
      <DateRangeInline
          align="center"
          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
          icon
          showCurrentYear
          size="xs"
          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
      />
      <DateRangeInline
          align="center"
          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
          icon
          showCurrentYear
          size="sm"
          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
      />
    </div>
  )
}

export default DateRangeInlineShowCurrentYear

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