### Start Example App Packager

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/CONTRIBUTING.md

Starts the Metro server for the example application. Changes in JavaScript code will be reflected without a rebuild.

```sh
yarn example start
```

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

### Run Example App on Web

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/CONTRIBUTING.md

Builds and runs the example application in a web browser.

```sh
yarn example web
```

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

### Install Project Dependencies

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/CONTRIBUTING.md

Run this command in the root directory to install all necessary dependencies for the project.

```sh
yarn
```

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

### Range Mode Configuration Example

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/configuration.md

Configure the datepicker for range selection. This example demonstrates setting the mode to 'range' and handling the selection of start and end dates, along with minimum and maximum range lengths.

```typescript
<DateTimePicker
  mode="range"
  startDate={startDate}
  endDate={endDate}
  onChange={({ startDate, endDate }) => {
    setStartDate(startDate);
    setEndDate(endDate);
  }}
  min={1}
  max={30}
/>
```

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

### Install react-native-ui-datepicker with yarn

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/README.md

Use this command to install the library using yarn.

```sh
yarn add react-native-ui-datepicker
```

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

### Install Optional jalali-plugin-dayjs

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/INTEGRATION_GUIDE.md

Install the jalali-plugin-dayjs for enhanced localization and calendar support if needed. This is often included but can be installed explicitly.

```bash
npm install jalali-plugin-dayjs
```

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

### Install react-native-ui-datepicker with npm

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/README.md

Use this command to install the library using npm.

```sh
npm install react-native-ui-datepicker
```

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

### Bootstrap Project

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/CONTRIBUTING.md

Installs all project dependencies and pods, setting up the development environment.

```sh
yarn bootstrap
```

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

### Install react-native-ui-datepicker and dayjs

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/INTEGRATION_GUIDE.md

Install the datepicker library and its peer dependency dayjs using npm or yarn. Ensure React and React Native are already installed.

```bash
npm install react-native-ui-datepicker dayjs
# or
yarn add react-native-ui-datepicker dayjs
```

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

### Complete DateTimePicker Configuration Example

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/configuration.md

A comprehensive example demonstrating the full configuration of the DateTimePicker component, including modes, dates, constraints, display options, layout, styling, and navigation controls.

```typescript
import { useState } from 'react';
import DateTimePicker, { 
  DateType, 
  useDefaultStyles,
  useDefaultClassNames 
} from 'react-native-ui-datepicker';

export function FullyConfiguredPicker() {
  const [startDate, setStartDate] = useState<DateType>();
  const [endDate, setEndDate] = useState<DateType>();
  const styles = useDefaultStyles();
  const classNames = useDefaultClassNames();
  
  const today = new Date();
  const maxDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());

  return (
    <DateTimePicker
      // Mode and calendar
      mode="range"
      calendar="gregory"
      locale="en"
      numerals="latn"
      timeZone="America/New_York"

      // Data
      startDate={startDate}
      endDate={endDate}
      onChange={({ startDate, endDate }) => {
        setStartDate(startDate);
        setEndDate(endDate);
      }}

      // Constraints
      minDate={today}
      maxDate={maxDate}
      min={1}
      max={30}
      firstDayOfWeek={0}

      // Display
      initialView="day"
      showOutsideDays={true}
      weekdaysFormat="short"
      monthsFormat="full"
      monthCaptionFormat="full"
      navigationPosition="around"

      // Layout
      containerHeight={350}
      weekdaysHeight={30}
      hideHeader={false}
      hideWeekdays={false}

      // Styling
      styles={styles}
      classNames={classNames}

      // Navigation control
      month={6}
      year={2025}
      onMonthChange={(month) => console.log('Month:', month)}
      onYearChange={(year) => console.log('Year:', year)}
    />
  );
}
```

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

### Run Example App on Android

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/CONTRIBUTING.md

Builds and runs the example application on an Android device or emulator. Native code changes require a rebuild.

```sh
yarn example android
```

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

### Run Example App on iOS

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/CONTRIBUTING.md

Builds and runs the example application on an iOS simulator or device. Native code changes require a rebuild.

```sh
yarn example ios
```

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

### Install Project Dependencies

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/example/README.md

Run this command in your project's root directory to install all necessary npm packages.

```bash
npm install
```

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

### Install react-native-ui-datepicker

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/README.md

Install the datepicker component and its peer dependency dayjs using npm.

```bash
npm install react-native-ui-datepicker dayjs
```

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

### Install Dayjs for Timezone Support

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/INTEGRATION_GUIDE.md

To enable timezone functionality, install the `dayjs` library. This is a prerequisite for configuring timezones.

```bash
npm install dayjs
```

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

### Start the Expo Development Server

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/example/README.md

Initiates the Expo development server, providing options to open the app on various platforms or simulators.

```bash
npx expo start
```

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

### Integration Guide

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/VERIFICATION_REPORT.txt

Instructions and patterns for setting up and integrating the datepicker into React Native applications.

```APIDOC
## Integration Guide

### Description
This guide covers the setup process and various integration patterns for using the React Native UI Datepicker within your projects.

### Topics Covered:
- Installation instructions.
- Quick start guide.
- Component and hook usage.
- Advanced integration patterns.
- Testing strategies.

### Examples
Includes 20 code examples showcasing different integration scenarios.

### Source File
Detailed information can be found in `INTEGRATION_GUIDE.md`.
```

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

### Complete Custom Component Example

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/CalendarContext.md

Demonstrates how to create a fully custom calendar component by overriding default elements like days, months, years, and weekdays. This example shows how to use `useCalendarContext` to access selection and navigation functions within custom components.

