### Development and Build Commands

Source: https://github.com/hacker0x01/react-datepicker/blob/main/CLAUDE.md

Common CLI commands used for managing the development lifecycle, including dependency installation, starting the development server, and executing production builds.

```bash
yarn install
yarn start
yarn build
yarn build-dev
```

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

### Install React DatePicker

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Install the react-datepicker package using npm or yarn. This step is necessary before importing the component and its styles into your React application.

```bash
npm install react-datepicker --save
# or
yarn add react-datepicker
```

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

### Install react-datepicker dependency

Source: https://github.com/hacker0x01/react-datepicker/blob/main/README.md

Commands to install the react-datepicker package using common Node.js package managers.

```bash
npm install react-datepicker --save
```

```bash
yarn add react-datepicker
```

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

### Configure Advanced Timezone Scenarios

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/timezone.md

Examples of using the timeZone prop for specific use cases including time selection, date ranges, and inline calendar views.

```jsx
import DatePicker from "react-datepicker";

// Timezone Date and Time Picker
function TimezoneDateTimePicker() {
  const [date, setDate] = useState(new Date());
  return <DatePicker selected={date} onChange={setDate} showTimeSelect timeZone="Europe/London" dateFormat="MMMM d, yyyy h:mm aa" />;
}

// UTC Date Range Picker
function UTCDateRange() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);
  const onChange = (dates) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };
  return <DatePicker selected={startDate} onChange={onChange} startDate={startDate} endDate={endDate} selectsRange timeZone="UTC" />;
}

// Inline Calendar
function TokyoCalendar() {
  const [date, setDate] = useState(new Date());
  return <DatePicker selected={date} onChange={setDate} inline timeZone="Asia/Tokyo" />;
}
```

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

### Configure DatePicker event handlers

Source: https://github.com/hacker0x01/react-datepicker/blob/main/README.md

Examples of using onSelect and onChange event handlers to manage user interactions with the calendar.

```javascript
<DatePicker
  selected={date}
  onSelect={handleDateSelect}
  onChange={handleDateChange}
/>
```

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

### Install date-fns-tz dependency

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/timezone.md

The timeZone prop requires the date-fns-tz library as a peer dependency. Use npm or yarn to install it in your project.

```bash
npm install date-fns-tz
# or
yarn add date-fns-tz
```

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

### Implement monthHeaderPosition in React

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/month_header_position.md

Examples demonstrating how to apply the monthHeaderPosition prop to the DatePicker component to achieve different layout configurations.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";

// Example 1: Header in the middle (between day names and days)
const MiddlePositionExample = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  return <DatePicker selected={selectedDate} onChange={setSelectedDate} monthHeaderPosition="middle" />;
};

// Example 2: Header at the bottom
const BottomPositionExample = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  return <DatePicker selected={selectedDate} onChange={setSelectedDate} monthHeaderPosition="bottom" />;
};

// Example 3: Default position (top)
const DefaultPositionExample = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  return <DatePicker selected={selectedDate} onChange={setSelectedDate} monthHeaderPosition="top" />;
};
```

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

### Handle Date Ranges Across Timezones (React)

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/timezone.md

Illustrates how to manage date ranges with react-datepicker, ensuring consistency by normalizing start and end dates to the beginning and end of the day, respectively, in local time.

```jsx
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);

// Normalize dates to start/end of day in local time
const normalizeStartDate = (date) => {
  if (!date) return null;
  const d = new Date(date);
  d.setHours(0, 0, 0, 0);
  return d;
};

const normalizeEndDate = (date) => {
  if (!date) return null;
  const d = new Date(date);
  d.setHours(23, 59, 59, 999);
  return d;
};

<DatePicker
  selectsRange
  startDate={startDate}
  endDate={endDate}
  onChange={(dates) => {
    const [start, end] = dates;
    setStartDate(normalizeStartDate(start));
    setEndDate(normalizeEndDate(end));
  }}
/>;
```

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

### InputTime React Component Example

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/input_time.md

This snippet demonstrates the basic usage of the InputTime component. It shows how to pass an initial time string and highlights the component's role in managing time input within a React application. No external dependencies are required beyond React itself.

```jsx
<InputTime timeString="12:00" />
```

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

### Create Custom Calendar Container

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/imports-guide.md

Extending the default calendar container using the CalendarContainer component and its associated props.

```tsx
import { CalendarContainer } from "react-datepicker";
import type { CalendarContainerProps } from "react-datepicker";

const MyContainer = ({ className, children }: CalendarContainerProps) => (
  <div style={{ background: "#f0f0f0" }}>
    <CalendarContainer className={className}>{children}</CalendarContainer>
  </div>
);

