use-date-input - Build Your Own Date Picker

Composition

When you want to do more than style the default components through theming you can replace the default components, with either your own components or use the default components to build a new composition.

CalendarProvider provides a components prop to replace named components with your own version. This provides several options

you can change change behavior of the default components
you can create new compositions of the default components with your own components

Common use-cases might be to build a composition of a Calendar and a shortcut list or compose the Calendar together with other UI controls or branding.

If you want to extend/replace components then redefine those components via their name, using the components prop.

import { adapter as dateAdapter } from '@use-date-input/date-fns-adapter';
import { Calendar } from "../packages/core";
const myComponents = {
    Root: props => { /* My component */ },
    Header: props => {},
    AnimatedMonthGroup: props => {},
    AnimatedGroup: props => {},
    MonthGroup: props => {},
    Month: props => {},
    MonthHeader: props => {},
    Week: props => {},
    WeekHeader: props => {},
    DayOfWeek: props => {},
    Day: props => {}
};
const MyCalendar = () => {
    return (
        <Calendar
            adapter={dateAdapter}
            components={myComponents}
        />
    );
};

For instance, if you want to style days with your own state (such as blocked or un-available), then you simply replace or extend the current Day component

2021

June

303112345

6789101112

13141516171819

20212223242526

27282930123

45678910

July

27282930123

45678910

11121314151617

18192021222324

25262728293031

1234567

() => {
  // import styled from "styled-components";
  // import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
  // import getDay from "date-fns/getDay";
  // import { Calendar, Day } from "@use-date-input/core";
  const MONDAY = 1
  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) === MONDAY
  function BlockoutMondaysRenderer(props) {
    if (isMonday(props.day)) {
      return (
        <span style={{ cursor: 'not-allowed' }}>
          <UnavailableDay {...props} disabled />
        </span>
      )
    }
    return <Day {...props} />
  }
  return (
    <Calendar
      adapter={dateAdapter}
      components={{
        Day: BlockoutMondaysRenderer,
      }}
      isDayDisabled={isMonday}
      numOfVisibleMonths={2}
      numOfColumns={2}
    />
  )
}

() => {
  // import styled from "styled-components";
  // import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
  // import getDay from "date-fns/getDay";
  // import { Calendar, Day } from "@use-date-input/core";
  const MONDAY = 1
  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) === MONDAY
  function BlockoutMondaysRenderer(props) {
    if (isMonday(props.day)) {
      return (
        <span style={{ cursor: 'not-allowed' }}>
          <UnavailableDay {...props} disabled />
        </span>
      )
    }
    return <Day {...props} />
  }
  return (
    <Calendar
      adapter={dateAdapter}
      components={{
        Day: BlockoutMondaysRenderer,
      }}
      isDayDisabled={isMonday}
      numOfVisibleMonths={2}
      numOfColumns={2}
    />
  )
}

Here is an example of Calendar composed together with components from Material-UI.

A custom header has been added to add Month and Year dropdowns using Material-UI's Formfield component.
A set of shortcuts have been added using Material-UI's List component.

This example uses a hook called useCalendarDispatch, to access dispatch methods, allowing you to dispatch actions to the reducer from your custom Root.

For brevity, additional source for the custom Header can be found here

In the example below, select a startDate, to see a list of shortcuts appear.

Month

Year

June

303112345

6789101112

13141516171819

20212223242526

27282930123

45678910

July

27282930123

45678910

11121314151617

18192021222324

25262728293031

1234567

August

1234567

891011121314

15161718192021

22232425262728

2930311234

567891011

September

2930311234

567891011

12131415161718

19202122232425

262728293012

3456789

October

262728293012

3456789

10111213141516

17181920212223

24252627282930

31123456

November

31123456

78910111213

14151617181920

21222324252627

2829301234

567891011

December

2829301234

567891011

12131415161718

19202122232425

2627282930311

2345678

January

2627282930311

2345678

9101112131415

16171819202122

23242526272829

303112345

February

303112345

6789101112

13141516171819

20212223242526

272812345

6789101112

March

272812345

6789101112

13141516171819

20212223242526

272829303112

3456789

April

272829303112

3456789

10111213141516

17181920212223

24252627282930

1234567

May

1234567

891011121314

15161718192021

22232425262728

2930311234

567891011

