@rehookify/datepicker

https://www.rehookify.com/datepicker/
Admin
An ultimate tool for creating date, range, and time pickers in React applications. It offers...
Tokens:10,443
Snippets:70
Trust Score:4.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install @rehookify/datepicker

Source: https://www.rehookify.com/datepicker/index

Install the @rehookify/datepicker package using your preferred package manager. This library provides behavioral and accessibility implementations for date, range, and time pickers in React applications.

```bash
npm i @rehookify/datepicker
```

```bash
yarn add @rehookify/datepicker
```

```bash
pnpm add @rehookify/datepicker
```

--------------------------------

### Modular: useDatePickerState Hook

Source: https://www.rehookify.com/datepicker/tutorials

Shows how to use the `useDatePickerState` hook to get general context, which is then passed to modular hooks. Requires a configuration object.

```javascript
const dpState = useDatePickerState({
  // configuration
});
// then you should pass dpState to the modular hooks
```

--------------------------------

### DPCalendarConfig Interface

Source: https://www.rehookify.com/datepicker/calendar-configuration

Defines the structure for calendar configuration, specifying display modes, month offsets, and the starting day of the week.

```typescript
interface DPCalendarConfig {
  mode?: 'static' | 'fluid';
  offsets?: number[];
  startDay: DPDayInteger;
}
```

--------------------------------

### Calendar Layout: Static Mode Example

Source: https://www.rehookify.com/datepicker/calendar-configuration

Illustrates the fixed 6x7 grid layout for calendars in 'static' mode, ensuring a consistent UI without visual jumping between months or years.

```text
30 31 01 02 03 04 05
06 07 08 09 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 01 02 03 04 05
06 07 08 09 10 11 12
```

--------------------------------

### Bootstrap DatePicker Component with useDatePicker

Source: https://www.rehookify.com/datepicker/all-in-one

Shows the initial setup for a React DatePicker component. It involves importing necessary hooks (`useState`, `useDatePicker`) and defining state variables for selected dates and offset date.

```typescript
import React, { useState } from 'react';
import { useDatePicker } from '@rehookify/datepicker';

export const DatePicker = () => {
  const [selectedDates, onDatesChange] = useState<Date[]>([]);
  const [offsetDate, onOffsetChange] = useState<Date>(new Date());

  const { data, propGetters } = useDatePicker({});

  return (
    <section>
      {/* component goes here */}
    </section>
  );
}
```

--------------------------------

### Controlled Component Usage Example

Source: https://www.rehookify.com/datepicker/configuration

Demonstrates how to use the `useDatePicker` hook with React's `useState` to manage the datepicker as a controlled component. This pattern is common for handling user interactions and state updates.

```javascript
const [selectedDates, onDatesChange] = useState<Date[]>([]);
const { data } = useDatePicker({
  selectedDates,
  onDatesChange,
})
```

--------------------------------

### Basic DatePicker Component Setup

Source: https://www.rehookify.com/datepicker/all-in-one

Sets up a React DatePicker component using the `useDatePicker` hook. It manages selected dates and the current month's offset, and provides access to calendar data and event handlers for date selection and navigation. The hook takes state setters for selected dates and offset date as arguments.

```TypeScript
import React, { useState } from 'react';
import { useDatePicker } from '@rehookify/datepicker';

export const DatePicker = () => {
  const [selectedDates, onDatesChange] = useState<Date[]>([]);
  const [offsetDate, onOffsetChange] = useState<Date>(new Date());

  const {
    data: { weekDays, calendars },
    propGetters: {
      dayButton,
      addOffset,
      subtractOffset,
    },
  } = useDatePicker({
    selectedDates,
    onDatesChange,
    offsetDate,
    onOffsetChange,
    dates: { toggle: true }
  });

  // calendars[0] is always present, this is an initial calendar
  const { year, month, days } = calendars[0];

  return (
    <section>
      {/* component goes here */}
    </section>
  );
}
```

--------------------------------

### Calendar Layout: Fluid Mode Example

Source: https://www.rehookify.com/datepicker/calendar-configuration

Illustrates the dynamic grid layout for calendars in 'fluid' mode, which adapts the number of rows based on the days of the first and last month dates, potentially including days from adjacent months.

```text
30 31 01 02 03 04 05
06 07 08 09 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 01 02 03 04 05
```

--------------------------------

### Years Configuration: Mode Examples

Source: https://www.rehookify.com/datepicker/years-configuration

Illustrates how the 'mode' property affects the centering and display of years within the years matrix. 'decade' mode centers on the decade, 'fluid' offsets by -1, and 'exact' places the current year at the end.

```text
Mode: decade
2019 2020 2021
2022 2023 2024
2025 2026 2027
2028 2029 2030
```

```text
Mode: fluid
2017 2018 2019
2020 2021 2022
2023 2024 2025
2026 2027 2028
```

```text
Mode: exact
2012 2013 2014
2015 2016 2017
2018 2019 2020
2021 2022 2023
```

--------------------------------

### Create Year Picker Component with useContextYears

Source: https://www.rehookify.com/datepicker/using-modular-hooks

This example demonstrates building a year picker component. It uses useContextYears to retrieve year data and useContextYearsPropGetters for navigation and selection. The component displays a range of years and includes buttons for navigating between year pages, allowing users to select a specific year.