```typescript
import React from 'react';
import { View, Text, Pressable, ScrollView } from 'react-native';
import DateTimePicker, { 
  DateType, 
  CalendarDay, 
  CalendarMonth, 
  CalendarYear, 
  CalendarWeek, 
  CalendarComponents, 
  useCalendarContext, 
  useDefaultStyles,
} from 'react-native-ui-datepicker';
import dayjs from 'dayjs';

// Custom day with better visual feedback
const CustomDay = (day: CalendarDay) => {
  const context = useCalendarContext();

  return (
    <Pressable 
      onPress={() => context.onSelectDate(dayjs(day.date).toDate())}
      disabled={day.isDisabled}
      style={{
        flex: 1,
        padding: 10,
        margin: 2,
        borderRadius: 8,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: day.isSelected 
          ? '#4CAF50' 
          : day.isToday 
            ? '#FFC107' 
            : day.isCurrentMonth 
              ? '#F5F5F5' 
              : '#FAFAFA',
        opacity: day.isDisabled ? 0.5 : 1,
        borderWidth: day.inRange ? 1 : 0,
        borderColor: '#E0E0E0',
      }}
    >
      <Text style={{ 
        fontWeight: day.isSelected ? 'bold' : 'normal',
        color: day.isSelected ? 'white' : 'black',
      }}>
        {day.text}
      </Text>
    </Pressable>
  );
};

// Custom month with selection
const CustomMonth = (month: CalendarMonth) => {
  const context = useCalendarContext();

  return (
    <Pressable 
      onPress={() => context.onSelectMonth(month.index)}
      style={{
        flex: 1,
        padding: 12,
        margin: 4,
        borderRadius: 6,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: month.isSelected ? '#2196F3' : '#EEEEEE',
      }}
    >
      <Text style={{ 
        color: month.isSelected ? 'white' : '#333',
        fontWeight: month.isSelected ? 'bold' : 'normal',
      }}>
        {month.name.short}
      </Text>
    </Pressable>
  );
};

// Custom year with selection
const CustomYear = (year: CalendarYear) => {
  const context = useCalendarContext();

  return (
    <Pressable 
      onPress={() => context.onSelectYear(year.number)}
      style={{
        flex: 1,
        padding: 12,
        margin: 4,
        borderRadius: 6,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: year.isSelected 
          ? '#FF9800' 
          : year.isActivated 
            ? '#FFE0B2'
            : '#F5F5F5',
      }}
    >
      <Text style={{ 
        color: year.isSelected ? 'white' : '#333',
        fontWeight: year.isSelected ? 'bold' : 'normal',
      }}>
        {year.text}
      </Text>
    </Pressable>
  );
};

// Custom weekday
const CustomWeekday = (weekday: CalendarWeek) => {
  return (
    <View style={{ flex: 1, alignItems: 'center' }}>
      <Text style={{ fontWeight: 'bold', color: '#666' }}>
        {weekday.name.short}
      </Text>
    </View>
  );
};

// Assemble components
const customComponents: CalendarComponents = {
  Day: CustomDay,
  Month: CustomMonth,
  Year: CustomYear,
  Weekday: CustomWeekday,
  IconPrev: <Text style={{ fontSize: 20 }}>←</Text>,
  IconNext: <Text style={{ fontSize: 20 }}>→</Text>,
};

// Usage
export function CustomCalendar() {
  const [date, setDate] = React.useState<DateType>(new Date());
  const styles = useDefaultStyles();

  return (
    <DateTimePicker
      mode="single"
      date={date}
      onChange={({ date }) => setDate(date)}
      components={customComponents}
      styles={styles}
    />
  );
}

```

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

### Configuration Options

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/VERIFICATION_REPORT.txt

Comprehensive guide to all configuration options available for the datepicker, including localization and timezone settings.

```APIDOC
## Configuration Options

### Description
This document outlines all available configuration options for customizing the React Native UI Datepicker.

### Options Covered:
- Base props applicable across all calendar modes.
- Props specific to single, range, and multiple selection modes.
- Options for layout and display customization.
- Styling configurations.
- Localization settings, including language and date formats.
- Timezone support configuration.
- Calendar type selection.
- Default values for various settings.

### Examples
Includes 15 code examples illustrating various configuration scenarios.

### Source File
Detailed information can be found in `configuration.md`.
```

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

### Install Compatible TypeScript Version

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/INTEGRATION_GUIDE.md

Ensure your TypeScript version is compatible with the datepicker by installing version 5.0 or higher.

```bash
npm install typescript@^5.0
```

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

### Basic Datepicker Usage

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/README.md

Demonstrates basic usage of the DateTimePicker component in single selection mode. Ensure dayjs is installed for date management.

```typescript
import { useState } from 'react';
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';

export function Calendar() {
  const [date, setDate] = useState<DateType>();
  const styles = useDefaultStyles();

  return (
    <DateTimePicker
      mode="single"
      date={date}
      onChange={({ date }) => setDate(date)}
      styles={styles}
    />
  );
}
```

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

### Jalali Calendar (Persian) Example

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/DateTimePicker.md

Shows how to use the DateTimePicker with the Jalali (Persian) calendar system and locale. It utilizes the `calendar` and `locale` props.

```typescript
export function JalaliCalendar() {
  const [date, setDate] = useState<DateType>();
  const defaultStyles = useDefaultStyles();

  return (
    <DateTimePicker
      mode="single"
      calendar="jalali"
      locale="fa"
      date={date}
      onChange={({ date }) => setDate(date)}
      styles={defaultStyles}
    />
  );
}
```

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

