use-date-input - Build Your Own Date Picker

Calendar

The Calendar is the basic building block for all calendar controls. It supports

single or date ranges, via the configured reducers
any date framework, via the date adapter
theming
localisation, via the format method of the date adapter
a11y support

In the default implementation Calendar is used by the useDateInput and useDateRangeInput hooks but you can also use inline.
Alternatively you could use to compose your own date picker components or dialogs.

If you wrap your Calendar in a CalendarProvider it will use the state created by it, otherwise, it will internally rende the Calendar contents within a CalendarProvider. This optimization saves you having to wrap Calendars inside CalendarProvider, if you don't need to.

The render tree of Calendar

Calendar
|__ Root  
    |__ Header  
    |__ MonthGroup  
        |__ AnimatedMonthGroup  
            |__ AnimatedGroup  
                |__ Month  
                    |__ MonthHeader  
                        |__ WeekHeader  
                        |__ Week  
                            |__ DayOfWeek  
                            |__ Day

Single Date

By default the Calendar will select single dates.

2021

June

303112345

6789101112

13141516171819

20212223242526

27282930123

45678910

<Calendar adapter={dateAdapter} numOfVisibleMonths={1} />

<Calendar adapter={dateAdapter} numOfVisibleMonths={1} />

Date Range

Using the allowRange prop the Calendar will select date ranges.

2021

June

303112345

6789101112

13141516171819

20212223242526

27282930123

45678910

<Calendar
  adapter={dateAdapter}
  allowRange
  numOfColumns={1}
  numOfVisibleMonths={1}
/>

<Calendar
  adapter={dateAdapter}
  allowRange
  numOfColumns={1}
  numOfVisibleMonths={1}
/>

Setting Initial State

The basic component operates as un-controlled, although the reducer pattern enables you to control the final state.
This example shows the basic use-case of the initial state.

2020

February

2627282930311

2345678

9101112131415

16171819202122

23242526272829

1234567

March

1234567

891011121314

15161718192021

22232425262728

2930311234

567891011

April

2930311234

567891011

12131415161718

19202122232425

262728293012

3456789

May

262728293012

3456789

10111213141516

17181920212223

24252627282930

31123456

June

31123456

78910111213

14151617181920

21222324252627

2829301234

567891011

July

2829301234

567891011

12131415161718

19202122232425

2627282930311

2345678

August

2627282930311

2345678

9101112131415

16171819202122

23242526272829

303112345

September

303112345

6789101112

13141516171819

20212223242526

27282930123

45678910

October

27282930123

45678910

11121314151617

18192021222324

25262728293031

1234567

November

1234567

891011121314

15161718192021

22232425262728

293012345

6789101112

December

293012345

6789101112

13141516171819

20212223242526

272829303112

3456789

January

272829303112

3456789

10111213141516

17181920212223

24252627282930

31123456

() => {
  const handleChange = selectedDate => {
    console.log('changed selected date', selectedDate)
  }
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 2 : 4
  const numOfVisibleMonths = isSmallBreakpoint ? 2 : 12
  return (
    <Calendar
      adapter={dateAdapter}
      initialSelectedDate={createDate('2020-02-20')}
      initialVisibleFromMonth={createDate('2020-02-01')}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfVisibleMonths}
      onChange={handleChange}
    />
  )
}

() => {
  const handleChange = selectedDate => {
    console.log('changed selected date', selectedDate)
  }
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 2 : 4
  const numOfVisibleMonths = isSmallBreakpoint ? 2 : 12
  return (
    <Calendar
      adapter={dateAdapter}
      initialSelectedDate={createDate('2020-02-20')}
      initialVisibleFromMonth={createDate('2020-02-01')}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfVisibleMonths}
      onChange={handleChange}
    />
  )
}

Custom Day Renderers

Add your own renderers for Day, to render specific date states with your own styles, using the ccomponents prop.

2021

June

311234

7891011

1415161718

2122232425

28293012

56789

July

28293012

56789

1213141516

1920212223

2627282930

23456

August

2627282930

23456

910111213

1617181920

2324252627

3031123

September

3031123

678910

1314151617

2021222324

272829301

45678

October

272829301

45678

1112131415

1819202122

2526272829

12345

November

12345

89101112

1516171819

2223242526

2930123

678910

December

2930123

678910

1314151617

2021222324

2728293031