() => {
  // import { createDateAPI, Calendar, CalendarProvider, useCalendarDispatch, useCalendarState, Root } from "@use-date-input/core";
  // import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
  // import { makeStyles } from '@material-ui/core/styles';
  // import List from '@material-ui/core/List';
  // import ListItem from '@material-ui/core/ListItem';
  // import ListItemText from '@material-ui/core/ListItemText';
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 2 : 4
  const numOfVisibleMonths = isSmallBreakpoint ? 2 : 12
  const ShortcutList = () => {
    const dateAPI = createDateAPI({ adapter: dateAdapter })
    const useStyles = makeStyles(theme => ({
      root: {
        backgroundColor: theme.palette.background.paper,
        color: theme.palette.primary.main,
        display: 'inline-block',
        marginTop: '40px',
        verticalAlign: 'top',
        width: 150,
      },
    }))
    const { startDate } = useCalendarState()
    const { setEndDate, setVisibleFromDate } = useCalendarDispatch()
    const classes = useStyles()
    if (!startDate) {
      return null
    }
    const createNightsSelectHandler = numOfNights => () => {
      setEndDate(dateAPI.addDays(startDate, numOfNights))
      setVisibleFromDate(dateAPI.startOfMonth(startDate))
    }
    const handleTenNights = createNightsSelectHandler(10)
    const handleSevenNights = createNightsSelectHandler(7)
    const handleThreeNights = createNightsSelectHandler(3)
    return (
      <div className={classes.root}>
        <List component="nav" dense aria-label="date range shortcuts">
          <ListItem button onClick={handleTenNights}>
            <ListItemText primary="Stay for 10 nights" />
          </ListItem>
          <ListItem button onClick={handleSevenNights}>
            <ListItemText primary="Stay for 7 nights" />
          </ListItem>
          <ListItem button onClick={handleThreeNights}>
            <ListItemText primary="Stay for 3 nights" />
          </ListItem>
        </List>
      </div>
    )
  }
  const CustomRoot = props => (
    <div>
      <ShortcutList />
      <Root {...props} />
    </div>
  )
  return (
    <Calendar
      adapter={dateAdapter}
      allowRange
      components={{
        Header: DemoHeader,
        Root: CustomRoot,
      }}
      numOfVisibleMonths={numOfVisibleMonths}
      numOfColumns={numOfColumns}
    />
  )
}

() => {
  // import { createDateAPI, Calendar, CalendarProvider, useCalendarDispatch, useCalendarState, Root } from "@use-date-input/core";
  // import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
  // import { makeStyles } from '@material-ui/core/styles';
  // import List from '@material-ui/core/List';
  // import ListItem from '@material-ui/core/ListItem';
  // import ListItemText from '@material-ui/core/ListItemText';
  const theme = useTheme()
  const isSmallBreakpoint = useMediaQuery(theme.breakpoints.down('sm'))
  const numOfColumns = isSmallBreakpoint ? 2 : 4
  const numOfVisibleMonths = isSmallBreakpoint ? 2 : 12
  const ShortcutList = () => {
    const dateAPI = createDateAPI({ adapter: dateAdapter })
    const useStyles = makeStyles(theme => ({
      root: {
        backgroundColor: theme.palette.background.paper,
        color: theme.palette.primary.main,
        display: 'inline-block',
        marginTop: '40px',
        verticalAlign: 'top',
        width: 150,
      },
    }))
    const { startDate } = useCalendarState()
    const { setEndDate, setVisibleFromDate } = useCalendarDispatch()
    const classes = useStyles()
    if (!startDate) {
      return null
    }
    const createNightsSelectHandler = numOfNights => () => {
      setEndDate(dateAPI.addDays(startDate, numOfNights))
      setVisibleFromDate(dateAPI.startOfMonth(startDate))
    }
    const handleTenNights = createNightsSelectHandler(10)
    const handleSevenNights = createNightsSelectHandler(7)
    const handleThreeNights = createNightsSelectHandler(3)
    return (
      <div className={classes.root}>
        <List component="nav" dense aria-label="date range shortcuts">
          <ListItem button onClick={handleTenNights}>
            <ListItemText primary="Stay for 10 nights" />
          </ListItem>
          <ListItem button onClick={handleSevenNights}>
            <ListItemText primary="Stay for 7 nights" />
          </ListItem>
          <ListItem button onClick={handleThreeNights}>
            <ListItemText primary="Stay for 3 nights" />
          </ListItem>
        </List>
      </div>
    )
  }
  const CustomRoot = props => (
    <div>
      <ShortcutList />
      <Root {...props} />
    </div>
  )
  return (
    <Calendar
      adapter={dateAdapter}
      allowRange
      components={{
        Header: DemoHeader,
        Root: CustomRoot,
      }}
      numOfVisibleMonths={numOfVisibleMonths}
      numOfColumns={numOfColumns}
    />
  )
}