### API Reference: DateTimePicker Component

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/VERIFICATION_REPORT.txt

Documentation for the main DateTimePicker component, including its API, props, and usage examples.

```APIDOC
## DateTimePicker Component API

### Description
Provides a customizable date and time picker component for React Native applications.

### Props
This component accepts various props to control its behavior, appearance, and modes (single, range, multiple).

Refer to `api-reference/DateTimePicker.md` for a detailed list of all props, including:
- Base props applicable to all modes
- Props specific to single, range, and multiple selection modes
- Layout and display options
- Styling configurations
- Localization and timezone settings

### Usage Examples
Includes 8 usage examples demonstrating basic and advanced patterns, custom component integration, styling, form integration, and error handling.
```

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

### Use Custom Components in DateTimePicker

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/types.md

Demonstrates how to provide a custom component map to the DateTimePicker. This example shows replacing default icons and selectors with custom implementations.

```typescript
const components: CalendarComponents = {
  Day: (day) => <CustomDay {...day} />,
  IconPrev: <MaterialIcon name="chevron-left" />,
  IconNext: <MaterialIcon name="chevron-right" />,
  MonthSelector: (props) => <CustomMonthButton {...props} />,
};

<DateTimePicker components={components} />
```

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

### Basic Single Date Picker

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/DateTimePicker.md

A fundamental example of using the DateTimePicker for selecting a single date. It utilizes the `date` and `onChange` props for state management.

```typescript
import { useState } from 'react';
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';

export function Calendar() {
  const defaultStyles = useDefaultStyles();
  const [selected, setSelected] = useState<DateType>();

  return (
    <DateTimePicker
      mode="single"
      date={selected}
      onChange={({ date }) => setSelected(date)}
      styles={defaultStyles}
    />
  );
}
```

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

### Multiple Mode Props Example

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/DateTimePicker.md

Demonstrates how to use the `dates`, `onChange`, and `max` props for multiple date selection. This snippet is relevant when `mode` is set to 'multiple'.

```typescript
const [dates, setDates] = useState<DateType[]>([]);

<DateTimePicker
  mode="multiple"
  dates={dates}
  onChange={({ dates }) => setDates(dates)}
  max={5}
/>
```

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

### Controlled Navigation Example

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/configuration.md

Use these props to control the displayed month and year. Ensure you manage the state for month and year and pass the state setters to the respective change handlers.

```typescript
const [month, setMonth] = useState(6);
const [year, setYear] = useState(2025);

<DateTimePicker
  month={month}
  year={year}
  onMonthChange={setMonth}
  onYearChange={setYear}
/>
```

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

### Importing DatePicker Types and Hooks

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/types.md

Example of importing various types and hooks from the 'react-native-ui-datepicker' library. Ensure these types and hooks are available in your project.

```typescript
import {
  type DateType,
  type CalendarMode,
  type CalendarDay,
  type CalendarWeek,
  type CalendarMonth,
  type CalendarYear,
  type CalendarComponents,
  type CalendarMonthSelectorProps,
  type CalendarYearSelectorProps,
  type DatePickerBaseProps,
  // Hooks
  useDefaultStyles,
  useDefaultClassNames,
} from 'react-native-ui-datepicker';
```

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

### Basic DateTimePicker Setup with State

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/INTEGRATION_GUIDE.md

Set up a basic datepicker component in a React Native functional component. It uses `useState` to manage the selected date and `useDefaultStyles` for styling.

```typescript
import { useState } from 'react';
import { View } from 'react-native';
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';

export function MyCalendar() {
  const [date, setDate] = useState<DateType>();
  const defaultStyles = useDefaultStyles();

  return (
    <View style={{ flex: 1 }}>
      <DateTimePicker
        mode="single"
        date={date}
        onChange={({ date }) => setDate(date)}
        styles={defaultStyles}
      />
    </View>
  );
}
```

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

### Configure First Day of Week

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/configuration.md

Set the `firstDayOfWeek` property to define the starting day of the week. This is useful for adhering to regional standards, such as Sunday for US/Canada or Monday for ISO 8601.

```typescript
// US/Canada style (Sunday first)
<DateTimePicker firstDayOfWeek={0} />
```

```typescript
// Monday first (ISO 8601 standard)
<DateTimePicker firstDayOfWeek={1} />
```

```typescript
// Saturday first
<DateTimePicker firstDayOfWeek={6} />
```

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

### Implement Custom Year Selector

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/types.md

Example implementation of a custom year selector. It displays the current year and conditionally shows the year range when the picker is open.

```typescript
function CustomYearSelector(props: CalendarYearSelectorProps) {
  return (
    <TouchableOpacity onPress={props.onPress}>
      <Text>{props.year}</Text>
      {props.isOpen && <Text>{props.yearRange}</Text>}
    </TouchableOpacity>
  );
}
```

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

### Implement Custom Month Selector

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/types.md

Example implementation of a custom month selector using the defined props. It renders a touchable element displaying the month name and an indicator for the picker's state.

```typescript
function CustomMonthSelector(props: CalendarMonthSelectorProps) {
  return (
    <TouchableOpacity onPress={props.onPress}>
      <Text>{props.text}</Text>
      <Text>{props.isOpen ? '▼' : '▶'}</Text>
    </TouchableOpacity>
  );
}
```

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

### Styling Multiple Mode Calendar

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/useDefaultClassNames.md

