chakra-dayzed-datepicker

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 i date-fns dayzed

npm i chakra-dayzed-datepicker

Basic usage

Single

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

Range:

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

propsConfigs:

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

Example:

  propsConfigs={{
    dateNavBtnProps: {
      colorScheme: "blue",
      variant: "outline"
    },
    dayOfMonthBtnProps: {
      borderColor: "red.300",
      selectedBg: "blue.200",
      _hover: {
        bg: 'blue.400',
      }
    },
    inputProps: {
      size: "sm"
    }
  }}

other props:

Name	Type	Default value	Description
name	string	undefined	name attribute for <input /> element
usePortal	boolean	undefined	to prevent parent styles from clipping or hiding content

Changelog

[0.1.6] - 2022-03-25

Added

• add usePortal to avoid parent's container clipping (kudos @adobs)