```javascript
import {
  useContextYears,
  useContextYearsPropGetters,
} from '@rehookify/datepicker';

export const Years = () => {
  const { years } = useContextYears();
  const {
    yearButton,
    // these prop-getters will switch between years pages
    nextYearsButton,
    previousYearsButton,
  } = useContextYearsPropGetters();

  return (
    <section>
      <header>
        <button
          {...previousYearsButton()}
          aria-label="Previous years"
        >
          &lt;
        </button>
        <p>
          {`${years[0].year} - ${years[years.length - 1].year}`}
        </p>
        <button
          {...nextYearsButton()}
          aria-label="Next years"
        >
          &gt;
        </button>
      </header>
      <ul>
        {years.map((dpYear) => (
          <li key={dpYear.$date.toDateString()}>
            <button {...yearButton(dpYear)}>
              {dpYear.year}
            </button>
          </li>
        ))}
      </ul>
    </section>
  )
}
```

--------------------------------

### Date Selection Mode

Source: https://www.rehookify.com/datepicker/dates-configuration

Explains the 'mode' property, which dictates how dates are selected. Options include 'single' for one date, 'multiple' for many dates up to a limit, and 'range' for selecting a start and end date.

```markdown
The `mode` property determines the behavior of the date picker concerning days and offers three potential values:

* **single**: Enables selection of only one date.
* **multiple**: Permits selection of an unlimited number of dates until a limit is specified.
* **range**: Allows selection of a date range. The selectedDates will contain two dates denoting the range.

Default vaule: `single`
```

--------------------------------

### Controlled Datepicker with Offset State

Source: https://www.rehookify.com/datepicker/tutorials

This example demonstrates how to control the datepicker's current view (offset) programmatically. By providing `offsetDate` and `onOffsetChange` props, you can manage which month or year the datepicker displays, overriding its internal navigation logic.

```typescript
import { useState } from 'react';
import { useDatePicker } from './useDatePicker'; // Assuming useDatePicker is imported from a local hook

function MyDatePicker() {
  const [selectedDates, onDatesChange] = useState<Date[]>([]);
  const [offsetDate, onOffsetChange] = useState<Date>(new Date());

  const { data, propGetters } = useDatePicker({
    selectedDates,
    onDatesChange,
    offsetDate,
    onOffsetChange
  });

  // ... rest of your component using data and propGetters
  return (
    <div>
      {/* Datepicker UI using data and propGetters */}
      DatePicker component here
    </div>
  );
}
```

```javascript
import { useState } from 'react';
import { useDatePicker } from './useDatePicker'; // Assuming useDatePicker is imported from a local hook

function MyDatePicker() {
  const [selectedDates, onDatesChange] = useState([]);
  const [offsetDate, onOffsetChange] = useState(new Date());

  const { data, propGetters } = useDatePicker({
    selectedDates,
    onDatesChange,
    offsetDate,
    onOffsetChange
  });

  // ... rest of your component using data and propGetters
  return (
    <div>
      {/* Datepicker UI using data and propGetters */}
      DatePicker component here
    </div>
  );
}
```

--------------------------------

### Allow Selecting Same Date in Range Mode

Source: https://www.rehookify.com/datepicker/dates-configuration

Explains the 'selectSameDate' boolean option, which, when true, allows the same date to be selected as both the start and end of a range in 'range' mode.

```markdown
This boolean option permits the selection of the same date in `range` mode.
```

--------------------------------

### Controlled Datepicker with useState

Source: https://www.rehookify.com/datepicker/tutorials

This snippet shows the basic setup for a controlled datepicker using React's `useState` hook. It manages the `selectedDates` state and provides `onDatesChange` to update it, ensuring the datepicker's state is driven by your application's state.

```typescript
import { useState } from 'react';
import { useDatePicker } from './useDatePicker'; // Assuming useDatePicker is imported from a local hook

function MyDatePicker() {
  const [selectedDates, onDatesChange] = useState<Date[]>([]);

  const { data, propGetters } = useDatePicker({
    selectedDates,
    onDatesChange
  });

  // ... rest of your component using data and propGetters
  return (
    <div>
      {/* Datepicker UI using data and propGetters */}
      DatePicker component here
    </div>
  );
}
```

```javascript
import { useState } from 'react';
import { useDatePicker } from './useDatePicker'; // Assuming useDatePicker is imported from a local hook

function MyDatePicker() {
  const [selectedDates, onDatesChange] = useState([]);

  const { data, propGetters } = useDatePicker({
    selectedDates,
    onDatesChange
  });

  // ... rest of your component using data and propGetters
  return (
    <div>
      {/* Datepicker UI using data and propGetters */}
      DatePicker component here
    </div>
  );
}
```

--------------------------------

### Manually Change Datepicker Offset

Source: https://www.rehookify.com/datepicker/tutorials

This snippet illustrates how to manually trigger a change in the datepicker's displayed month or year. By calling the `onOffsetChange` function with a new `Date` object, you can programmatically navigate the datepicker, for example, to a specific future date.

```typescript
import { useState } from 'react';
import { useDatePicker } from './useDatePicker'; // Assuming useDatePicker is imported from a local hook

function MyDatePicker() {
  const [selectedDates, onDatesChange] = useState<Date[]>([]);
  const [offsetDate, onOffsetChange] = useState<Date>(new Date());

  const { data, propGetters } = useDatePicker({
    selectedDates,
    onDatesChange,
    offsetDate,
    onOffsetChange
  });

  const goToNextYear = () => {
    const currentYear = offsetDate.getFullYear();
    onOffsetChange(new Date(currentYear + 1, 0, 1)); // Set to Jan 1st of next year
  };

  return (
    <div>
      {/* Datepicker UI using data and propGetters */}
      DatePicker component here
      <button onClick={goToNextYear}>Go to Next Year</button>
    </div>
  );
}
```