<DatePicker calendarContainer={MyContainer} />;
```

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

### Initialize React Datepicker with CSS

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/imports-guide.md

Basic import statements required to initialize the react-datepicker component and its associated styles.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
```

```tsx
import "react-datepicker/dist/react-datepicker-cssmodules.css";
// or
import "react-datepicker/dist/react-datepicker.module.css";
```

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

### Implement Timezone-aware DatePicker

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/timezone.md

Demonstrates basic usage of the timeZone prop to force the DatePicker to operate in a specific IANA timezone regardless of the user's local settings.

```jsx
import DatePicker from "react-datepicker";

function MyComponent() {
  const [startDate, setStartDate] = useState(new Date());

  return <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} timeZone="America/New_York" />;
}
```

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

### Serialize Dates for Form Submission (React)

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/timezone.md

Demonstrates how to serialize JavaScript Date objects into different formats (ISO string, date-only string, Unix timestamp) for consistent form submissions, avoiding timezone issues.

```jsx
const handleChange = (date) => {
  // Option 1: Send as ISO string (includes timezone info)
  const isoString = date.toISOString(); // "2025-01-15T05:00:00.000Z"

  // Option 2: Send as date-only string (no timezone ambiguity)
  const dateOnly = date.toISOString().split("T")[0]; // "2025-01-15"

  // Option 3: Send as Unix timestamp
  const timestamp = date.getTime(); // 1736920800000
};
```

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

### Configure Localization

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/imports-guide.md

Registering and setting locales to support internationalization in the datepicker component.

```tsx
import { registerLocale, setDefaultLocale } from "react-datepicker";
import { es } from "date-fns/locale/es";

registerLocale("es", es);
setDefaultLocale("es");
<DatePicker locale="es" selected={date} onChange={setDate} />;
```

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

### Generate Numeric Ranges

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/imports-guide.md

Methods to generate arrays of numbers for dropdowns, either via the lodash library or a custom implementation.

```bash
npm install lodash
# or
yarn add lodash
```

```tsx
import range from "lodash/range";
const years = range(1990, 2030, 1);
```

```tsx
const range = (start: number, end: number, step: number = 1): number[] => {
  return Array.from({ length: (end - start) / step }, (_, i) => start + i * step);
};
const years = range(1990, 2030, 1);
```

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

### Implement Custom Header with TypeScript

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/imports-guide.md

Using ReactDatePickerCustomHeaderProps to define types for custom header components in react-datepicker.

```tsx
import type { ReactDatePickerCustomHeaderProps } from "react-datepicker";

const CustomHeader = ({ date, changeYear, changeMonth }: ReactDatePickerCustomHeaderProps) => {
  // Custom header implementation
};
```

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

### Convert UTC String to Local Date for Display in React

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/timezone.md

Demonstrates how to parse a UTC date string into a JavaScript Date object for display in the user's local timezone. It also shows how to convert this Date object back to a UTC ISO string when sending data to a server. This is crucial for applications dealing with data stored in UTC.

```jsx
// Convert UTC string to local Date for display
const utcDateString = "2025-01-15T10:30:00Z";
const date = new Date(utcDateString);

// When sending back to server, convert to UTC ISO string
const handleChange = (date) => {
  const utcString = date.toISOString(); // Always returns UTC
  sendToServer(utcString);
};

<DatePicker selected={date} onChange={handleChange} />;
```

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

### Create Timezone-Safe Dates (React)

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/timezone.md

Provides methods to create JavaScript Date objects that avoid timezone-related day boundary shifts, especially for date-only scenarios. It highlights the issue with parsing dates at midnight and offers a solution by creating dates at noon.

```jsx
// Instead of this (can shift days at timezone boundaries):
const date = new Date("2025-01-15"); // Parsed as UTC midnight

// Do this (noon local time is safe from day shifts):
const createLocalDate = (year, month, day) => {
  return new Date(year, month - 1, day, 12, 0, 0);
};

// Or parse a date string as local time:
const parseLocalDate = (dateString) => {
  const [year, month, day] = dateString.split("-").map(Number);
  return new Date(year, month - 1, day, 12, 0, 0);
};
```

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

### Handle Date Offsets in React DatePicker (TypeScript)

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Demonstrates how to prevent date shifts caused by timezone differences when submitting selected dates. It shows three methods: extracting local year, month, and day; using date-fns for formatting; and adjusting the date object before converting to an ISO string. This example uses React, useState, and date-fns.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import { format } from "date-fns";
import "react-datepicker/dist/react-datepicker.css";