34567

January

2728293031

34567

1011121314

1718192021

2425262728

311234

February

311234

7891011

1415161718

2122232425

281234

7891011

March

281234

7891011

1415161718

2122232425

282930311

45678

April

282930311

45678

1112131415

1819202122

2526272829

23456

May

2526272829

23456

910111213

1617181920

2324252627

3031123

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 2 : 4
  const numOfVisibleMonths = isSmallBreakpoint ? 2 : 12
  /** Add your own renderer(s) for Days to show your required state */
  function JustWeekdaysRenderer(props) {
    const disableWeekendProps = isWeekend(props.day) && {
      disabled: true,
      day: undefined,
    }
    return <Day {...props} {...disableWeekendProps} />
  }
  const handleChange = selectedDate => {
    console.log('changed selected date', selectedDate)
  }
  return (
    <Calendar
      adapter={dateAdapter}
      allowRange
      components={{
        Day: JustWeekdaysRenderer,
      }}
      onChange={handleChange}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfVisibleMonths}
      weekOffset={1}
    />
  )
}

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 2 : 4
  const numOfVisibleMonths = isSmallBreakpoint ? 2 : 12
  /** Add your own renderer(s) for Days to show your required state */
  function JustWeekdaysRenderer(props) {
    const disableWeekendProps = isWeekend(props.day) && {
      disabled: true,
      day: undefined,
    }
    return <Day {...props} {...disableWeekendProps} />
  }
  const handleChange = selectedDate => {
    console.log('changed selected date', selectedDate)
  }
  return (
    <Calendar
      adapter={dateAdapter}
      allowRange
      components={{
        Day: JustWeekdaysRenderer,
      }}
      onChange={handleChange}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfVisibleMonths}
      weekOffset={1}
    />
  )
}

Block dates

Block out dates using a custom renderer and the isDayDisabled prop.

2021

June

31123456

78910111213

14151617181920

21222324252627

2829301234

567891011

July

2829301234

567891011

12131415161718

19202122232425

2627282930311

2345678

August

2627282930311

2345678

9101112131415

16171819202122

23242526272829

303112345

September

303112345

6789101112

13141516171819

20212223242526

27282930123

45678910

October

27282930123

45678910

11121314151617

18192021222324

25262728293031

1234567

November

1234567

891011121314

15161718192021

22232425262728

293012345

6789101112

December

293012345

6789101112

13141516171819

20212223242526

272829303112

3456789

January

272829303112

3456789

10111213141516

17181920212223

24252627282930

31123456

February

31123456

78910111213

14151617181920

21222324252627

28123456

78910111213

March

28123456

78910111213

14151617181920

21222324252627

28293031123

45678910

April

28293031123

45678910

11121314151617

18192021222324

2526272829301

2345678

May

2526272829301

2345678

9101112131415

16171819202122

23242526272829

303112345

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 2 : 4
  const numOfVisibleMonths = isSmallBreakpoint ? 2 : 12
  const UnavailableDay = styled(Day)(props => ({
    background: 'url("/use-date-input/public/cross.svg")',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'bottom 6px right 5px',
    backgroundSize: '50% 50%, auto',
  }))
  const isMonday = date => getDay(date) === 1
  function BlockoutMondaysRenderer(props) {
    if (getDay(props.day) === 1) {
      return (
        <span style={{ cursor: 'not-allowed' }}>
          <UnavailableDay {...props} disabled />
        </span>
      )
    }
    return <Day {...props} />
  }
  return (
    <Calendar
      adapter={dateAdapter}
      components={{
        Day: BlockoutMondaysRenderer,
      }}
      isDayDisabled={isMonday}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfVisibleMonths}
      weekOffset={1}
    />
  )
}

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 2 : 4
  const numOfVisibleMonths = isSmallBreakpoint ? 2 : 12
  const UnavailableDay = styled(Day)(props => ({
    background: 'url("/use-date-input/public/cross.svg")',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'bottom 6px right 5px',
    backgroundSize: '50% 50%, auto',
  }))
  const isMonday = date => getDay(date) === 1
  function BlockoutMondaysRenderer(props) {
    if (getDay(props.day) === 1) {
      return (
        <span style={{ cursor: 'not-allowed' }}>
          <UnavailableDay {...props} disabled />
        </span>
      )
    }
    return <Day {...props} />
  }
  return (
    <Calendar
      adapter={dateAdapter}
      components={{
        Day: BlockoutMondaysRenderer,
      }}
      isDayDisabled={isMonday}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfVisibleMonths}
      weekOffset={1}
    />
  )
}