```javascript
import { useState } from 'react';
import { useDatePicker } from './useDatePicker'; // Assuming useDatePicker is imported from a local hook

function MyDatePicker() {
  const [selectedDates, onDatesChange] = useState([]);
  const [offsetDate, onOffsetChange] = useState(new Date());

  const { data, propGetters } = useDatePicker({
    selectedDates,
    onDatesChange,
    offsetDate,
    onOffsetChange
  });

  const goToNextYear = () => {
    const currentYear = offsetDate.getFullYear();
    onOffsetChange(new Date(currentYear + 1, 0, 1)); // Set to Jan 1st of next year
  };

  return (
    <div>
      {/* Datepicker UI using data and propGetters */}
      DatePicker component here
      <button onClick={goToNextYear}>Go to Next Year</button>
    </div>
  );
}
```

--------------------------------

### React Datepicker: Manipulating Offset Externally

Source: https://www.rehookify.com/datepicker/all-in-one

This React component demonstrates how to manage the datepicker's offset position using external buttons. It utilizes the `useDatePicker` hook from '@rehookify/datepicker' to control the calendar's view, allowing users to navigate months and jump to specific dates like 'today' or 'next New Year'. The example highlights a controlled component pattern where state updates directly influence the datepicker's offset.

```typescript
import React, { useState } from 'react';
import { useDatePicker } from '@rehookify/datepicker';

export const DatePicker = () => {
  const [selectedDates, onDatesChange] = useState<Date[]>([]);
  const [offsetDate, onOffsetChange] = useState<Date>(new Date());

  const {
    data: { weekDays, calendars },
    propGetters: {
      dayButton,
      addOffset,
      subtractOffset,
    },
  } = useDatePicker({
    selectedDates,
    onDatesChange,
    offsetDate,
    onOffsetChange,
    dates: { toggle: true }
  });

  const { year, month, days } = calendars[0];

  const onMoveToNow = () => onOffsetChange(new Date());

  const onMoveToNewYear = () => {
    const currentYear = new Date().getFullYear();
    onOffsetChange(new Date(currentYear + 1, 0, 1));
  };

  return (
    <section>
      <div>
        <button onClick={onMoveToNow}>Show today</button>
        <button onClick={onMoveToNewYear}>Show the next New Year</button>
      </div>
      {selectedDates.length > 0 ? <h1>{selectedDates[0]}</h1> : null}
      <header>
        <div>
          <button
            {...subtractOffset({ months: 1 })}
            aria-label="Previous month"
          >
            &lt;
          </button>
          <p>{month} {year}</p>
          <button
            {...addOffset({ months: 1 })}
            aria-label="Next month"
          >
            &gt;
          </button>
        </div>
        <ul>
          {weekDays.map((day) => (
            <li key={`${month}-${day}`}>{day}</li>
          ))}
        </ul>
      </header>
      <ul>
        {days.map((dpDay) => (
          <li key={dpDay.$date.toDateString()}>
            <button {...dayButton(dpDay)}>
              {dpDay.day}
            </button>
          </li>
        ))}
      </ul>
    </section>
  );
}

```

--------------------------------

### All-in-one: DatePickerProvider Component

Source: https://www.rehookify.com/datepicker/tutorials

Illustrates using the `DatePickerProvider` component for an all-in-one solution, passing configuration to enable full functionality for children via `useDatePickerContext`.

```javascript
<DatePickerStateProvider config={{
  // configuration
}}>
  {childrden}
</DatePickerStateProvider>
// children of the DatePickerProvider will have access full functionality
// through useDatePickerContext hook
```

--------------------------------

### All-in-one: useDatePicker Hook

Source: https://www.rehookify.com/datepicker/tutorials

Demonstrates using the `useDatePicker` hook for an all-in-one solution, fetching data and prop getters. Requires a configuration object.

```javascript
const { data, propsGetters } = useDatePicker({
  // configuration
})
```

--------------------------------

### Use DatePickerProvider and useDatePickerContext

Source: https://www.rehookify.com/datepicker/all-in-one

Illustrates how to set up a `DatePickerProvider` with configuration and subsequently access datepicker context within child components using `useDatePickerContext`. This pattern is useful for global state management.

```typescript
const [selectedDates, onDatesChange] = useState<Date[]>([]);

return (
  <DatePickerProvider
    config={{
      selectedDates,
      onDatesChange,
    }}
  >
    {children}
  </DatePickerProvider>
);

// In child component:
const { data, propsGetters } = useDatePickerContext();
```

--------------------------------

### Modular: DatePickerStateProvider Component

Source: https://www.rehookify.com/datepicker/tutorials

Demonstrates using `DatePickerStateProvider` to pass context to modular hooks. Children can access `dpState` and use modular hooks with a Context prefix.

```javascript
<DatePickerStateProvider config={{
  // configuration
}}>
  {childrden}
</DatePickerStateProvider>
// children of the DatePickerStateProvider will have access to the dpState
// you can use modular hooks with Context prefix useContextCalendars
```

--------------------------------

### General Configuration Properties

Source: https://www.rehookify.com/datepicker/configuration

Defines the core properties for general datepicker configuration. These include managing selected dates, handling date changes, setting focus dates, and managing optional offset dates.

```typescript
selectedDates: Date[];
onDatesChange(d: Date[]): void;
focusDate?: Date | undefined;
offsetDate?: Date;
onOffsetChange?: (d: Date) => void;
```

--------------------------------

### Bootstrap Context Provider and Configure Datepicker

Source: https://www.rehookify.com/datepicker/using-modular-hooks

Sets up the DatePickerStateProvider component, initializing state for selected dates and configuring the datepicker for a range mode. It defines minimum and maximum dates to limit the selectable period to approximately three months.