const DateSubmissionExample = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  const handleSubmit = () => {
    if (!selectedDate) return;

    // Solution 1: Extract local date components
    const year = selectedDate.getFullYear();
    const month = String(selectedDate.getMonth() + 1).padStart(2, "0");
    const day = String(selectedDate.getDate()).padStart(2, "0");
    const dateString = `${year}-${month}-${day}`; // "2024-01-15"

    // Solution 2: Use date-fns format (recommended)
    const formattedDate = format(selectedDate, "yyyy-MM-dd"); // "2024-01-15"

    // Solution 3: Adjust for timezone offset
    const offsetDate = new Date(
      selectedDate.getTime() - selectedDate.getTimezoneOffset() * 60000
    );
    const isoString = offsetDate.toISOString(); // "2024-01-15T00:00:00.000Z"

    console.log({ dateString, formattedDate, isoString });
  };

  return (
    <div>
      <DatePicker
        selected={selectedDate}
        onChange={(date) => setSelectedDate(date)}
      />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default DateSubmissionExample;
```

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

### Debug Date Off-by-one Errors

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/timezone.md

Illustrates why JavaScript Date objects may appear to be off by one day when converted to ISO strings due to UTC conversion from local midnight.

```javascript
const selectedDate = /* Sep 10, 2017 00:00:00 local time (UTC-3) */;
console.log(selectedDate.toISOString());
// Output: "2017-09-09T21:00:00.000Z"
```

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

### Manipulate Dates with date-fns

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/imports-guide.md

Common date-fns functions used for date arithmetic, time setting, and formatting within react-datepicker implementations.

```tsx
import { getYear, getMonth, addDays, subDays, setHours, setMinutes } from "date-fns";

const year = getYear(new Date());
const tomorrow = addDays(new Date(), 1);
const nineAM = setHours(setMinutes(new Date(), 0), 9);
```

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

### React Inline Date Range Selection

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Allows selecting a date range directly within a single, always-visible calendar using the `selectsRange` and `inline` props. The `onChange` prop receives an array containing the start and end dates.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const InlineDateRange = () => {
  const [startDate, setStartDate] = useState<Date | null>(new Date());
  const [endDate, setEndDate] = useState<Date | null>(null);

  const onChange = (dates: [Date | null, Date | null]) => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
  };

  return (
    <DatePicker
      selected={startDate}
      onChange={onChange}
      startDate={startDate}
      endDate={endDate}
      selectsRange
      inline
    />
  );
};

export default InlineDateRange;
```

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

### Format Date in Specific Timezone using date-fns-tz in React

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/timezone.md

Shows how to display dates in a specific timezone, rather than the user's local timezone, using the date-fns-tz library. It involves converting a UTC Date object to a zoned time and then formatting it with timezone information. This is essential for applications requiring consistent timezone display.

```jsx
import { formatInTimeZone, toZonedTime } from "date-fns-tz";

// Display a date in a specific timezone
const timeZone = "America/New_York";
const utcDate = new Date(); // Current time in UTC

// Convert to the target timezone for display
const zonedDate = toZonedTime(utcDate, timeZone);

// Format with timezone
const formatted = formatInTimeZone(utcDate, timeZone, "yyyy-MM-dd HH:mm:ss zzz");
```

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

### Format Date using date-fns in React

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/timezone.md

Formats a JavaScript Date object into a 'yyyy-MM-dd' string using the date-fns library. This provides a convenient and reliable way to format dates in local time, especially when date-fns is already a project dependency. Requires importing the 'format' function.

```jsx
import { format } from "date-fns";

const handleChange = (date) => {
  // Format the date in local time
  const dateString = format(date, "yyyy-MM-dd"); // "2017-09-10"
  sendToServer(dateString);
};
```

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

### Adjust Date for Timezone Offset to ISO String in React

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/timezone.md

Converts a JavaScript Date object to an ISO string that represents the local date at midnight UTC. This is useful when an ISO string is required and you need to account for the user's timezone offset. It manipulates the Date object's time value.

```jsx
const handleChange = (date) => {
  // Adjust for timezone offset to get the "intended" UTC date
  const offsetDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
  const isoString = offsetDate.toISOString(); // "2017-09-10T00:00:00.000Z"

  sendToServer(isoString);
};
```

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

### Testing and Quality Assurance Commands

Source: https://github.com/hacker0x01/react-datepicker/blob/main/CLAUDE.md

Commands for running the test suite, linting, and type checking to ensure code quality and compliance with project standards.

```bash
yarn test
yarn lint
yarn type-check
yarn prettier
```

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

### Get Localized Date String (YYYY-MM-DD) in React

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/timezone.md

Retrieves a localized date string from a JavaScript Date object, specifically formatted as 'YYYY-MM-DD' using the 'en-CA' locale. This method leverages the browser's built-in internationalization capabilities for date formatting. It's a concise way to get a standardized date string.

```jsx
const handleChange = (date) => {
  // Get localized date string
  const dateString = date.toLocaleDateString("en-CA"); // "2017-09-10" (YYYY-MM-DD format)
  sendToServer(dateString);
};
```

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

### Component: month_year_dropdown_options

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/month_year_dropdown_options.md

Configuration and property definitions for the month_year_dropdown_options component.

```APIDOC
## COMPONENT month_year_dropdown_options

### Description
A component used to render month and year dropdown options within the datepicker interface.

### Parameters
- **date** (required) - The current date object.
- **dateFormat** (required) - The format string for displaying dates.
- **locale** (optional) - The locale string for localization.
- **maxDate** (optional) - The maximum selectable date.
- **minDate** (optional) - The minimum selectable date.
- **onCancel** (required) - Callback function triggered when the action is cancelled.
- **onChange** (required) - Callback function triggered when the date selection changes.
- **scrollableMonthYearDropdown** (optional) - Boolean to enable a scrollable dropdown interface.

### Usage Example
<month_year_dropdown_options 
  date={new Date()} 
  dateFormat="MM/yyyy" 
  onCancel={() => {}} 
  onChange={(date) => {}} 
/>
```

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

### React Datepicker Configuration Options

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/index.md

This section details various configuration options available for the react-datepicker component, including display settings, date range selections, and user interaction behaviors.

```APIDOC
## React Datepicker Configuration Options

### Description
This section details various configuration options available for the react-datepicker component, including display settings, date range selections, and user interaction behaviors.

### Method
N/A (Configuration Options)

### Endpoint
N/A (Component Configuration)

### Parameters
#### Component Props
- **selectsDisabledDaysInRange** (boolean) - Optional - If true, days within a selected range will be disabled.
- **shouldCloseOnSelect** (boolean) - Optional - If true, the datepicker will close after a date is selected. Defaults to `true`.
- **showDateSelect** (boolean) - Optional - If true, displays a date selection dropdown.
- **showFourColumnMonthYearPicker** (boolean) - Optional - If true, displays a four-column month-year picker. Defaults to `false`.
- **showFullMonthYearPicker** (boolean) - Optional - If true, displays a full month-year picker. Defaults to `false`.
- **showIcon** (boolean) - Optional - If true, displays an icon for the datepicker.
- **showMonthYearPicker** (boolean) - Optional - If true, displays a month-year picker. Defaults to `false`.
- **showPopperArrow** (boolean) - Optional - If true, displays an arrow for the popper. Defaults to `true`.
- **showPreviousMonths** (boolean) - Optional - If true, displays previous months. Defaults to `false`.
- **showQuarterYearPicker** (boolean) - Optional - If true, displays a quarter-year picker. Defaults to `false`.
- **showTimeInput** (boolean) - Optional - If true, displays an input for time selection. Defaults to `false`.
- **showTimeSelect** (boolean) - Optional - If true, displays a time selection dropdown. Defaults to `false`.
- **showTwoColumnMonthYearPicker** (boolean) - Optional - If true, displays a two-column month-year picker. Defaults to `false`.
- **showWeekPicker** (boolean) - Optional - If true, displays a week picker. Defaults to `false`.
- **showYearPicker** (boolean) - Optional - If true, displays a year picker. Defaults to `false`.
- **startDate** (Date object) - Optional - The start date for the datepicker.
- **startOpen** (boolean) - Optional - If true, the datepicker will open initially.
- **strictParsing** (boolean) - Optional - If true, parsing will be strict. Defaults to `false`.
- **swapRange** (boolean) - Optional - If true, the date range will be swapped. Defaults to `false`.
- **tabIndex** (number) - Optional - The tab index for the datepicker input.
- **timeCaption** (string) - Optional - The caption for the time input. Defaults to `"Time"`.
- **timeInputLabel** (string) - Optional - The label for the time input. Defaults to `"Time"`.
- **timeIntervals** (number) - Optional - The interval for time selection in minutes. Defaults to `30`.
- **title** (string) - Optional - The title for the datepicker.
- **toggleCalendarOnIconClick** (boolean) - Optional - If true, toggles the calendar on icon click. Defaults to `false`.
- **usePointerEvent** (boolean) - Optional - If true, uses pointer events for interaction. Defaults to `false`.
- **value** (any) - Optional - The current value of the datepicker.
- **withPortal** (boolean) - Optional - If true, the datepicker will render within a portal. Defaults to `false`.
- **yearItemNumber** (number) - Optional - The number of years to display in the year picker. Defaults to `12`.
- **rangeSeparator** (string) - Optional - The separator string used between dates in a range. Defaults to `" - "`.

### Request Example
N/A (Component Configuration)

### Response
N/A (Component Configuration)

```

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

### Component Props: Datepicker

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/datepicker.md

Configuration options and properties for the Datepicker component.

```APIDOC
## Datepicker Component Props

### Description
The Datepicker component provides a flexible interface for date selection in React applications. This documentation outlines the available configuration props.

### Parameters
#### Component Props
- **allowSameDay** (bool) - Optional - Allows selecting the same day as the start date. Default: false.
- **ariaDescribedBy** (string) - Optional - Sets the aria-describedby attribute for accessibility. Default: null.
- **ariaInvalid** (string) - Optional - Sets the aria-invalid attribute. Default: null.
- **ariaLabelledBy** (string) - Optional - Sets the aria-labelledby attribute. Default: null.
- **ariaRequired** (string) - Optional - Sets the aria-required attribute. Default: null.
- **autoComplete** (string) - Optional - Sets the HTML autocomplete attribute.
- **autoFocus** (bool) - Optional - Automatically focuses the input on mount.
- **calendarClassName** (string) - Optional - Custom CSS class for the calendar container.
- **children** (node) - Optional - Custom content to render within the component.
- **className** (string) - Optional - Custom CSS class for the input element.

### Usage Example
<DatePicker 
  allowSameDay={true} 
  autoFocus={true} 
  className="my-datepicker" 
/>
```

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

### Basic DatePicker Implementation in React

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Demonstrates the basic usage of the DatePicker component in React. It requires a controlled state using the `selected` and `onChange` props to manage the currently selected date.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const BasicDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date: Date | null) => setSelectedDate(date)}
    />
  );
};