Customize the appearance of multiple selected dates in the calendar. This example overrides default class names to style selected dates and their labels.

```typescript
export function StyledMultipleCalendar() {
  const defaultClassNames = useDefaultClassNames();
  const [dates, setDates] = useState<DateType[]>([]);

  return (
    <DateTimePicker
      mode="multiple"
      dates={dates}
      onChange={({ dates }) => setDates(dates)}
      classNames={{
        ...defaultClassNames,
        selected: 'bg-purple-500 border-purple-600',
        selected_label: 'text-white font-semibold',
        day: 'group rounded-full web:hover:bg-purple-100',
      }}
    />
  );
}
```

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

### Apply Custom Styles to Datepicker

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/README.md

Use the `styles` prop to override default styles. This example shows how to add a border to today's date and highlight the selected date with a blue background and white text. Ensure `useDefaultStyles` is imported to extend existing styles.

```jsx
import DateTimePicker, { useDefaultStyles } from 'react-native-ui-datepicker';

export function Calendar() {
  const defaultStyles = useDefaultStyles();

  return (
    <DateTimePicker
      styles={{
        ...defaultStyles,
        today: { borderColor: 'blue', borderWidth: 1 }, // Add a border to today's date
        selected: { backgroundColor: 'blue' }, // Highlight the selected day
        selected_label: { color: 'white' }, // Highlight the selected day label
      }}
    />
  );
}
```

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

### Reset Project to Starter Code

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/example/README.md

Use this command to move the starter code to the app-example directory and create a clean app directory for development.

```bash
npm run reset-project
```

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

### Apply Default Styles to DatePicker

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/INTEGRATION_GUIDE.md

Use the `useDefaultStyles` hook to apply the component's default styling. This is the simplest way to get started with basic styling.

```typescript
import { useDefaultStyles } from 'react-native-ui-datepicker';

export function DefaultStyled() {
  const styles = useDefaultStyles();
  return <DateTimePicker styles={styles} />;
}
```

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

### Styling Range Mode Calendar

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/useDefaultClassNames.md

Customize the appearance of the date range selection in the calendar. This example extends default class names to style the start, middle, and end dates of a selected range.

```typescript
export function StyledRangeCalendar() {
  const defaultClassNames = useDefaultClassNames();
  const [startDate, setStartDate] = useState<DateType>();
  const [endDate, setEndDate] = useState<DateType>();

  return (
    <DateTimePicker
      mode="range"
      startDate={startDate}
      endDate={endDate}
      onChange={({ startDate, endDate }) => {
        setStartDate(startDate);
        setEndDate(endDate);
      }}
      classNames={{
        ...defaultClassNames,
        range_start: 'bg-green-500 rounded-l-lg',
        range_middle: 'bg-green-100',
        range_middle_label: 'text-green-900',
        range_end: 'bg-green-500 rounded-r-lg',
        range_end_label: 'text-white',
      }}
    />
  );
}
```

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

### With Time Picker (Single Mode)

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/DateTimePicker.md

Demonstrates integrating a time picker with the single date selection mode.

```APIDOC
## With Time Picker (Single Mode)

### Description
This example shows how to enable the time picker alongside the single date selection.

### Usage
```typescript
export function DateTimeCalendar() {
  const [dateTime, setDateTime] = useState<DateType>();
  const defaultStyles = useDefaultStyles();

  return (
    <DateTimePicker
      mode="single"
      date={dateTime}
      onChange={({ date }) => setDateTime(date)}
      timePicker
      use12Hours
      styles={defaultStyles}
    />
  );
}
```
```

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

### Testing with Simple State Initialization

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/errors.md

Begin debugging by initializing the date with minimal state and a basic DateTimePicker configuration. Gradually add features like timePicker, timezone, and constraints to isolate problems.

```typescript
// Start with minimal configuration
const [date, setDate] = useState<DateType>(new Date());

<DateTimePicker 
  mode="single"
  date={date}
  onChange={({ date }) => setDate(date)}
/>

// Then gradually add features (timePicker, timezone, constraints, etc.)
```

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

### Valid Date Initialization

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/errors.md

Demonstrates correct initialization of the date state using `new Date()` or `dayjs().toDate()`. Avoid initializing with `null` if subsequent updates might lead to invalid date states.

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

// ✓ Valid
const [date, setDate] = useState(dayjs().toDate());
```

```typescript
// ✗ Invalid - may cause issues
const [date, setDate] = useState(null);
// then later setting to invalid date
```

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

### Project File Structure

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/API_SUMMARY.md

Provides an overview of the directory and file structure for the react-native-ui-datepicker project, highlighting the location of source files, components, and compiled output.

```tree
react-native-ui-datepicker/
├── src/
│   ├── index.ts                    # Entry point, exports
│   ├── datetime-picker.tsx         # Main component
│   ├── calendar-context.ts         # Context and hook
│   ├── types.ts                    # Type definitions
│   ├── theme.ts                    # Style hooks and colors
│   ├── ui.ts                       # UI theme enums
│   ├── enums.ts                    # Calendar enums
│   ├── utils.ts                    # Utility functions
│   ├── numerals.ts                 # Numeral system definitions
│   ├── locales.ts                  # Locale setup
│   ├── components/                 # Sub-components
│   │   ├── calendar.tsx
│   │   ├── day.tsx
│   │   ├── days.tsx
│   │   ├── months.tsx
│   │   ├── years.tsx
│   │   ├── weekdays.tsx
│   │   ├── time-picker.tsx
│   │   └── header/
│   └── hooks/
└── lib/                             # Compiled output
```

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

### Disable Specific Dates (Weekends)

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/configuration.md

Use the `disabledDates` prop with a predicate function to disable dates based on custom logic. This example disables weekends.

```typescript
<DateTimePicker 
  disabledDates={(date) => [0, 6].includes(dayjs(date).day())}
