Selector

Customize UI

Day Header Input ModalWrapper Month PopoverWrapper Selector Props WeekDays Year

Selector component is rendered to the top of calendar. It allows changing calendar precision (setPrecision) and stepping months (incrementMonth, decrementMonth). Replace it with custom component.

() => {
  const style = {
    color: 'black',
    textAlign: 'center',
    padding: '16px 0',
    border: '2px dashed pink',
    margin: '2px',
  }
  const CustomComponent = () => {
    return <div style={style}>{`<Selector />`}</div>
  }
  return (
    <Datepicker
      onDateSet={date => {
        console.log('date set', date)
      }}
      minPrecision="month"
      renderSelectorAs={CustomComponent}
      title="Demo datepicker"
    />
  )
}

() => {
  const style = {
    color: 'black',
    textAlign: 'center',
    padding: '16px 0',
    border: '2px dashed pink',
    margin: '2px',
  }
  const CustomComponent = () => {
    return <div style={style}>{`<Selector />`}</div>
  }
  return (
    <Datepicker
      onDateSet={date => {
        console.log('date set', date)
      }}
      minPrecision="month"
      renderSelectorAs={CustomComponent}
      title="Demo datepicker"
    />
  )
}

Props

selectedTimestamp

number

required

todayTimestamp

number

required

visibleTimestamp

number

required

renderAs

elementType

required

startDate

Class(Date)

required

endDate

Class(Date)

required

precision

'year' │ 'month' │ 'day'

required