Datepicker

Customize UI

Description

Datepicker is a component which allows user to see and pick from Calendar of provided dates. It contains:

Header with selected date and Datepicker title.
Selector, which allows switching between precisions and step between months.
Day, Month and Year calendars.

<Datepicker
  initialDate={new Date(2020, 1, 6)}
  startDate={new Date(2019, 11, 6)}
  endDate={new Date(2020, 1, 25)}
  today={new Date()}
  onDateSet={date => {
    console.log('date set', date)
  }}
  title="Demo datepicker"
/>

<Datepicker
  initialDate={new Date(2020, 1, 6)}
  startDate={new Date(2019, 11, 6)}
  endDate={new Date(2020, 1, 25)}
  today={new Date()}
  onDateSet={date => {
    console.log('date set', date)
  }}
  title="Demo datepicker"
/>

Props

initialDate

Class(Date)

new Date(2020, 0, 6)

today

Class(Date)

new Date(Date.now())

startDate

Class(Date)

new Date(2020, 0, 1)

endDate

Class(Date)

new Date(2020, 1, 25)

showHeader

bool

true

title

string

[Empty string]

minPrecision

'year' │ 'month' │ 'day'

'day'

onDateSet

func

required

wrapperClassName

string

[Empty string]

renderDayAs

elementType

Day

dayCalendarClassName

string

[Empty string]

renderMonthAs

elementType

Month

monthCalendarClassName

string

[Empty string]

renderYearAs

elementType

Year

yearCalendarClassName

string

[Empty string]

renderWeekdaysAs

elementType

Weekdays

renderHeaderAs

elementType

HeaderUI

renderSelectorAs

elementType

SelectorVisual

disableDate

func

({isWeekend, precision, date}) => false

highlightDate

func

({isWeekend, precision, date}) => false

highlightWeekends

bool

true

dateFnsLocale

{}

theme

{}

Customization

No header

<Datepicker
  showHeader={false}
  onDateSet={date => {
    console.log('date set', date)
  }}
/>

<Datepicker
  showHeader={false}
  onDateSet={date => {
    console.log('date set', date)
  }}
/>

Disable weekend highlight

<Datepicker
  highlightWeekends={false}
  onDateSet={date => {
    console.log('date set', date)
  }}
/>

<Datepicker
  highlightWeekends={false}
  onDateSet={date => {
    console.log('date set', date)
  }}
/>

With custom locale

<Datepicker
  dateFnsLocale={locale} // import locale from 'date-fns/esm/locale/ru';
  onDateSet={date => {
    console.log('date set', date)
  }}
/>

<Datepicker
  dateFnsLocale={locale} // import locale from 'date-fns/esm/locale/ru';
  onDateSet={date => {
    console.log('date set', date)
  }}
/>

You can provide any locale included in date-fns or create a custom one. First day of the week is defined inside locale object, see locale.options.weekStartsOn.

Disable and highlight dates

() => {
  // NB precision check, otherWise all months will be disabled in Month Calendar view
  const disableWeekends = ({ isWeekend, precision }) => {
    return precision === 'day' && isWeekend
  }
  const highlightDate = ({ date, precision }) => {
    return isSameDay(date, new Date(2020, 0, 7))
  }
  return (
    <Datepicker
      disableDate={disableWeekends}
      highlightDate={highlightDate}
      onDateSet={date => {
        console.log('date set', date)
      }}
    />
  )
}

() => {
  // NB precision check, otherWise all months will be disabled in Month Calendar view
  const disableWeekends = ({ isWeekend, precision }) => {
    return precision === 'day' && isWeekend
  }
  const highlightDate = ({ date, precision }) => {
    return isSameDay(date, new Date(2020, 0, 7))
  }
  return (
    <Datepicker
      disableDate={disableWeekends}
      highlightDate={highlightDate}
      onDateSet={date => {
        console.log('date set', date)
      }}
    />
  )
}

You can disable (custom style and non-clickable) or highlight (custom style) any rendered date.

Define minimal precision of `Calendar`

Setting minPrecision prop allows defining what kind of date user is able to select. E.g. if minPrecision === 'month'', user can select only between months and years. Read more.

<Datepicker
  minPrecision="month"
  onDateSet={date => {
    console.log('date set', date)
  }}
/>

<Datepicker
  minPrecision="month"
  onDateSet={date => {
    console.log('date set', date)
  }}
/>

Override CSS wrapper class name

You can override wrapping className of Datepicker with wrapperClassName prop.

<Datepicker wrapperClassName="foo" />