Year | React Calendar Toolkit

Customize UI

Day Header Input ModalWrapper Month PopoverWrapper Selector WeekDays Year Props Wrap with custom CSS class

Year component displays specific date with year precision. onDateSet callback prop allows to set provided Date object as selected in Datepicker. Replace it with custom component.

() => {
  const style = {
    boxSizing: 'border-box',
    flex: '0 1 calc(100% / 5 - 4px)',
    color: 'black',
    textAlign: 'center',
    padding: '0',
    border: '2px dashed pink',
    margin: '6px 2px',
    height: '36px',
    lineHeight: '36px',
  }
  const CustomComponent = ({
    isHighlighted,
    onDateSet,
    date,
    isSelected,
    isSameYear,
    name,
  }) => {
    const handleClick = () => {
      console.log('date set', date)
      onDateSet(date)
    }
    return (
      <div onClick={handleClick} style={style}>
        {name.numeric}
      </div>
    )
  }
  return (
    <Datepicker
      onDateSet={date => {
        console.log('date set', date)
      }}
      renderYearAs={CustomComponent}
      minPrecision="year"
      startDate={new Date(1999, 0, 1)}
      endDate={new Date(2020, 1, 25)}
      title="Demo datepicker"
    />
  )
}

() => {
  const style = {
    boxSizing: 'border-box',
    flex: '0 1 calc(100% / 5 - 4px)',
    color: 'black',
    textAlign: 'center',
    padding: '0',
    border: '2px dashed pink',
    margin: '6px 2px',
    height: '36px',
    lineHeight: '36px',
  }
  const CustomComponent = ({
    isHighlighted,
    onDateSet,
    date,
    isSelected,
    isSameYear,
    name,
  }) => {
    const handleClick = () => {
      console.log('date set', date)
      onDateSet(date)
    }
    return (
      <div onClick={handleClick} style={style}>
        {name.numeric}
      </div>
    )
  }
  return (
    <Datepicker
      onDateSet={date => {
        console.log('date set', date)
      }}
      renderYearAs={CustomComponent}
      minPrecision="year"
      startDate={new Date(1999, 0, 1)}
      endDate={new Date(2020, 1, 25)}
      title="Demo datepicker"
    />
  )
}

Props

isSelected

bool

required

isHighlighted

bool

required

onDateSet

func

required

date

Class(Date)

required

isCurrent

bool

required

name

{ "numeric": "number" }

required

Wrap with custom CSS class

You can override CSS classname of Day Calendar element, see yearCalendarClassName prop.

<Datepicker
  onDateSet={date => {console.log('date set', date);}}
  minPrecision="day"
  monthCalendarClassName="yearCalendarClassName"
  title="Demo datepicker" />