/>
```

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

### Publish New Versions

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/CONTRIBUTING.md

Uses release-it to automate the process of bumping versions, creating tags, and publishing new releases to npm.

```sh
yarn release
```

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

### With Custom Styling (NativeWind)

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/DateTimePicker.md

Demonstrates applying custom styles using NativeWind by passing a `classNames` object. This allows for detailed visual customization of the picker.

```typescript
export function StyledCalendar() {
  const [date, setDate] = useState<DateType>();
  const defaultClassNames = useDefaultClassNames();

  return (
    <DateTimePicker
      mode="single"
      date={date}
      onChange={({ date }) => setDate(date)}
      classNames={{
        ...defaultClassNames,
        selected: 'bg-blue-500 border-blue-500',
        today: 'border-orange-500',
        disabled: 'opacity-30',
      }}
    />
  );
}
```

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

### Enable Only Specific Dates (Mondays)

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/configuration.md

Use the `enabledDates` prop with a predicate function to define custom logic for enabling dates. This example enables only Mondays.

```typescript
<DateTimePicker 
  enabledDates={(date) => dayjs(date).day() === 1}
/>
```

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

### Configure Initial Calendar View

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/configuration.md

Control the initial view displayed when the date picker opens using the `initialView` property. Options include 'day', 'month', and 'year'.

```typescript
// Start in month view
<DateTimePicker initialView="month" />
```

```typescript
// Start in year view
<DateTimePicker initialView="year" />
```

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

### Custom Month Component Usage

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/types.md

Example of using the CalendarMonth object in a custom component to apply styling, such as bold font weight, when the month is selected.

```typescript
function CustomMonth(month: CalendarMonth) {
  return (
    <Text style={{
      fontWeight: month.isSelected ? 'bold' : 'normal',
    }}>
      {month.name.short}
    </Text>
  );
}
```

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

### Configure Weekday and Month Formats

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/configuration.md

Customize the display format for weekdays and months. Options include 'min', 'short', and 'full' for weekdays, and 'short' or 'full' for months.

```typescript
<DateTimePicker weekdaysFormat="min" />
```

```typescript
<DateTimePicker weekdaysFormat="short" />
```

```typescript
<DateTimePicker weekdaysFormat="full" />
```

```typescript
<DateTimePicker monthsFormat="short" monthCaptionFormat="short" />
```

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

### CalendarMode

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/types.md

Determines the date selection mode of the calendar, supporting 'single' date selection, 'range' for start and end dates, or 'multiple' individual dates.

```APIDOC
## Type: CalendarMode

### Description
Determines the date selection mode:
- `'single'` - Select one date
- `'range'` - Select a date range (start and end dates)
- `'multiple'` - Select multiple individual dates
```

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

### Jalali Calendar (Persian)

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/DateTimePicker.md

Illustrates how to use the DateTimePicker with the Jalali (Persian) calendar system and locale.

```APIDOC
## Jalali Calendar (Persian)

### Description
This example demonstrates using the DateTimePicker with the Jalali calendar system and setting the locale to Persian.

### Usage
```typescript
export function JalaliCalendar() {
  const [date, setDate] = useState<DateType>();
  const defaultStyles = useDefaultStyles();

  return (
    <DateTimePicker
      mode="single"
      calendar="jalali"
      locale="fa"
      date={date}
      onChange={({ date }) => setDate(date)}
      styles={defaultStyles}
    />
  );
}
```
```

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

### Basic Single Date Picker

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/DateTimePicker.md

Demonstrates how to use the DateTimePicker component for selecting a single date.

```APIDOC
## Basic Single Date Picker

### Description
This example shows the basic setup for a single date picker.

### Usage
```typescript
import { useState } from 'react';
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';

export function Calendar() {
  const defaultStyles = useDefaultStyles();
  const [selected, setSelected] = useState<DateType>();

  return (
    <DateTimePicker
      mode="single"
      date={selected}
      onChange={({ date }) => setSelected(date)}
      styles={defaultStyles}
    />
  );
}
```
```

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

### Basic DatePicker Usage in React Native

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/README.md

Demonstrates how to import and use the DateTimePicker component for single date selection. Ensure to import necessary components and styles.

```jsx
import { useState } from  'react';
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';

export function Calendar() {
  const defaultStyles = useDefaultStyles();
  const [selected, setSelected] = useState<DateType>();

  return (
    <DateTimePicker
      mode="single"
      date={selected}
      onChange={({ date }) =>  setSelected(date)}
      styles={defaultStyles}
    />
  );
}
```

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

### Timezone Handling Examples

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/README.md

Configure the datepicker to use specific IANA timezones or UTC offsets for accurate date and time representation across different regions.

```typescript
<DateTimePicker timeZone="America/New_York" />
<DateTimePicker timeZone="Asia/Tokyo" />
<DateTimePicker timeZone="+05:30" />
```

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

### Memoize Styles and Date Constraints

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/INTEGRATION_GUIDE.md

Use `useMemo` to memoize styles and date constraints to prevent unnecessary re-renders and improve performance. This is particularly useful when these values are computationally expensive or change infrequently.

```typescript
import { useMemo } from 'react';