export default BasicDatePicker;
```

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

### Implement basic DatePicker component

Source: https://github.com/hacker0x01/react-datepicker/blob/main/README.md

A standard implementation of the DatePicker component using React hooks to manage state and importing necessary CSS styles.

```javascript
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const Example = () => {
  const [startDate, setStartDate] = useState(new Date());
  return <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />;
};
```

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

### Render Inline Calendar and Portal Mode

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Demonstrates layout configurations for the DatePicker. The inline prop renders the calendar directly in the document flow, while withPortal renders it in a portal to prevent overflow issues.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const InlineCalendar = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
  return <DatePicker selected={selectedDate} onChange={(date) => setSelectedDate(date)} inline />;
};

const PortalDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
  return <DatePicker selected={selectedDate} onChange={(date) => setSelectedDate(date)} withPortal />;
};
```

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

### Import common utilities and types

Source: https://github.com/hacker0x01/react-datepicker/blob/main/README.md

Standard imports for date manipulation via date-fns, utility functions, and TypeScript type definitions for custom headers.

```javascript
import { getYear, getMonth, addDays, subDays, setHours, setMinutes } from "date-fns";
import range from "lodash/range";
```

```typescript
import type { ReactDatePickerCustomHeaderProps } from "react-datepicker";
```

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

