chakra-dayzed-datepicker

To use this library, you must install chakra-dayzed-datepicker along with its required peer dependencies: date-fns and dayzed.

Using npm:

npm i date-fns dayzed
npm i chakra-dayzed-datepicker

Using yarn:

yarn add date-fns dayzed
yarn add chakra-dayzed-datepicker

The configs prop is used for non-Chakra-related logic, such as date formatting and localization.

Available keys:

• dateFormat: String defining the date format (e.g., 'yyyy-MM-dd').
• dayNames: Array of 7 strings for day names (e.g., ['Sun', 'Mon', ...]).
• monthNames: Array of 12 strings for month names.
• firstDayOfWeek: Integer representing the index of the first day of the week (default is 0, which is Sunday).

configs={{
  dateFormat: 'yyyy-MM-dd',
  dayNames: 'abcdefg'.split(''),
  monthNames: 'ABCDEFGHIJKL'.split(''),
  firstDayOfWeek: 2,
}}

The SingleDatepicker component is used for selecting a single date. It requires a date prop for the current value and an onDateChange callback to update the state.

import { SingleDatepicker } from "chakra-dayzed-datepicker";
import { useState } from "react";

const [date, setDate] = useState(new Date());

<SingleDatepicker
  name="date-input"
  date={date}
  onDateChange={setDate}
/>

The RangeDatepicker component allows users to select a range of dates.

Important: The selectedDates state will contain a single value during the intermediate selection process (when the user has clicked the start date but not yet the end date). Do not attempt to force the state to strictly follow a [startDate, endDate] pattern, as the length of the selectedDates array is used by the component to manage the selection lifecycle.

import { RangeDatepicker } from "chakra-dayzed-datepicker";
import { useState } from "react";

const [selectedDates, setSelectedDates] = useState<Date[]>([new Date(), new Date()]);

<RangeDatepicker
  selectedDates={selectedDates}
  onDateChange={setSelectedDates}
/>

You can pass specific Chakra UI props to the internal components of the RangeDatepicker using the propsConfigs object. This allows for deep customization of the UI elements without rebuilding the component.

Available configuration paths within propsConfigs:

• triggerBtnProps: Props for the Button used in the default variant.
• inputProps: Props for the Input used in the input variant.
• triggerIconBtnProps: Props for the icon button in the input variant.
• popoverCompProps.popoverContentProps: Props for the Popover.Content.
• popoverCompProps.popoverBodyProps: Props for the Popover.Body.

<RangeDatepicker
  selectedDates={dates}
  onDateChange={setDates}
  propsConfigs={{
    triggerBtnProps: { colorScheme: 'blue' },
    popoverCompProps: {
      popoverContentProps: { shadow: 'xl' }
    }
  }}
/>

The configs prop allows you to customize the internal calendar logic and date formatting. These settings are merged with DefaultConfigs.

Supported keys in DatepickerConfigs:

• dateFormat: A date-fns compatible format string (e.g., 'yyyy-MM-dd'). This is used for both displaying the date in the trigger and parsing manual input in the input variant.
• monthNames: Array of short month names.
• dayNames: Array of short weekday names.
• firstDayOfWeek: The index of the first day of the week (e.g., 0 for Sunday).
• monthsToDisplay: Number of months to show in the calendar panel.

<SingleDatepicker
  configs={{
    dateFormat: 'MM/dd/yyyy',
    firstDayOfWeek: 1, // Monday
    monthsToDisplay: 2
  }}
  date={selectedDate}
  onDateChange={onDateChange}
/>

Common props available for both SingleDatepicker and RangeDatepicker components.

| Name | single/range | Type | Default | Description |
|------|--------------|------|---------|-------------|
| `name` | both | string | undefined | name attribute for `<input />` element |
| `usePortal` | both | boolean | undefined | to prevent parent styles from clipping or hiding content |
| `defaultIsOpen` | both | boolean | false | open the date panel at the beginning |
| `closeOnSelect` | both | boolean | true | close the date panel upon the complete selection |
| `minDate` | both | Date | undefined | minimum date |
| `maxDate` | both | Date | undefined | maximum date |
| `disabledDates` | single | Set<number> | undefined | for single datepicker only, uses `startOfDay` as comparison (e.g. `new Set([startOfDay(new Date()).getTime()])`) |

If you want to implement a completely custom trigger (e.g., a custom styled div or a complex component) instead of the default Button or Input, use the children prop as a render function. The function receives the current selectedDates as an argument.

<RangeDatepicker
  selectedDates={dates}
  onDateChange={setDates}
>
  {(selected) => (
    <button onClick={() => {/* logic to open popover if needed */}}>
      {selected.length === 2 
        ? `${selected[0].toLocaleDateString()} - ${selected[1].toLocaleDateString()}`
        : 'Select Range'}
    </button>
  )}
</RangeDatepicker>