export function OptimizedPicker() {
  const [date, setDate] = useState<DateType>();
  
  // Memoize styles to prevent unnecessary re-renders
  const styles = useMemo(() => useDefaultStyles(), []);

  // Memoize date constraints
  const today = useMemo(() => new Date(), []);
  const maxDate = useMemo(
    () => new Date(today.getFullYear(), today.getMonth() + 3, today.getDate()),
    [today]
  );

  return (
    <DateTimePicker
      mode="single"
      date={date}
      onChange={({ date }) => setDate(date)}
      minDate={today}
      maxDate={maxDate}
      styles={styles}
    />
  );
}
```

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

### Example Usage of DateType - TypeScript

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/types.md

Demonstrates assigning various valid types to a variable declared with the DateType. Ensure Dayjs is imported if using Dayjs objects.

```typescript
const date1: DateType = new Date();
const date2: DateType = '2025-07-15';
const date3: DateType = 1689206400000;
const date4: DateType = dayjs('2025-07-15');
const date5: DateType = undefined;
```

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

### Calendar Mode Type Definition

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/README.md

Defines the allowed modes for the datepicker: 'single' for one date, 'range' for a start and end date, or 'multiple' for several dates.

```typescript
type CalendarMode = 'single' | 'range' | 'multiple';
```

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

### Define RangeChange Callback Type

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/types.md

Callback function type for handling range mode date selection changes. Receives the start and end dates as parameters.

```typescript
type RangeChange = (params: {
  startDate: DateType;
  endDate: DateType;
}) => void
```

```typescript
const handleChange: RangeChange = ({ startDate, endDate }) => {
  console.log('Range:', startDate, 'to', endDate);
};

<DateTimePicker mode="range" onChange={handleChange} />
```

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

### Date Range Picker with Constraints

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/DateTimePicker.md

Illustrates how to configure the DateTimePicker for selecting a date range with minimum and maximum day constraints.

```APIDOC
## Date Range Picker with Constraints

### Description
This example demonstrates selecting a date range with constraints on the minimum and maximum number of days between the start and end dates.

### Usage
```typescript
export function RangeCalendar() {
  const [startDate, setStartDate] = useState<DateType>();
  const [endDate, setEndDate] = useState<DateType>();
  const defaultStyles = useDefaultStyles();
  const today = new Date();

  return (
    <DateTimePicker
      mode="range"
      startDate={startDate}
      endDate={endDate}
      onChange={({ startDate, endDate }) => {
        setStartDate(startDate);
        setEndDate(endDate);
      }}
      minDate={today}
      min={1}
      max={30}
      styles={defaultStyles}
    />
  );
}
```
```

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

### Basic DateTimePicker Usage

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/API_SUMMARY.md

Demonstrates the basic integration of the DateTimePicker component for single date selection. Requires state management for the selected date and a style hook.

```typescript
const [date, setDate] = useState<DateType>();
const styles = useDefaultStyles();

<DateTimePicker
  mode="single"
  date={date}
  onChange={({ date }) => setDate(date)}
  styles={styles}
/>
```

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

### Multiple Selection with Max Limit

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/DateTimePicker.md

Shows how to enable multiple date selections with a specified maximum limit.

```APIDOC
## Multiple Selection with Max Limit

### Description
This example configures the DateTimePicker to allow multiple date selections, with a maximum limit on the number of selected dates.

### Usage
```typescript
export function MultipleCalendar() {
  const [dates, setDates] = useState<DateType[]>([]);
  const defaultStyles = useDefaultStyles();

  return (
    <DateTimePicker
      mode="multiple"
      dates={dates}
      onChange={({ dates }) => setDates(dates)}
      max={7}
      styles={defaultStyles}
    />
  );
}
```
```

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

### Disable Weekends in Datepicker

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/README.md

Prevent users from selecting weekends by providing a `disabledDates` function. This function should return `true` for dates that are to be disabled. The example uses `dayjs` to determine the day of the week.

```typescript
<DateTimePicker
  disabledDates={(date) => [0, 6].includes(dayjs(date).day())}
  styles={styles}
/>
```

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

### Define CalendarMode - TypeScript

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/types.md

Determines the date selection mode. Options include 'single' for one date, 'range' for a start and end date, and 'multiple' for selecting several individual dates.

```typescript
type CalendarMode = 'single' | 'range' | 'multiple'
```

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

### Responsive Design with Tailwind Prefixes

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/useDefaultClassNames.md

Utilize Tailwind's responsive prefixes like `sm:`, `md:`, and `lg:` to create adaptive layouts for different screen sizes. Apply these directly within your classNames object.

```typescript
classNames={{
  ...defaultClassNames,
  day_cell: 'p-0.5 md:p-1',
  weekday_label: 'text-xs md:text-sm',
  month_selector_label: 'text-base md:text-lg lg:text-xl',
}}
```

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

### Date Validation Integration

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/INTEGRATION_GUIDE.md

Implement custom date validation logic within the `onChange` handler. This example enforces that selected dates are not in the past and not more than one year in the future. Errors are displayed below the picker.

```typescript
export function ValidatedDatePicker() {
  const [date, setDate] = useState<DateType>();
  const [error, setError] = useState<string>();
  const styles = useDefaultStyles();

  const handleDateChange = ({ date }: { date: DateType }) => {
    setDate(date);
    setError(undefined);

    // Validation logic
    if (!date) {
      setError('Date is required');
      return;
    }

    const selectedDate = dayjs(date);
    const today = dayjs().startOf('day');

    if (selectedDate.isBefore(today)) {
      setError('Cannot select past dates');
      setDate(undefined);
      return;
    }

    if (selectedDate.isAfter(dayjs().add(1, 'year'))) {
      setError('Cannot select dates more than 1 year in the future');
      setDate(undefined);
      return;
    }
  };

  return (
    <View>
      <DateTimePicker
        mode="single"
        date={date}
        onChange={handleDateChange}
        styles={styles}
      />
      {error && <Text style={{ color: 'red', marginTop: 8 }}>{error}</Text>}
    </View>
  );
}
```

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

### With Custom Styling (NativeWind)

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/DateTimePicker.md

Shows how to apply custom styles to the DateTimePicker component using NativeWind.

```APIDOC
## With Custom Styling (NativeWind)