### Configure localization for DatePicker

Source: https://github.com/hacker0x01/react-datepicker/blob/main/README.md

Setting up internationalization by registering a locale from date-fns and applying it to the component.

```javascript
import { registerLocale, setDefaultLocale } from  "react-datepicker";
import { es } from 'date-fns/locale/es';
registerLocale('es', es)

<DatePicker
  locale="es"
/>
```

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

### Format Date to Local Date String (YYYY-MM-DD) in React

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/timezone.md

Extracts the date portion from a JavaScript Date object and formats it as a 'YYYY-MM-DD' string based on the user's local time. This is recommended for date-only fields where time is not relevant. It uses native JavaScript Date methods.

```jsx
const handleChange = (date) => {
  // Get the date in YYYY-MM-DD format based on local time
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const dateString = `${year}-${month}-${day}`; // "2017-09-10"

  sendToServer(dateString);
};

<DatePicker selected={date} onChange={handleChange} />;
```

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

### tether_component Props

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/tether_component.md

Configuration properties for the tether_component to control positioning, styling, and rendering behavior.

```APIDOC
## COMPONENT tether_component

### Description
The `tether_component` is used to position elements relative to a target element, commonly used for dropdowns or datepicker overlays.

### Parameters
- **attachment** (enum) - Required - The attachment point on the tethered element.
- **children** (custom) - Optional - The content to be rendered within the tether.
- **className** (string) - Optional - CSS class name for the component.
- **classPrefix** (string) - Optional - Prefix for CSS classes.
- **classes** (object) - Optional - Custom class mappings.
- **constraints** (array) - Optional - Positioning constraints.
- **enabled** (bool) - Optional - Whether the tether is enabled.
- **id** (string) - Optional - DOM ID for the element.
- **offset** (string) - Optional - Offset of the tethered element.
- **optimizations** (object) - Optional - Performance optimization settings.
- **renderElementTag** (string) - Optional - HTML tag for the element (default: 'div').
- **renderElementTo** (any) - Optional - Target DOM node for rendering.
- **style** (object) - Optional - Inline styles.
- **targetAttachment** (enum) - Optional - The attachment point on the target element.
- **targetModifier** (string) - Optional - Modifier for the target.
- **targetOffset** (string) - Optional - Offset of the target element.

### Request Example
{
  "attachment": "top left",
  "targetAttachment": "bottom left",
  "enabled": true
}

### Response
#### Success Response (200)
- **status** (string) - Component rendered successfully.
```

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