Validate Date Ranges

Validate date ranges with your own rules using the isRangeValid prop.

2021

June

31123456

78910111213

14151617181920

21222324252627

2829301234

567891011

July

2829301234

567891011

12131415161718

19202122232425

2627282930311

2345678

August

2627282930311

2345678

9101112131415

16171819202122

23242526272829

303112345

September

303112345

6789101112

13141516171819

20212223242526

27282930123

45678910

October

27282930123

45678910

11121314151617

18192021222324

25262728293031

1234567

November

1234567

891011121314

15161718192021

22232425262728

293012345

6789101112

December

293012345

6789101112

13141516171819

20212223242526

272829303112

3456789

January

272829303112

3456789

10111213141516

17181920212223

24252627282930

31123456

February

31123456

78910111213

14151617181920

21222324252627

28123456

78910111213

March

28123456

78910111213

14151617181920

21222324252627

28293031123

45678910

April

28293031123

45678910

11121314151617

18192021222324

2526272829301

2345678

May

2526272829301

2345678

9101112131415

16171819202122

23242526272829

303112345

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 2 : 4
  const numOfVisibleMonths = isSmallBreakpoint ? 2 : 12
  /** Add your own validators to validate ranges */
  const doesNotOverlapWeekendValidator = (startDate, endDate) => {
    if (!startDate || !endDate || startDate === endDate) {
      return true
    }
    const overlapsWeekend = eachDayOfInterval({
      start: startDate,
      end: endDate,
    }).some(interval => {
      return isWeekend(interval)
    })
    return !overlapsWeekend
  }
  const handleChange = selectedDate => {
    console.log('changed selected date', selectedDate)
  }
  return (
    <Calendar
      adapter={dateAdapter}
      allowRange
      isRangeValid={doesNotOverlapWeekendValidator}
      onChange={handleChange}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfVisibleMonths}
      weekOffset={1}
    />
  )
}

() => {
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 2 : 4
  const numOfVisibleMonths = isSmallBreakpoint ? 2 : 12
  /** Add your own validators to validate ranges */
  const doesNotOverlapWeekendValidator = (startDate, endDate) => {
    if (!startDate || !endDate || startDate === endDate) {
      return true
    }
    const overlapsWeekend = eachDayOfInterval({
      start: startDate,
      end: endDate,
    }).some(interval => {
      return isWeekend(interval)
    })
    return !overlapsWeekend
  }
  const handleChange = selectedDate => {
    console.log('changed selected date', selectedDate)
  }
  return (
    <Calendar
      adapter={dateAdapter}
      allowRange
      isRangeValid={doesNotOverlapWeekendValidator}
      onChange={handleChange}
      numOfColumns={numOfColumns}
      numOfVisibleMonths={numOfVisibleMonths}
      weekOffset={1}
    />
  )
}

Props

Prop Name	Type	Is Required	Default Value	Description
adapter	`func`	optional		Date API adapter
allowRange	`bool`	optional	`false`	When `true` will select a date range
ignoreClickOutsideRefs	`array`	optional	`[]`	Array of refs to ignore clicks, when determining whether the user clicked outside the Calendar
initialSelectedDate	`object or array`	optional		The initial selectedDate (for un-controlled use-case)
initialVisibleFromMonth	`object`	optional		The initial visible from calendar month (unless date is set)
isDayDisabled	`func`	optional		Callback to set days as disabled @param day - Date to check @returns true when disabled
isRangeValid	`func`	optional		Callback to determine whether the current selection is valid @param day - startDate @param day - endDate @returns true when valid
numOfColumns	`number`	optional	`1`	Number of columns
numOfVisibleMonths	`number`	optional	`1`	Number of visible months
onChange	`func`	optional		Selected date change handler
onStateChange	`func`	optional		State change handler
reducers	`array of funcs`	optional		Reducer(s), to override default state
theme	`object`	optional		Theme
weekOffset	`number`	optional	`0`	Start of week offset from date API's default

Calendar

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Single Date

Date Range

Setting Initial State

Custom Day Renderers

Block dates

Validate Date Ranges

Props

Single Date