### Description
This example demonstrates applying custom styles to the DateTimePicker component using NativeWind classes.

### Usage
```typescript
export function StyledCalendar() {
  const [date, setDate] = useState<DateType>();
  const defaultClassNames = useDefaultClassNames();

  return (
    <DateTimePicker
      mode="single"
      date={date}
      onChange={({ date }) => setDate(date)}
      classNames={{
        ...defaultClassNames,
        selected: 'bg-blue-500 border-blue-500',
        today: 'border-orange-500',
        disabled: 'opacity-30',
      }}
    />
  );
}
```
```

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

### onChangeMonth

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/CalendarContext.md

Navigates to an adjacent month using an offset value.

```APIDOC
## onChangeMonth

### Description
Navigates to an adjacent month. Use with +1 to go forward or -1 to go backward.

### Method Signature
```typescript
onChangeMonth(value: number): void
```

### Parameters
#### Path Parameters
- **value** (number) - Required - Month offset (typically +1 or -1)

### Usage Example
```typescript
const context = useCalendarContext();

// Next month
context.onChangeMonth(1);

// Previous month
context.onChangeMonth(-1);
```
```

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

### Custom Day Component Usage

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/types.md

Example of how to use the CalendarDay object within a custom component to style the day based on its properties like selection state, disabled status, and month context.

```typescript
function CustomDay(day: CalendarDay) {
  return (
    <Text style={{
      fontWeight: day.isSelected ? 'bold' : 'normal',
      color: day.isDisabled ? 'gray' : 'black',
      opacity: day.isCurrentMonth ? 1 : 0.5,
    }}>
      {day.text}
    </Text>
  );
}
```

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

### onSelectMonth

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/CalendarContext.md

Selects a month from the month picker and transitions the view to the day picker.

```APIDOC
## onSelectMonth

### Description
Selects a month from the month picker and switch to day view.

### Method Signature
```typescript
onSelectMonth(month: number): void
```

### Parameters
#### Path Parameters
- **month** (number) - Required - Month index (0-11)

### Usage Example
```typescript
const context = useCalendarContext();

// Select June (month 5)
context.onSelectMonth(5);
```
```

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

### Run Unit Tests

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/CONTRIBUTING.md

Executes the unit test suite using Jest to ensure code correctness.

```sh
yarn test
```

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

### Basic DatePicker Usage with Default Class Names

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/useDefaultClassNames.md

Demonstrates how to use the useDefaultClassNames hook to apply default Tailwind CSS classes to the DateTimePicker component. This is useful for a quick setup with pre-defined styling.

```typescript
import { useState } from 'react';
import DateTimePicker, { DateType, useDefaultClassNames } from 'react-native-ui-datepicker';

export function Calendar() {
  const classNames = useDefaultClassNames();
  const [date, setDate] = useState<DateType>();

  return (
    <DateTimePicker
      mode="single"
      date={date}
      onChange={({ date }) => setDate(date)}
      classNames={classNames}
    />
  );
}
```

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

### Customizing Specific Styles with useDefaultStyles

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/useDefaultStyles.md

Use the useDefaultStyles hook to get the default styles and then override specific properties like selected, today, disabled, and day_label to achieve custom visual appearances for the date picker.

```typescript
import DateTimePicker, { useDefaultStyles } from 'react-native-ui-datepicker';

export function CustomCalendar() {
  const defaultStyles = useDefaultStyles();
  const [date, setDate] = useState<DateType>();

  return (
    <DateTimePicker
      mode="single"
      date={date}
      onChange={({ date }) => setDate(date)}
      styles={{
        ...defaultStyles,
        selected: {
          backgroundColor: '#FF6B6B',
          borderColor: '#FF6B6B',
        },
        today: {
          backgroundColor: '#FFD93D',
          borderColor: '#FFD93D',
        },
        disabled: {
          opacity: 0.3,
        },
        day_label: {
          color: '#1a1a1a',
          fontSize: 14,
          fontWeight: '500',
        },
      }}
    />
  );
}
```

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

### Style Calendar with NativeWind ClassNames

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/README.md

Apply custom Tailwind CSS class names to style the calendar using the `classNames` prop. This example demonstrates overriding default styles for today, selected dates, and disabled dates.

```jsx
import DateTimePicker, { useDefaultClassNames } from 'react-native-ui-datepicker';

export function Calendar() {
  const defaultClassNames = useDefaultClassNames();

  return (
    <DateTimePicker
      classNames={{
        ...defaultClassNames,
        today: 'border-amber-500',
        selected: 'bg-amber-500 border-amber-500',
        selected_label: "text-white",
        day: `${defaultClassNames.day} hover:bg-amber-100`,
        disabled: 'opacity-50',
      }}
    />
  );
}
```

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

### Basic Usage of useDefaultStyles

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/api-reference/useDefaultStyles.md

Apply the default light theme styles to the DateTimePicker component. Ensure you import the necessary components and hooks.

```typescript
import { useState } from 'react';
import DateTimePicker, { DateType, useDefaultStyles } from 'react-native-ui-datepicker';