### Render Calendar Icon with CSS Class (React)

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/calendar_icon.md

Demonstrates how to use the CalendarIcon component with a CSS class to represent the calendar icon. It also shows how to attach an onClick handler.

```jsx
<CalendarIcon icon="my-icon-class" onClick={myClickHandler} />
```

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

### Render Calendar Icon with React Node (React)

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/calendar_icon.md

Illustrates using a custom React node (e.g., another component) as the icon for the CalendarIcon component. An onClick handler is also included.

```jsx
<CalendarIcon icon={<MyIconComponent />} onClick={myClickHandler} />
```

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

### Set Minimum Time in React-Datepicker

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/datepicker.md

The `minTime` prop accepts an instance of the `Date` object to define the earliest selectable time on a given day. Times before `minTime` will be disabled.

```javascript
minTime={new Date(2023, 10, 20, 8, 0, 0) // Example: November 20, 2023, 8:00 AM}
```

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

### Implement Custom Input Component with React Datepicker

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Replaces the default text input with a custom React component. Requires the use of forwardRef to ensure the DatePicker can properly manage focus and interaction.

```tsx
import React, { useState, forwardRef } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

type CustomInputProps = {
  value?: string;
  onClick?: () => void;
  className?: string;
};

const CustomInput = forwardRef<HTMLButtonElement, CustomInputProps>(
  ({ value, onClick, className }, ref) => (
    <button type="button" className={className} onClick={onClick} ref={ref}>
      {value || "Click to select date"}
    </button>
  )
);
CustomInput.displayName = "CustomInput";

const CustomInputExample = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      customInput={<CustomInput className="custom-date-button" />}
    />
  );
};

export default CustomInputExample;
```

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

### Import React DatePicker CSS

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Import the required CSS styles for react-datepicker. This ensures the datepicker is displayed correctly with its default styling. CSS Modules support is also available.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

// For CSS Modules support:
// import "react-datepicker/dist/react-datepicker-cssmodules.css";
```

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

### Create Custom Header with Dropdowns in React Datepicker

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Utilizes the renderCustomHeader prop to build a navigation header with year and month dropdowns. This implementation relies on date-fns for date manipulation and provides full control over calendar navigation.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import type { ReactDatePickerCustomHeaderProps } from "react-datepicker";
import { getYear, getMonth } from "date-fns";
import "react-datepicker/dist/react-datepicker.css";

const range = (start: number, end: number): number[] =>
  Array.from({ length: end - start }, (_, i) => start + i);

const MONTHS = [
  "January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December",
];

const years = range(1990, getYear(new Date()) + 1);

const CustomHeader = ({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }: ReactDatePickerCustomHeaderProps) => (
  <div style={{ margin: 10, display: "flex", justifyContent: "center" }}>
    <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>{"<"}</button>
    <select value={getYear(date)} onChange={({ target: { value } }) => changeYear(+value)}>
      {years.map((option) => <option key={option} value={option}>{option}</option>)}
    </select>
    <select value={MONTHS[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(MONTHS.indexOf(value))}>
      {MONTHS.map((option) => <option key={option} value={option}>{option}</option>)}
    </select>
    <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>{">"}</button>
  </div>
);

const CustomHeaderExample = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
  return <DatePicker renderCustomHeader={CustomHeader} selected={selectedDate} onChange={(date) => setSelectedDate(date)} />;
};

export default CustomHeaderExample;
```

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

### Popper Component Props

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/popper_component.md

This section details the various props available for the `popper_component`, which controls the behavior and appearance of the datepicker's popup element.