```TypeScript
import React, { useState } from 'react';
import { DatePickerStateProvider } from '@rehookify/datepicker';

export const DatePicker = () => {
  const now = new Date();
  const currentYear = now.getFullYear();
  const currentMonth = now.getMonth();
  const [selectedDates, onDatesChange] = useState<Date[]>([]);

  return (
    <DatePickerStateProvider
      config={{
        selectedDates,
        onDatesChange,
        dates: {
          mode: 'range',
          minDate: new Date(currentYear, currentMonth - 1, 1),
          maxDate: new Date(currentYear, currentMonth + 2, 0),
        }
      }}
    >
      {/* Components will go here */}
    </DatePickerStateProvider>
  );
}
```

--------------------------------

### Create Calendar Component with Rehookify Datepicker Hooks

Source: https://www.rehookify.com/datepicker/using-modular-hooks

Demonstrates how to build a basic calendar structure by fetching calendar data and day prop getters using `useContextCalendars` and `useContextDaysPropGetters`. This snippet focuses on displaying days and their associated month.

```jsx
import {
  useContextCalendars,
  useContextDaysPropGetters,
} from '@rehookify/datepicker';

const Calendar = () => {
  const { calendars, weekDays } = useContextCalendars();
  const { dayButton } = useContextDaysPropGetters();

  const { days, month } = calendars[0];

  return (
    <section>
      <header>
        <ul>
          {weekDays.map((day) => (
            <li key={`${month}-${day}`}>{day}</li>
          ))}
        </ul>
      </header>
      <ul>
        {days.map((dpDay) => (
          <li key={dpDay.$date.toDateString()}>
            <button {...dayButton(dpDay)}>
              {dpDay.day}
            </button>
          </li>
        ))}
      </ul>
    </section>
  )
}
```

```jsx
import {
  useContextCalendars,
  useContextDaysPropGetters,
} from '@rehookify/datepicker';

const Calendar = () => {
  const { calendars, weekDays } = useContextCalendars();
  const { dayButton } = useContextDaysPropGetters();

  const { days, month } = calendars[0];

  return (
    <section>
      <header>
        <ul>
          {weekDays.map((day) => (
            <li key={`${month}-${day}`}>{day}</li>
          ))}
        </ul>
      </header>
      <ul>
        {days.map((dpDay) => (
          <li key={dpDay.$date.toDateString()}>
            <button {...dayButton(dpDay)}>
              {dpDay.day}
            </button>
          </li>
        ))}
      </ul>
    </section>
  )
}
```

--------------------------------

### Create Month Picker Component with useContextMonths

Source: https://www.rehookify.com/datepicker/using-modular-hooks

This snippet shows how to create a month picker component. It utilizes useContextMonths to fetch month data and useContextMonthsPropGetters to obtain necessary prop getters for interactive elements. The component displays the year and a list of months, allowing users to select them.

```javascript
import {
  useContextMonths,
  useContextMonthsPropGetters,
} from '@rehookify/datepicker';

export const Months = () => {
  const { months } = useContextMonths();
  const { monthButton } = useContextMonthsPropGetters();

  // this is not required but will give more context
  const year = months[0].$date.getFullYear();

  return (
    <section>
      <header>{year}</header>
      <ul>
        {months.map((dpMonth) => (
          <li key={dpMonth.$date.toDateString()}>
            <button {...monthButton(dpMonth)}>
              {dpMonth.month}
            </button>
          </li>
        ))}
      </ul>
    </section>
  )
}
```

--------------------------------

### DPYearsConfig Interface

Source: https://www.rehookify.com/datepicker/years-configuration

Defines the structure for configuring the years picker, including display mode, number of years, and step increment.

```typescript
interface DPYearsConfig {
  mode: 'decade' | 'fluid';
  numberOfYears: number;
  step: number;
}
```

--------------------------------

### Define Datepicker Time Configuration Interfaces

Source: https://www.rehookify.com/datepicker/time-configuration

Defines the TypeScript interfaces for time limits (DPTimeLimit) and general time configuration (DPTimeConfig) within the datepicker library. These interfaces structure settings for time intervals, minimum/maximum time constraints, and locale-specific time formatting.

```TypeScript
export interface DPTimeLimit {
  h: number;
  m: number;
}

export interface DPTimeConfig {
  interval: number;
  minTime: DPTimeLimit;
  maxTime: DPTimeLimit;
  useLocales: boolean;
}
```

--------------------------------

### Years Configuration: numberOfYears and step

Source: https://www.rehookify.com/datepicker/years-configuration

Details the 'numberOfYears' property, which sets the quantity of years displayed (defaulting to 12), and the 'step' property, which defines the increment for navigation buttons.

```text
numberOfYears: The quantity of years displayed in the years matrix, with a default value set at 12.
```

```text
step: Specifies the number of years that the previousYearsButton and nextYearsButton prop-getters will change by on a single step.
```

--------------------------------

### DPPropsGetterConfig Interface

Source: https://www.rehookify.com/datepicker/state-prop-getters

Defines the configuration object for prop-getters, allowing optional callbacks like onClick and boolean flags such as disabled. This interface extends Record<string, unknown> for additional custom properties.

```ts
export interface DPPropsGetterConfig extends Record<string, unknown> {
  onClick?(evt?: MouseEvent<HTMLElement>, date?: Date): void;
  disabled?: boolean;
}
```

--------------------------------

### Offset Date Management

Source: https://www.rehookify.com/datepicker/configuration

Explains the optional `offsetDate` and `onOffsetChange` properties for managing date offsets. This is useful for scenarios like integrating with input fields or handling multi-mode selections.

```typescript
offsetDate?: Date;
onOffsetChange?: (d: Date) => void;
```

--------------------------------

### Use useDatePicker Hook

Source: https://www.rehookify.com/datepicker/all-in-one

Demonstrates the primary method of using the `useDatePicker` hook to access all datepicker functionalities, including data and prop-getters. This is suitable for consolidating features into a single hook call.

```typescript
const [selectedDates, onDatesChange] = useState<Date[]>([]);
const { date, propGetters } = useDatePicker({
  selectedDates,
  onDatesChange
});
```