export function Calendar() {
  const defaultStyles = useDefaultStyles();
  const [date, setDate] = useState<DateType>();

  return (
    <DateTimePicker
      mode="single"
      date={date}
      onChange={({ date }) => setDate(date)}
      styles={defaultStyles}
    />
  );
}
```

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

### Create Testable Calendar Form for Integration Tests

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/INTEGRATION_GUIDE.md

Implement a `TestableCalendarForm` component that includes the `DateTimePicker` with specific `testID` props. This setup facilitates integration testing by allowing easy access to the component within the test environment.

```typescript
export function TestableCalendarForm() {
  const [date, setDate] = useState<DateType>();

  return (
    <View testID="calendar-form">
      <DateTimePicker
        testID="date-picker"
        mode="single"
        date={date}
        onChange={({ date }) => setDate(date)}
      />
    </View>
  );
}
```

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

### All DateTimePicker Props Reference

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/API_SUMMARY.md

This snippet lists all available props for the DateTimePicker component, covering modes, localization, date constraints, week configuration, view control, display formats, time picker options, layout, styling, custom components, and navigation control. Use this as a general reference for all possible configurations.

```typescript
<DateTimePicker
  // Mode and Calendar
  mode?: 'single' | 'range' | 'multiple'
  calendar?: 'gregory' | 'jalali'
  
  // Localization
  locale?: string
  numerals?: Numerals
  timeZone?: string
  
  // Date Constraints
  minDate?: DateType
  maxDate?: DateType
  enabledDates?: DateType[] | (date: DateType) => boolean
  disabledDates?: DateType[] | (date: DateType) => boolean
  
  // Week Configuration
  firstDayOfWeek?: number
  
  // View Control
  initialView?: 'day' | 'month' | 'year' | 'time'
  hideHeader?: boolean
  hideWeekdays?: boolean
  showOutsideDays?: boolean
  disableMonthPicker?: boolean
  disableYearPicker?: boolean
  showMonthSelector?: boolean
  
  // Display Format
  weekdaysFormat?: 'min' | 'short' | 'full'
  monthsFormat?: 'short' | 'full'
  monthCaptionFormat?: 'short' | 'full'
  
  // Time Picker (Single Mode Only)
  timePicker?: boolean
  use12Hours?: boolean
  
  // Layout
  containerHeight?: number
  weekdaysHeight?: number
  navigationPosition?: 'around' | 'right' | 'left'
  
  // Styling
  style?: ViewStyle
  containerStyle?: ViewStyle
  className?: string
  styles?: Styles
  classNames?: ClassNames
  
  // Custom Components
  components?: CalendarComponents
  
  // Navigation Control
  month?: number
  year?: number
  onMonthChange?: (month: number) => void
  onYearChange?: (year: number) => void
/>
```

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

### Custom Styling with Tailwind CSS

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/README.md

Apply custom styles to the DateTimePicker using Tailwind CSS classes. Utilize the `useDefaultClassNames` hook to get base class names and override specific states like 'selected', 'today', or 'disabled_label'.

```typescript
const classNames = useDefaultClassNames();

<DateTimePicker
  classNames={{
    ...classNames,
    selected: 'bg-blue-600 text-white font-bold',
    today: 'border-2 border-orange-500',
    disabled_label: 'opacity-30',
  }}
/>
```

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

### ClassNames Type

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/types.md

Maps UI theme keys to Tailwind CSS class name strings for partial style updates.

```APIDOC
## ClassNames

```typescript
type ClassNames = Partial<{
  [key in UI | SelectionState | DayFlag | MonthState | YearState | CalenderFlag]: string;
}>;
```

Maps UI theme keys to Tailwind CSS class name strings. All keys are optional. Partially update default styles without replacing entire objects.

**Available Keys:** See UI theme enums in `src/ui.ts` (UI, SelectionState, DayFlag, MonthState, YearState, CalenderFlag)

**Usage:**

```typescript
const classNames: ClassNames = {
  selected: 'bg-blue-600 text-white',
  today: 'border-orange-500',
  disabled_label: 'opacity-50',
};
```
```

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

### Implement DateTimePicker Error Boundary

Source: https://github.com/farhoudshapouran/react-native-ui-datepicker/blob/main/_autodocs/errors.md

Wrap the DateTimePicker in a custom error boundary component to gracefully handle errors during its rendering or operation in production applications. This example shows a basic implementation using React's componentDidCatch and getDerivedStateFromError lifecycle methods.

```typescript
import { Component, ReactNode } from 'react';
import { View, Text } from 'react-native';
import DateTimePicker from 'react-native-ui-datepicker';

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
}

class DatePickerErrorBoundary extends Component<
  { children: ReactNode },
  ErrorBoundaryState
> {
  constructor(props: { children: ReactNode }) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: any) {
    console.error('DatePicker error:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <View style={{ padding: 16 }}>
          <Text style={{ color: 'red', fontSize: 16 }}>
            Date picker failed to load
          </Text>
          <Text style={{ color: '#999', fontSize: 12, marginTop: 8 }}>
            {this.state.error?.message}
          </Text>
        </View>
      );
    }

    return this.props.children;
  }
}

// Usage:
<DatePickerErrorBoundary>
  <DateTimePicker mode="single" timePicker />
</DatePickerErrorBoundary>
```