```APIDOC
## Popper Component Props

### Description
Configuration options for the popper component that manages the datepicker's popup.

### Method
N/A (Component Props)

### Endpoint
N/A (Component Props)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A

### Props
- **className** (string) - Optional - Custom CSS class for the popper element.
- **enableTabLoop** (bool) - Optional - Enables tab key looping within the popper.
- **hidePopper** (bool) - Optional - Controls the visibility of the popper. Defaults to `true`.
- **popperComponent** (element) - Optional - A custom React element to use as the popper.
- **popperContainer** (func) - Optional - A function to specify the container for the popper.
- **popperModifiers** (arrayOf[object Object]) - Optional - Array of modifiers for the Popper.js instance. Defaults to `[]`.
- **popperOnKeyDown** (func) - Optional - Callback function for keydown events within the popper.
- **popperPlacement** (enumpopperPlacementPositions) - Optional - Placement of the popper relative to its target. Defaults to `"bottom-start"`.
- **popperProps** (object) - Optional - Additional props to pass to the underlying Popper.js instance. Defaults to `{}`.
- **portalHost** (instanceOfShadowRoot) - Optional - The ShadowRoot to use as the portal host.
- **portalId** (string) - Optional - The ID for the portal element.
- **targetComponent** (element) - Optional - The target element for the popper.
- **wrapperClassName** (string) - Optional - Custom CSS class for the wrapper around the popper.
```

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

### Display Multiple Months with React Datepicker

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Configures the calendar to show multiple months simultaneously using the monthsShown prop. This improves user experience for selecting date ranges spanning across months.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const MultiMonthPicker = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      monthsShown={2}
    />
  );
};

export default MultiMonthPicker;
```

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

### Enable time selection in DatePicker

Source: https://github.com/hacker0x01/react-datepicker/blob/main/README.md

Configuring the DatePicker to include a time selection interface using the showTimeSelect prop.

```javascript
<DatePicker selected={date} onChange={handleDateChange} showTimeSelect dateFormat="Pp" />
```

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

### Implement Month Picker Mode

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Configures the DatePicker to select months instead of specific days by enabling the showMonthYearPicker prop.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const MonthPicker = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      dateFormat="MM/yyyy"
      showMonthYearPicker
    />
  );
};
```

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

### Set Minimum Date in React-Datepicker

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/datepicker.md

The `minDate` prop accepts an instance of the `Date` object to define the earliest selectable date in the datepicker. Dates prior to `minDate` will be disabled.

```javascript
minDate={new Date('2023-01-01')}
```

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

### Highlight Specific Dates

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Visually emphasizes specific dates on the calendar without restricting selection, using the highlightDates prop.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import { addDays, subDays } from "date-fns";
import "react-datepicker/dist/react-datepicker.css";

const HighlightDates = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  const highlightDates = [
    subDays(new Date(), 7),
    addDays(new Date(), 7),
  ];

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      highlightDates={highlightDates}
      placeholderText="Highlights a week ago and a week from today"
    />
  );
};

export default HighlightDates;
```

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

### Display Holidays

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Displays holiday markers on the calendar by passing an array of objects containing date strings and holiday names to the holidays prop.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

type Holiday = {
  date: string;
  holidayName: string;
};

const HolidayDates = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  const holidays: Holiday[] = [
    { date: "2024-01-01", holidayName: "New Year's Day" },
    { date: "2024-12-25", holidayName: "Christmas" },
    { date: "2024-11-28", holidayName: "Thanksgiving Day" },
    { date: "2024-07-04", holidayName: "Independence Day" },
  ];

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      holidays={holidays}
      placeholderText="Calendar with holidays"
    />
  );
};

export default HolidayDates;
```

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

### Configure Localization for React Datepicker

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Supports internationalization by registering locales from date-fns and applying them via the locale prop. This ensures the calendar displays labels in the user's preferred language.

```tsx
import React, { useState } from "react";
import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
import { es } from "date-fns/locale/es";
import { fr } from "date-fns/locale/fr";
import "react-datepicker/dist/react-datepicker.css";

registerLocale("es", es);
registerLocale("fr", fr);

const LocalizedDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      locale="es"
      placeholderText="Selecciona una fecha"
    />
  );
};

export default LocalizedDatePicker;
```

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

### React DatePicker for Date Range Selection

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Implements date range selection using two coordinated DatePicker components. The `selectsStart`, `selectsEnd`, `startDate`, and `endDate` props are used to link the two pickers and manage the selected range.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const DateRangePicker = () => {
  const [startDate, setStartDate] = useState<Date | null>(new Date());
  const [endDate, setEndDate] = useState<Date | null>(null);

  return (
    <>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
        selectsStart
        startDate={startDate}
        endDate={endDate}
        placeholderText="Start Date"
      />
      <DatePicker
        selected={endDate}
        onChange={(date) => setEndDate(date)}
        selectsEnd
        startDate={startDate}
        endDate={endDate}
        minDate={startDate}
        placeholderText="End Date"
      />
    </>
  );
};