--------------------------------

### DPDatesUserConfig Interface

Source: https://www.rehookify.com/datepicker/dates-configuration

Defines the user-configurable options for date selection behavior in the Rehookify Datepicker. This interface specifies properties like selection mode, date boundaries, and toggle functionality.

```typescript
interface DPDatesUserConfig {
  mode?: 'single' | 'multiple' | 'range';
  minDate?: Date;
  maxDate?: Date;
  selectSameDate?: boolean;
  toggle?: boolean;
  limit?: number;
}
```

--------------------------------

### Modular State Management

Source: https://www.rehookify.com/datepicker/state

Illustrates the modular state organization, where state is managed by functional slices exposed as separate hooks. This approach allows for more granular control and consumption of specific state parts, such as calendars or day button properties.

```javascript
const { calendars, weekDays } = useContextCalendars();
const { dayButton } = useContextDaysPropGetters();
```

--------------------------------

### DayButton Prop-Getter Type

Source: https://www.rehookify.com/datepicker/state-prop-getters

Defines the signature for the dayButton prop-getter. It takes a DPDay object and an optional DPPropsGetterConfig, returning a DPPropGetter object for day elements.

```ts
type DayButton = (
  day: DPDay,
  config?: DPPropsGetterConfig
) => DPPropGetter;
```

--------------------------------

### MonthButton Prop-Getter Type

Source: https://www.rehookify.com/datepicker/state-prop-getters

Defines the signature for the monthButton prop-getter. It accepts a DPMonth object and an optional DPPropsGetterConfig, returning a DPPropGetter object for month elements.

```ts
type MonthButton = (
  month: DPMonth,
  config?: DPPropsGetterConfig
) => DPPropGetter;
```

--------------------------------

### useDatePickerOffsetPropGetters Hook

Source: https://www.rehookify.com/datepicker/modular-hooks

A general-purpose hook returning prop-getters for offset manipulation, including adding, setting, and subtracting offsets. It facilitates date navigation and manipulation.

```typescript
export type DPUseDatePickerOffsetPropGetters = (state: DPState) => {
  addOffset: (
    offsetValue: DPOffsetValue,
    config?: DPPropsGetterConfig,
  ) => DPPropGetter;
  setOffset: (date: Date) => DPPropGetter;
  subtractOffset: (
    offsetValue: DPOffsetValue,
    config?: DPPropsGetterConfig,
  ) => DPPropGetter;
};
```

--------------------------------

### React DatePicker Component with useDatePicker Hook

Source: https://www.rehookify.com/datepicker/all-in-one

Demonstrates creating a date picker UI using the `useDatePicker` hook. It manages selected dates and month navigation via state and prop getters. The `toggle: true` option allows deselecting dates.

```TypeScript
import React, { useState } from 'react';
import { useDatePicker } from '@rehookify/datepicker';

export const DatePicker = () => {
  const [selectedDates, onDatesChange] = useState<Date[]>([]);
  const [offsetDate, onOffsetChange] = useState<Date>(new Date());

  const {
    data: { weekDays, calendars },
    propGetters: {
      dayButton,
      addOffset,
      subtractOffset,
    },
  } = useDatePicker({
    selectedDates,
    onDatesChange,
    offsetDate,
    onOffsetChange,
    dates: { toggle: true }
  });

  const { year, month, days } = calendars[0];

  return (
    <section>
      {selectedDates.length > 0 ? <h1>{selectedDates[0]}</h1> : null}
      <header>
        <div>
          <button
            {...subtractOffset({ months: 1 })}
            aria-label="Previous month"
          >
            &lt;
          </button>
          <p>{month} {year}</p>
          <button
            {...addOffset({ months: 1 })}
            aria-label="Next month"
          >
            &gt;
          </button>
        </div>
        <ul>
          {weekDays.map((day) => (
            <li key={`${month}-${day}`}>{day}</li>
          ))}
        </ul>
      </header>
      <ul>
        {days.map((dpDay) => (
          <li key={dpDay.$date.toDateString()}>
            <button {...dayButton(dpDay)}>
              {dpDay.day}
            </button>
          </li>
        ))}
      </ul>
    </section>
  );
}
```

--------------------------------

### useMonthsPropGetters Hook

Source: https://www.rehookify.com/datepicker/modular-hooks

Provides the monthButton prop-getter for month selection functionality. It takes the current state and returns a function to generate props for month buttons.

```typescript
export type DPUseMonthsPropGetters = (state: DPState) => {
  monthButton: (month: DPMonth, config?: DPPropsGetterConfig) => DPPropGetter;
};
```

--------------------------------

### YearButton Prop-Getter Type

Source: https://www.rehookify.com/datepicker/state-prop-getters

Defines the signature for the yearButton prop-getter. It takes a DPYear object and an optional DPPropsGetterConfig, returning a DPPropGetter object for year elements.

```ts
type YearButton = (
  year: DPYear,
  config?: DPPropsGetterConfig
) => DPPropGetter;
```

--------------------------------

### DPYear Interface - TypeScript

Source: https://www.rehookify.com/datepicker/state-data

Defines the structure for a year object, containing its associated date, active state, disabled status, current day indicator, selection status, and the year number. Year name formatting is configurable.

```TypeScript
interface DPYear {
  $date: Date;
  active: boolean;
  disabled: boolean;
  now: boolean;
  selected: boolean;
  year: number;
}
```

--------------------------------

### useDaysPropGetters API

Source: https://www.rehookify.com/datepicker/modular-hooks

Returns prop-getter functions for date selection, specifically the `dayButton` getter. This allows for easy attachment of necessary props to date elements for interaction.

