A Simple Chakra Datepicker based on Dayzed.

Every individual component is using Chakra UI. So it should respect all Chakra UI Configs without problem.

The componenent itself has to use some date library

Highly recommend just copy/paste the source code from /src to customize however you want.

Install the dependency

Npm

npm i date-fns dayzed

npm i chakra-dayzed-datepicker

Yarn:

yarn add date-fns dayzed

yarn add chakra-dayzed-datepicker

Basic usage

Single

  const [date, setDate] = useState(new Date());
  
  <SingleDatepicker
    name="date-input"
    date={date}
    onDateChange={setDate}
  />

Range:

Note that this list will have one value during the selection process. Your system won't work if you try to control this directly as [startDate, endDate] because we'll try to set selectedDates to [intermediateSelection] and the length of the resulting selectedDates is meaningful to the datepicker.

  const [selectedDates, setSelectedDates] = useState<Date[]>([new Date(), new Date()]);
  
  <RangeDatepicker
    selectedDates={selectedDates}
    onDateChange={setSelectedDates}
  />

propsConfigs:

dateNavBtnProps extends from ButtonProps of Chakra-UI This allows you to override the default behavior however your want as long as supported by Chakra-UI.

dayOfMonthBtnProps = {
  defaultBtnProps,
  isInRangeBtnProp,
  selectedBtnProps,
  todayBtnProps
}

dayOfMonthBtnProps allows you to customzie date btn style based on the state.
Style precedence: default < isInRange < seleted < today.

popoverCompProps might be useful when you want to setup some simple styles like text color globally

popoverCompProps = {
  popoverContentProps,
  popoverBodyProps
}

Example:

  propsConfigs={{
    dateNavBtnProps: {
      colorScheme: "blue",
      variant: "outline"
    },
    dayOfMonthBtnProps: {
      defaultBtnProps: {
        borderColor: "red.300",
        _hover: {
          background: 'blue.400',
        }
      },
      isInRangeBtnProps: {
        color: "yellow",
      },
      selectedBtnProps: {
        background: "blue.200",
        color: "green",
      },
      todayBtnProps: {
        background: "teal.400",
      }
    },
    inputProps: {
      size: "sm"
    },
    popoverCompProps: {
      popoverContentProps: {
        background: "gray.700",
        color: "white",
      },
    },
  }}

configs:

Non Chakra-related configurations :

  configs={{
    dateFormat: 'yyyy-MM-dd',
    dayNames: 'abcdefg'.split(''), // length of 7
    monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
    firstDayOfWeek: 2, // default is 0, the dayNames[0], which is Sunday if you don't specify your own dayNames,
  }}

other props:

Name	Type	Default value	Description	Single/Range
name	string	undefined	name attribute for <input /> element	both
usePortal	boolean	undefined	to prevent parent styles from clipping or hiding content	both
defaultIsOpen	boolean	undefined	open the date panel at the beginning	both
minDate	Date	undefined	minimum date	both
maxDate	Date	undefined	maximum date	both
onMonthViewChange	({calendars, offset}: {calendars: Calendar[]; offset: number;}) => void	undefined	runs when the current month is changed	single
onPopoverOpen	() => void	undefined	runs when the calendar popover is opened	single
customDateButton	(dateObj: DateObjExtended, { dateProps, btnProps }: CustomDateButtonProps) => ReactElement;	undefined	custom date button renderer that replaces the original one	single

For version < [email protected]:
dayOfMonthBtnProps extends from ButtonProps and has only selectedBg support,

  dayOfMonthBtnProps: {
    borderColor: "red.300",
    selectedBg: "blue.200",
    _hover: {
      bg: 'blue.400',
    }
  },