export default DateRangePicker;
```

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

### Inject Custom Times into React Datepicker

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Allows developers to define specific selectable time slots using the injectTimes prop. This is ideal for scheduling systems with restricted availability.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import { setHours, setMinutes, setSeconds } from "date-fns";
import "react-datepicker/dist/react-datepicker.css";

const InjectTimes = () => {
  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(
    setHours(setMinutes(new Date(), 30), 16)
  );

  const injectTimes: Date[] = [
    setHours(setMinutes(setSeconds(new Date(), 10), 1), 0),
    setHours(setMinutes(new Date(), 5), 12),
    setHours(setMinutes(new Date(), 59), 23),
  ];

  return (
    <DatePicker
      selected={selectedDateTime}
      onChange={(date) => setSelectedDateTime(date)}
      showTimeSelect
      timeFormat="HH:mm:ss"
      injectTimes={injectTimes}
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
};

export default InjectTimes;
```

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

### Configure Holidays in React-Datepicker

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/datepicker.md

The `holidays` prop allows you to specify a list of holidays to be displayed in the datepicker. Each holiday is an object with a `date` (in 'yyyy-mm-dd' format) and a `holidayName`. If multiple holidays fall on the same date, their names will be displayed as a comma-separated string.

```javascript
holidays={
  [
    { date: '2023-08-15', holidayName: "Holiday 1" },
    { date: '2023-12-31', holidayName: "Holiday 2" }
  ]
}
```

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

### React DatePicker with Time Selection

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Enables time selection alongside date picking by using the `showTimeSelect` prop. Additional props like `timeFormat`, `timeIntervals`, `timeCaption`, and `dateFormat` can be used to configure the time display and selection.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const DateTimePicker = () => {
  const [selectedDateTime, setSelectedDateTime] = useState<Date | null>(new Date());

  return (
    <DatePicker
      selected={selectedDateTime}
      onChange={(date) => setSelectedDateTime(date)}
      showTimeSelect
      timeFormat="HH:mm"
      timeIntervals={15}
      timeCaption="Time"
      dateFormat="MMMM d, yyyy h:mm aa"
    />
  );
};

export default DateTimePicker;
```

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

### Define monthHeaderPosition Type

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/month_header_position.md

The TypeScript type definition for the monthHeaderPosition prop, accepting one of three string literals to determine header placement.

```typescript
monthHeaderPosition?: "top" | "middle" | "bottom";
```

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

### Set Locale for React-Datepicker

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/datepicker.md

The `locale` prop accepts a string representing the locale to be used for date formatting and language within the datepicker. This allows for internationalization.

```javascript
locale="en-US"
```

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

### Implement Year Picker with React Datepicker

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Enables a year-specific selection mode using the showYearPicker prop. This is useful for applications requiring birth year or historical date selection.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const YearPicker = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      showYearPicker
      dateFormat="yyyy"
    />
  );
};

export default YearPicker;
```

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

### Restrict Date Range with minDate and maxDate

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Limits the selectable date range by providing minimum and maximum date boundaries. It uses date-fns to calculate relative dates from the current time.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import { addDays, subDays } from "date-fns";
import "react-datepicker/dist/react-datepicker.css";

const DateConstraints = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      minDate={subDays(new Date(), 5)}
      maxDate={addDays(new Date(), 5)}
      placeholderText="Select a date within 5 days"
    />
  );
};

export default DateConstraints;
```

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

### Include Specific Dates Only

Source: https://context7.com/hacker0x01/react-datepicker/llms.txt

Restricts the calendar to allow selection only for dates explicitly provided in the includeDates array.

```tsx
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import { addDays } from "date-fns";
import "react-datepicker/dist/react-datepicker.css";

const IncludeDates = () => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);

  const includeDates = [new Date(), addDays(new Date(), 1)];

  return (
    <DatePicker
      selected={selectedDate}
      onChange={(date) => setSelectedDate(date)}
      includeDates={includeDates}
      placeholderText="This only includes today and tomorrow"
    />
  );
};

export default IncludeDates;
```

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

### Implement TabLoop Component in React

Source: https://github.com/hacker0x01/react-datepicker/blob/main/docs/tab_loop.md

The TabLoop component wraps child elements to enforce a focus trap. It accepts an enableTabLoop boolean prop to toggle the behavior, preventing focus from leaving the component via the Tab key.

```jsx
<TabLoop enableTabLoop={true}>
  <ChildComponent />
</TabLoop>
```