```APIDOC
export type DPUseDaysPropGetters = (state: DPState) => {
  dayButton: (day: DPDay, config?: DPPropsGetterConfig) => DPPropGetter;
};
```

--------------------------------

### useDatePickerState API

Source: https://www.rehookify.com/datepicker/modular-hooks

Defines the core state management hook, its internal reducer state, actions, and the overall state structure provided to other hooks. It manages focus, range, offset dates, and year, along with dispatch capabilities.

```APIDOC
type UseDatePickerState = (config: DPUserConfig): DPState;

export interface DPReducerState {
  focusDate?: Date;
  rangeEnd: Date | null;
  offsetDate: Date;
  offsetYear: number;
}

export type DPReducerAction = DPSetFocusDate | DPSetOffsetDate | DPSetYearAction | DPSetRangeEndAction;

export interface DPState {
  dispatch: Dispatch<DPReducerAction>;
  state: DPReducerState;
  selectedDates: Date[];
  offsetDate: Date;
  config: DPConfig;
}

type DatePickerStateProviderValue = DPState;
```

--------------------------------

### DPMonth Interface - TypeScript

Source: https://www.rehookify.com/datepicker/state-data

Defines the structure for a month object, including its associated date, active state, disabled status, month name, current day indicator, and selection status. Month name formatting is configurable.

```TypeScript
interface DPMonth {
  $date: Date;
  active: boolean;
  disabled: boolean;
  month: string;
  now: boolean;
  selected: boolean;
}
```

--------------------------------

### React DatePicker Integration with Rehookify

Source: https://www.rehookify.com/datepicker/using-modular-hooks

This snippet shows how to set up a complete date range picker component in React. It utilizes the DatePickerStateProvider from '@rehookify/datepicker' to manage the state for selected dates and configure the date selection mode, minimum, and maximum dates. The component then renders the Calendar, Months, and Years sub-components.

```jsx
import React, { useState } from 'react';
import { DatePickerStateProvider } from '@rehookify/datepicker';

import { Calendar } from './Calendar';
import { Months } from './Months';
import { Years } from './Years';

export const DatePicker = () => {
  const now = new Date();
  const currentYear = now.getFullYear();
  const currentMonth = now.getMonth();
  const [selectedDates, onDatesChange] = useState<Date[]>([]);

  return (
    <DatePickerStateProvider
      config={{
        selectedDates,
        onDatesChange,
        dates: {
          mode: 'range',
          minDate: new Date(currentYear, currentMonth - 1, 1),
          maxDate: new Date(currentYear, currentMonth + 2, 0),
        }
      }}
    >
      <main>
        <Calendar />
        <Months />
        <Years />
      </main>
    </DatePickerStateProvider>
  );
}
```

--------------------------------

### Minimum and Maximum Date Limits

Source: https://www.rehookify.com/datepicker/dates-configuration

Details the 'minDate' and 'maxDate' properties used to restrict the selectable date range. Dates before 'minDate' or after 'maxDate' will be disabled.

```markdown
The `minDate` and `maxDate` properties set limits on selectable dates, months, and years:

* **minDate**: All dates preceding the `minDate` in the prop-getters will be disabled.
* **maxDate**: All dates succeeding the `maxDate` in the prop-getters will be disabled.

⚠️ Note: If `minDate > NOW`, the initial calendar will display the month containing `minDate`. Similarly, if `maxDate < NOW`, the initial calendar will show the month containing `maxDate`.
```

--------------------------------

### Date Range Configuration

Source: https://www.rehookify.com/datepicker/using-modular-hooks

Specifies the configuration for date selection within the datepicker. It sets the mode to 'range' and defines the minimum and maximum allowable dates, restricting selection to a specific period.

```TypeScript
dates: {
  mode: 'range',
  minDate: new Date(currentYear, currentMonth - 1, 1),
  maxDate: new Date(currentYear, currentMonth + 2, 0),
}
```

--------------------------------

### TimeButton Prop-Getter Type

Source: https://www.rehookify.com/datepicker/state-prop-getters

Defines the signature for the timeButton prop-getter. It accepts a DPTime object and an optional DPPropsGetterConfig, returning a DPPropGetter object for time elements.

```ts
type TimeButton = (
  time: DPTime,
  config?: DPPropsGetterConfig,
) => DPPropGetter;
```

--------------------------------

### Add Month Navigation to Rehookify Datepicker Calendar

Source: https://www.rehookify.com/datepicker/using-modular-hooks

Enhances the calendar component by adding month navigation capabilities. It integrates `useContextDatePickerOffsetPropGetters` to implement buttons for switching to the previous and next months, displaying the current month's name.

```jsx
import {
  useContextCalendars,
  useContextDaysPropGetters,
  useContextDatePickerOffsetPropGetters,
} from '@rehookify/datepicker';

const Calendar = () => {
  const { calendars, weekDays } = useContextCalendars();
  const { dayButton } = useContextDaysPropGetters();
  const {
    addOffset,
    subtractOffset
  } = useContextDatePickerOffsetPropGetters()

  const { days, month } = calendars[0];

  return (
    <section>
      <header>
        <div>
          <button
            {...subtractOffset({ months: 1 })}
            aria-label="Previous month"
          >
            &lt;
          </button>
          <p>{month}</p>
          <button
            {...addOffset({ months: 1 })}
            aria-label="Next month"
          >
            &gt;
          </button>
        </div>
        <ul>
          {weekDays.map((day) => (
            <li key={`${month}-${day}`}>{day}</li>
          ))}
        </ul>
      </header>
      <ul>
        {days.map((dpDay) => (
          <li key={dpDay.$date.toDateString()}>
            <button {...dayButton(dpDay)}>
              {dpDay.day}
            </button>
          </li>
        ))}
      </ul>
    </section>
  )
}
```

