Month

Customize UI

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

Month component displays specific date with month 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: '1 1 calc(100% / 3 - 4px)',
    color: 'black',
    lineHeight: '50px',
    textAlign: 'center',
    padding: '0',
    border: '2px dashed pink',
    margin: '2px',
  }
  const CustomComponent = ({
    onDateSet,
    date,
    isDisabled,
    isSameMonth,
    isSelected,
    name,
    isHighlighted,
  }) => {
    const handleClick = () => {
      console.log('date set', date)
      onDateSet(date)
    }
    return (
      <div onClick={handleClick} style={style}>
        {name.abbreviated}
      </div>
    )
  }
  return (
    <Datepicker
      onDateSet={date => {
        console.log('date set', date)
      }}
      minPrecision="month"
      renderMonthAs={CustomComponent}
      title="Demo datepicker"
    />
  )
}

() => {
  const style = {
    boxSizing: 'border-box',
    flex: '1 1 calc(100% / 3 - 4px)',
    color: 'black',
    lineHeight: '50px',
    textAlign: 'center',
    padding: '0',
    border: '2px dashed pink',
    margin: '2px',
  }
  const CustomComponent = ({
    onDateSet,
    date,
    isDisabled,
    isSameMonth,
    isSelected,
    name,
    isHighlighted,
  }) => {
    const handleClick = () => {
      console.log('date set', date)
      onDateSet(date)
    }
    return (
      <div onClick={handleClick} style={style}>
        {name.abbreviated}
      </div>
    )
  }
  return (
    <Datepicker
      onDateSet={date => {
        console.log('date set', date)
      }}
      minPrecision="month"
      renderMonthAs={CustomComponent}
      title="Demo datepicker"
    />
  )
}

Props

isDisabled

bool

required

isHighlighted

bool

required

isSelected

bool

required

onDateSet

func

required

date

Class(Date)

required

isCurrent

bool

required

name

{ "wide": "string", "abbreviated": "string", "narrow": "string", "numeric": "number" }

required

Wrap with custom CSS class

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

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