```jsx
import {
  useContextCalendars,
  useContextDaysPropGetters,
  useContextDatePickerOffsetPropGetters,
} from '@rehookify/datepicker';

const Calendar = () => {
  const { calendars, weekDays } = useContextCalendars();
  const { dayButton } = useContextDaysPropGetters();
  const {
    addOffset,
    subtractOffset
  } = useContextDatePickerOffsetPropGetters()

  const { days, month } = calendars[0];

  return (
    <section>
      <header>
        <div>
          <button
            {...subtractOffset({ months: 1 })}
            aria-label="Previous month"
          >
            &lt;
          </button>
          <p>{month}</p>
          <button
            {...addOffset({ months: 1 })}
            aria-label="Next month"
          >
            &gt;
          </button>
        </div>
        <ul>
          {weekDays.map((day) => (
            <li key={`${month}-${day}`}>{day}</li>
          ))}
        </ul>
      </header>
      <ul>
        {days.map((dpDay) => (
          <li key={dpDay.$date.toDateString()}>
            <button {...dayButton(dpDay)}>
              {dpDay.day}
            </button>
          </li>
        ))}
      </ul>
    </section>
  )
}
```

--------------------------------

### DPLocaleConfig Interface Definition

Source: https://www.rehookify.com/datepicker/locale-configuration

Defines the structure for locale configuration in the datepicker. It allows customization of date and time display formats, compatible with JavaScript's date.toLocaleString() and Intl.DateTimeFormatOptions.

```typescript
interface DPLocaleConfig {
  locale?: UnicodeBCP47LocaleIdentifier | Locale | (UnicodeBCP47LocaleIdentifier | Locale)[] | undefined;
  day?: "2-digit" | "numeric" | undefined;
  weekday?: "long" | "short" | "narrow" | undefined;
  monthName?: "numeric" | "2-digit" | "long" | "short" | "narrow" | undefined;
  year?: "numeric" | "2-digit" | undefined;
  hour?: "numeric" | "2-digit" | undefined;
  minute?: "numeric" | "2-digit" | undefined;
  second?: "numeric" | "2-digit" | undefined;
  hour12?: boolean | undefined;
  options?: Intl.DateTimeFormatOptions;
}
```

--------------------------------

### Default Datepicker Configuration Object

Source: https://www.rehookify.com/datepicker/configuration

This TypeScript code snippet illustrates the default configuration object for the datepicker. It defines the structure and default values for various aspects like dates, calendar, locale, and time settings. This object is used when no explicit configuration is passed to the datepicker component.

```TypeScript
const config: DPConfig = {
  focusDate: undefined,
  offsetDate: new Date(),
  onOffsetChange: undefined,
  dates: {
    limit: undefined,
    mode: 'single',
    minDate: undefined,
    maxDate: undefined,
    selectedDates: [],
    selectSameDate: false,
    toggle: false,
  },
  calendar: {
    mode: 'static',
    offsets: [0],
  },
  exclude: {
    day: [],
    date: [],
  },
  locale: {
    locale: 'en-GB',
    day: '2-digit',
    year: 'numeric',
    weekday: 'short',
    monthName: 'long',
    hour: '2-digit',
    minute: '2-digit',
    hour12: undefined,
    second: undefined,
  },
  time: {
    interval: 30,
    minTime: undefined,
    maxTime: undefined,
  },
  years: {
    mode: 'decade',
    numberOfYears: 12,
    step: 10,
  },
}
```

--------------------------------

### DPPropGetter Interface

Source: https://www.rehookify.com/datepicker/state-prop-getters

Defines the structure of the object returned by prop-getters. It includes accessibility properties like role, tabIndex, aria-disabled, aria-selected, and event handlers like onClick.

```ts
export interface DPPropGetter extends Record<string, unknown> {
  role: 'button';
  tabIndex: number;
  disabled?: boolean;
  'aria-disabled'?: boolean;
  'aria-selected'?: boolean;
  onClick?(evt: MouseEvent<HTMLElement>): void;
}
```

--------------------------------

### DPCalendar and DPDay Interfaces - TypeScript

Source: https://www.rehookify.com/datepicker/state-data

Defines the structure for a calendar object, containing an array of DPDay objects, the month name, and the year. DPDay represents an individual day with properties like its date, active state, day number, disabled status, month context, current day status, range information, and selection status.

```TypeScript
export type DPDayRange =
  | 'in-range'
  | 'range-start'
  | 'range-end'
  | 'range-start range-end'
  | 'will-be-in-range'
  | 'will-be-range-start'
  | 'will-be-range-end'
  | '';

interface DPDay {
  $date: Date;
  active: boolean;
  day: string;
  disabled: boolean;
  inCurrentMonth: boolean;
  now: boolean;
  range: DPDayRange;
  selected: boolean;
}

interface DPCalendar {
  days: DPDay[];
  month: string;
  year: string;
}
```

--------------------------------

### Combined State Management

Source: https://www.rehookify.com/datepicker/state

Demonstrates the combined state approach where all datepicker state aspects are collected into a single object returned by the `useDatepicker` hook. This provides a consolidated view of the datepicker's data and prop getters.

```javascript
const { data, propGetters } = useDatepicker({ /* configuration */});
```

--------------------------------

### Datepicker Locale Configuration Properties

Source: https://www.rehookify.com/datepicker/locale-configuration

Details the properties available for configuring locale-specific date and time formatting within the datepicker. These properties align with standard JavaScript internationalization practices.

```APIDOC
DPLocaleConfig Properties:

- locale: Specifies the locale(s) to use for formatting, accepting BCP 47 language tags or Locale objects. Can be a single locale or an array of locales.
  - Type: UnicodeBCP47LocaleIdentifier | Locale | (UnicodeBCP47LocaleIdentifier | Locale)[] | undefined

- day: Defines the format for the day of the month.
  - Allowed values: "2-digit", "numeric", undefined
  - Example: "2-digit" for '05', "numeric" for '5'

- weekday: Determines the format for the day of the week.
  - Allowed values: "long", "short", "narrow", undefined
  - Example: "long" for 'Monday', "short" for 'Mon', "narrow" for 'M'

- monthName: Specifies the format for the month name.
  - Allowed values: "numeric", "2-digit", "long", "short", "narrow", undefined
  - Example: "long" for 'January', "short" for 'Jan', "narrow" for 'J'

- year: Defines the format for the year.
  - Allowed values: "numeric", "2-digit", undefined
  - Example: "numeric" for '2023', "2-digit" for '23'

- hour: Determines the format for the hour component of time.
  - Allowed values: "numeric", "2-digit", undefined
  - Example: "2-digit" for '08' or '20'

- minute: Specifies the format for the minute component of time.
  - Allowed values: "numeric", "2-digit", undefined
  - Example: "2-digit" for '05'

- second: Defines the format for the second component of time.
  - Allowed values: "numeric", "2-digit", undefined
  - Example: "2-digit" for '09'

- hour12: Controls whether the 12-hour or 24-hour format is used for time.
  - Type: boolean | undefined
  - Example: `true` for 12-hour format (e.g., 01:12 pm), `false` for 24-hour format (e.g., 13:12).

- options: An object containing additional formatting options, mirroring Intl.DateTimeFormatOptions but excluding the `locale` field. This allows for fine-grained control over date and time presentation.
  - Type: Intl.DateTimeFormatOptions
  - Reference: MDN documentation for Intl.DateTimeFormatOptions
```

--------------------------------

### useMonths API

Source: https://www.rehookify.com/datepicker/modular-hooks

A data-centric hook that provides access to month data. It returns an array of month objects, essential for displaying month navigation or information within the datepicker.

```APIDOC
export type DPUseMonths = (state: DPState) => {
  months: DPMonth[];
};
```

--------------------------------

### DPWeekdays Type - TypeScript

Source: https://www.rehookify.com/datepicker/state-data

Represents an array of strings, where each string is the name of a day of the week. The format of these names can be customized via locale configuration.

```TypeScript
type DPWeekdays = string[];
```

--------------------------------

### useTimePropGetters Hook

Source: https://www.rehookify.com/datepicker/modular-hooks

Provides the timeButton prop-getter for time selection functionality. It allows generating props for time selection buttons.

```typescript
export type DPUseTimePropGetter = (state: DPState) => {
  timeButton: (time: DPTime, config?: DPPropsGetterConfig) => DPPropGetter;
};
```

--------------------------------

### useDays API

Source: https://www.rehookify.com/datepicker/modular-hooks

A data-centric hook that offers access to selected dates and their formatted representations within the datepicker. It retrieves dates based on the provided configuration.

```APIDOC
export type DPUseDays = (state: DPState) => {
  selectedDates: Date[];
  formattedDates: string[];
};
```

--------------------------------

### useCalendars API

Source: https://www.rehookify.com/datepicker/modular-hooks

Provides access to calendar data and week day names. This hook is data-centric, furnishing essential entities required for constructing a Calendar UI without interactive functionalities.

```APIDOC
type DPUseCalendars = (state: DPState) => {
  calendars: DPCalendar[];
  weekDays: string[];
};
```

--------------------------------

### DPData Interface - TypeScript

Source: https://www.rehookify.com/datepicker/state-data

Defines the overall data structure available within the datepicker. It includes arrays for calendars, formatted dates, months, selected dates, time entries, week days, and years.

```TypeScript
interface DPData {
  calendars: Calendar[];
  formattedDates: Date[];
  months: CalendarMonth[];
  selectedDates: Date[];
  time: Time[];
  weekDays: string[];
  years: CalendarYears[];
}
```

--------------------------------

### DPTime Interface Definition

Source: https://www.rehookify.com/datepicker/state-data

Defines the structure for time objects within the datepicker component. It includes properties for the date object ($date), time string (time), and boolean flags indicating if the time is current (now), disabled (disabled), or selected (selected). Related locale configurations can adjust time formatting.

```typescript
export interface DPTime {
  $date: Date;
  now: boolean;
  disabled: boolean;
  selected: boolean;
  time: string;
}
```

--------------------------------

### DPExcludeConfig Interface

Source: https://www.rehookify.com/datepicker/exclude-configuration

Defines the structure for excluding dates in the datepicker configuration. It allows specifying days of the week (0-6) or an array of specific Date objects to be disabled.

```TypeScript
export interface DPExcludeConfig {
  day?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
  date?: Date[];
}
```

--------------------------------

### useYearsPropGetters Hook

Source: https://www.rehookify.com/datepicker/modular-hooks

Provides prop-getters for year navigation, including yearButton, nextYearsButton, and previousYearsButton. These are used for controlling year selection and navigation.

```typescript
export type DPUseYearsPropGetters = (state: DPState) => {
  yearButton: (year: DPYear, config?: DPPropsGetterConfig) => DPPropGetter;
  nextYearsButton: (config?: DPPropsGetterConfig) => DPPropGetter;
  previousYearsButton: (config?: DPPropsGetterConfig) => DPPropGetter;
};
```

--------------------------------

### Maximum Number of Dates in Multiple Mode

Source: https://www.rehookify.com/datepicker/dates-configuration

Details the 'limit' property, which sets the maximum number of dates a user can select when the datepicker is configured in 'multiple' selection mode.

```markdown
This setting specifies the maximum number of dates a user can select in the `multiple` mode.
```
Tokens:
Raw