### Installation

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Instructions for installing the React Native DateTimePicker module using npm or yarn.

```APIDOC
## Installation

### npm
```bash
npm install @react-native-community/datetimepicker --save
```

### yarn
```bash
yarn add @react-native-community/datetimepicker
```

**Note:** For iOS, run `npx pod-install` after installation and rebuild your project. Autolinking is not yet implemented on Windows, requiring manual installation.
```

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

### Clone and Install Dependencies

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/CONTRIBUTING.md

Clone the repository and install project dependencies using Yarn.

```sh
git clone https://github.com/react-native-community/datetimepicker.git
cd datetimepicker
yarn
```

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

### Install React Native DateTimePicker

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Install the package using npm, yarn, or Expo. For iOS, ensure pods are installed. Expo managed projects or dev clients require a specific Expo install command.

```bash
# npm
npm install @react-native-community/datetimepicker --save
```

```bash
# yarn
yarn add @react-native-community/datetimepicker
```

```bash
# iOS – install pods
npx pod-install
```

```bash
# Expo managed / dev client
npx expo install @react-native-community/datetimepicker
```

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

### Run Jest Tests

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/CONTRIBUTING.md

Install dependencies and run Jest tests for the project.

```sh
yarn
yarn test
```

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

### Install DateTimePicker with yarn

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Use this command to install the React Native DateTimePicker module using yarn.

```bash
yarn add @react-native-community/datetimepicker
```

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

### Install DateTimePicker with npm

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Use this command to install the React Native DateTimePicker module using npm.

```bash
npm install @react-native-community/datetimepicker --save
```

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

### display prop

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Shows examples of using the `display` prop to customize the picker's appearance on different platforms.

```APIDOC
## `display` prop

Overrides the visual style of the picker. Platform-specific values are ignored silently on other platforms.

```jsx
// Android spinner wheel
<DateTimePicker value={new Date()} mode="date" display="spinner" onValueChange={(e, d) => {}} />

// Android calendar grid
<DateTimePicker value={new Date()} mode="date" display="calendar" onValueChange={(e, d) => {}} />

// iOS compact inline button (expands to calendar on tap) – iOS 14+
<DateTimePicker value={new Date()} mode="date" display="compact" onValueChange={(e, d) => {}} />

// iOS fully-inline calendar – iOS 14+
<DateTimePicker value={new Date()} mode="date" display="inline" onValueChange={(e, d) => {}} />
```
```

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

### DateTimePicker Display Options

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Shows examples of different 'display' prop values for the DateTimePicker. Platform-specific values are ignored silently on other platforms.

```jsx
// Android spinner wheel
<DateTimePicker value={new Date()} mode="date" display="spinner" onValueChange={(e, d) => {}} />
```

```jsx
// Android calendar grid
<DateTimePicker value={new Date()} mode="date" display="calendar" onValueChange={(e, d) => {}} />
```

```jsx
// iOS compact inline button (expands to calendar on tap) – iOS 14+
<DateTimePicker value={new Date()} mode="date" display="compact" onValueChange={(e, d) => {}} />
```

```jsx
// iOS fully-inline calendar – iOS 14+
<DateTimePicker value={new Date()} mode="date" display="inline" onValueChange={(e, d) => {}} />
```

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

### Jest Testing Setup for DateTimePicker

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Configure Jest to use the provided mock for @react-native-community/datetimepicker. This setup file should be included in your Jest configuration.

```javascript
// jest.config.js
module.exports = {
  preset: 'react-native',
  setupFilesAfterFramework: ['@react-native-community/datetimepicker/jest/setup'],
};
```

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

### Basic DateTimePicker Component Usage

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Demonstrates the basic setup for the DateTimePicker component, including state management for visibility and handling date selection. Use the 'show' state pattern to toggle visibility on Android.

```jsx
import React, {useState} from 'react';
import {Button, SafeAreaView, Text} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function App() {
  const [date, setDate] = useState(new Date());
  const [show, setShow] = useState(false);

  const onValueChange = (event, selectedDate) => {
    setShow(false);          // hide after selection on Android
    if (selectedDate) {
      setDate(selectedDate);
    }
  };

  const onDismiss = () => setShow(false);

  return (
    <SafeAreaView>
      <Text>Selected: {date.toLocaleString()}</Text>
      <Button title="Pick date" onPress={() => setShow(true)} />
      {show && (
        <DateTimePicker
          value={date}
          mode="date"                        // 'date' | 'time' | 'datetime' (iOS) | 'countdown' (iOS)
          display="default"                  // 'default' | 'spinner' | 'calendar' | 'clock' (Android)
                                             // 'default' | 'spinner' | 'compact' | 'inline' (iOS)
          minimumDate={new Date(2000, 0, 1)}
          maximumDate={new Date(2035, 11, 31)}
          onValueChange={onValueChange}
          onDismiss={onDismiss}
        />
      )}
    </SafeAreaView>
  );
}
```

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

### Component Usage on iOS/Android/Windows

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Component-based usage of DateTimePicker for iOS, Android, and Windows. This example shows how to conditionally render the picker based on state.

```javascript
export const App = () => {
  const [date, setDate] = useState(new Date(1598051730000));
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);

  const showMode = (currentMode) => {
    setShow(true);
    setMode(currentMode);
  };

  const showDatepicker = () => {
    showMode('date');
  };

  const showTimepicker = () => {
    showMode('time');
  };

  return (
    <SafeAreaView>
      <Button onPress={showDatepicker} title="Show date picker!" />
      <Button onPress={showTimepicker} title="Show time picker!" />
      <Text>selected: {date.toLocaleString()}</Text>
      {show && (
        <DateTimePicker
          testID="dateTimePicker"
          value={date}
          mode={mode}
          is24Hour={true}
          onValueChange={(event, selectedDate) => setDate(selectedDate)}
          onDismiss={() => setShow(false)}
        />
      )}
    </SafeAreaView>
  );
};
```

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

### DateTimePicker Mode Examples

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Illustrates the different 'mode' prop values for the DateTimePicker component. iOS supports 'date', 'time', 'datetime', and 'countdown'. Android and Windows support 'date' and 'time' only.

```jsx
// Date-only picker (all platforms)
<DateTimePicker value={new Date()} mode="date" onValueChange={(e, d) => console.log(d)} />
```

```jsx
// Time-only picker (all platforms)
<DateTimePicker value={new Date()} mode="time" onValueChange={(e, d) => console.log(d)} />
```

```jsx
// Combined date + time (iOS only)
<DateTimePicker value={new Date()} mode="datetime" onValueChange={(e, d) => console.log(d)} />
```

```jsx
// Countdown timer in seconds (iOS only)
<DateTimePicker value={new Date(0, 0, 0, 0, 30)} mode="countdown" onValueChange={(e, d) => console.log(d)} />
```

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

### Enable Fabric Renderer on iOS

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/CONTRIBUTING.md

Enable the new React Native Fabric renderer for iOS. This involves starting the bundler, enabling the new architecture during pod installation, and starting the app.

```sh
yarn start
cd "example/ios" && RCT_NEW_ARCH_ENABLED=1 npx pod-install && cd - 
yarn start:ios
```

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

### Detox iOS Release Build and Test

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/CONTRIBUTING.md

Build and test the iOS app in release mode using Detox. Requires bundling the JS and installing pods.

```sh
yarn bundle:ios # we need to bundle js first
cd "example/ios" && npx pod-install && cd - # run pod install to include bundle
yarn detox:ios:build:release
yarn detox:ios:test:release
```

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

### Detox iOS Debug Build and Test

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/CONTRIBUTING.md

Build and test the iOS app in debug mode using Detox. Requires running the Metro Bundler and installing pods.

```sh
# Debug requires to run Metro Bundler
yarn start
cd "example/ios" && npx pod-install && cd - 
yarn detox:ios:build:debug
yarn detox:ios:test:debug
```

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

### Set First Day of Week

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Specifies which day of the week is considered the start of the week. Supported on Android and Windows. Requires passing an integer corresponding to the `DAY_OF_WEEK` enum.

```javascript
<RNDateTimePicker firstDayOfWeek={DAY_OF_WEEK.Wednesday} />
```

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

### Material 3 Design for Android Pickers

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Use `design="material"` to enable Material 3 styling for date and time pickers on Android. Requires specific theme setup in `styles.xml`.

```jsx
import {DateTimePickerAndroid} from '@react-native-community/datetimepicker';

// Material date picker with fullscreen and keyboard initial mode
DateTimePickerAndroid.open({
  value: new Date(),
  mode: 'date',
  design: 'material',
  title: 'Select appointment date',
  fullscreen: true,
  initialInputMode: 'keyboard',   // 'default' (calendar) | 'keyboard'
  startOnYearSelection: false,
  onValueChange: (event, date) => console.log('Selected:', date),
  onDismiss: () => console.log('Dismissed'),
});

// Material time picker
DateTimePickerAndroid.open({
  value: new Date(),
  mode: 'time',
  design: 'material',
  is24Hour: false,
  onValueChange: (event, date) => console.log('Time selected:', date),
});
```

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

### Windows app.cpp PackageProvider Addition

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/docs/manual-installation.md

Append the `winrt::DateTimePicker::ReactPackageProvider()` to `PackageProviders()` in your `app.cpp` before `InitializeComponent();`.

```csharp
PackageProviders().Append(winrt::DateTimePicker::ReactPackageProvider());

```

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

### Windows Project Solution Addition

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/docs/manual-installation.md

Add the `DateTimePickerWindows.vcxproj` project to your Visual Studio solution and reference it in your main application project.

```xml
Right-click main application project > Add > Reference...
Check 'DateTimePickerWindows' from the 'Project > Solution' tab on the left.

```

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

### DateTimePicker Component Usage

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Demonstrates the basic usage of the DateTimePicker component, including state management for showing and hiding the picker, and handling date selection.

```APIDOC
## DateTimePicker Component (iOS / Android / Windows)

The default export is a cross-platform React component. On iOS it renders inline; on Android it shows a native dialog. Use the `show` state pattern to toggle visibility on Android.

```jsx
import React, {useState} from 'react';
import {Button, SafeAreaView, Text} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';

export default function App() {
  const [date, setDate] = useState(new Date());
  const [show, setShow] = useState(false);

  const onValueChange = (event, selectedDate) => {
    setShow(false);          // hide after selection on Android
    if (selectedDate) {
      setDate(selectedDate);
    }
  };

  const onDismiss = () => setShow(false);

  return (
    <SafeAreaView>
      <Text>Selected: {date.toLocaleString()}</Text>
      <Button title="Pick date" onPress={() => setShow(true)} />
      {show && (
        <DateTimePicker
          value={date}
          mode="date"                        // 'date' | 'time' | 'datetime' (iOS) | 'countdown' (iOS)
          display="default"                  // 'default' | 'spinner' | 'calendar' | 'clock' (Android)
                                             // 'default' | 'spinner' | 'compact' | 'inline' (iOS)
          minimumDate={new Date(2000, 0, 1)}
          maximumDate={new Date(2035, 11, 31)}
          onValueChange={onValueChange}
          onDismiss={onDismiss}
        />
      )}
    </SafeAreaView>
  );
}
```
```

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

### Import DateTimePicker

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Import the DateTimePicker component from the package. This is a common first step for using the library.

```javascript
import DateTimePicker from '@react-native-community/datetimepicker';
```

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

### Testing DateTimePicker Value Change

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Example of how to test the DateTimePicker component in React Native using @testing-library/react-native. This test simulates a value change event.

```jsx
// MyScreen.test.jsx
import React from 'react';
import {render, fireEvent} from '@testing-library/react-native';
import MyScreen from './MyScreen'; // component that uses DateTimePicker

test('renders date picker and responds to value change', () => {
  const {getByTestId} = render(<MyScreen />);
  const picker = getByTestId('dateTimePicker');

  fireEvent(picker, 'onValueChange', {
    nativeEvent: {timestamp: Date.now(), utcOffset: 0},
  }, new Date('2024-06-15'));

  // assert state changes in your component
});
```

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

### initialInputMode

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Has effect only when `design` is "material". Allows setting the initial input mode of the picker.

```APIDOC
## initialInputMode [Android only]

### Description
:warning: Has effect only when `design` is "material". Allows setting the initial input mode of the picker.

List of possible values:

- "default" - Recommended. Date pickers will show the calendar view by default, and time pickers will show the clock view by default.
- "keyboard" - Both pickers will show an input where the user can type the date or time.

### Parameters
#### Path Parameters
- **initialInputMode** (string) - Optional - Possible values: "default", "keyboard"

### Request Example
```js
<RNDateTimePicker initialInputMode="default" />
```
```

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

### Android MainApplication.java Package Addition

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/docs/manual-installation.md

Import and add the `RNDateTimePickerPackage` to your `MainApplication.java` file for the component to be recognized.

```java
+ import com.reactcommunity.rndatetimepicker.RNDateTimePickerPackage;

public class MainApplication extends Application implements ReactApplication {

  @Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // Packages that cannot be autolinked yet can be added manually here, for example:
+   packages.add(new RNDateTimePickerPackage());
    return packages;
  }
}

```

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

### Start Android Date Picker on Year Selection

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

If true, the Android date picker will initially display the year selection view. This prop is not applicable for the material design picker.

```javascript
<RNDateTimePicker startOnYearSelection={true} />
```

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

### Windows-Specific Date Picker Formatting

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Configure date display format, day of week format, date range, placeholder text, and styling for the Windows `CalendarDatePicker`. The `firstDayOfWeek` prop is also supported.

```jsx
import DateTimePicker from '@react-native-community/datetimepicker';
import {DAY_OF_WEEK} from '@react-native-community/datetimepicker/src/constants';

// Date picker with custom format
<DateTimePicker
  value={new Date()}
  mode="date"
  dateFormat="dayofweek day month"       // 'day month year' | 'dayofweek day month' | 'longdate' | 'shortdate'
  dayOfWeekFormat="{dayofweek.abbreviated(3)}"  // abbreviated(2|3) | full
  firstDayOfWeek={DAY_OF_WEEK.Monday}
  minimumDate={new Date(2020, 0, 1)}
  maximumDate={new Date(2030, 11, 31)}
  placeholderText="Select a date"
  style={{width: 350, height: 30}}
  onValueChange={(e, d) => console.log('Windows date:', d)}
/>
```

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

### mode prop

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Illustrates how to use the `mode` prop to control the picker's display (date, time, datetime, countdown).

```APIDOC
## `mode` prop

Controls what the picker displays. iOS supports four modes; Android and Windows support `'date'` and `'time'` only.

```jsx
import DateTimePicker from '@react-native-community/datetimepicker';

// Date-only picker (all platforms)
<DateTimePicker value={new Date()} mode="date" onValueChange={(e, d) => console.log(d)} />

// Time-only picker (all platforms)
<DateTimePicker value={new Date()} mode="time" onValueChange={(e, d) => console.log(d)} />

// Combined date + time (iOS only)
<DateTimePicker value={new Date()} mode="datetime" onValueChange={(e, d) => console.log(d)} />

// Countdown timer in seconds (iOS only)
<DateTimePicker value={new Date(0, 0, 0, 0, 30)} mode="countdown" onValueChange={(e, d) => console.log(d)} />
```
```

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

### Disable Fabric Renderer on iOS (Revert to Paper)

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/CONTRIBUTING.md

Revert to the old React Native renderer (Paper) on iOS. This involves removing the build folder, running pod install without the new architecture flag, and rebuilding the app.

```sh
rm -r "example/ios/build"
cd "example/ios" && npx pod-install && cd - 
yarn start:ios
```

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

### Windows pch.h Include

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/docs/manual-installation.md

Include the necessary header file for the DateTimePicker Windows component in your `pch.h`.

```csharp
#include "winrt/DateTimePicker.h"

```

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

### iOS Podfile Configuration

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/docs/manual-installation.md

Update your Podfile to include the RNDateTimePicker and necessary React Native pods. Ensure `use_frameworks!` is enabled for Swift projects.

```ruby
# Allowed sources
source 'https://github.com/CocoaPods/Specs.git'

target 'MyApp' do
  # As we use Swift, ensure that `use_frameworks` is enabled.
  use_frameworks!

  # Specific iOS platform we are targetting
  platform :ios, '8.0'

  # Point to the installed version
  pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker/RNDateTimePicker.podspec'

  # React/React-Native specific pods
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',      # Include this for RN >= 0.47
    'DevSupport',     # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket',   # Needed for debugging
  ]

  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  # Third party deps podspec link
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

```

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

### Importing DateTimePicker Display and Mode Constants

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Import and log various constants for date and time picker displays and modes. These constants help in writing type-safe code and avoid magic numbers.

```javascript
import {
  DAY_OF_WEEK,
  ANDROID_DISPLAY,
  IOS_DISPLAY,
  ANDROID_MODE,
  IOS_MODE,
} from '@react-native-community/datetimepicker/src/constants';

console.log(DAY_OF_WEEK);
// { Sunday: 0, Monday: 1, Tuesday: 2, Wednesday: 3, Thursday: 4, Friday: 5, Saturday: 6 }

console.log(ANDROID_DISPLAY);
// { default: 'default', spinner: 'spinner', clock: 'clock', calendar: 'calendar' }

console.log(IOS_DISPLAY);
// { default: 'default', spinner: 'spinner', compact: 'compact', inline: 'inline' }

console.log(IOS_MODE);
// { date: 'date', time: 'time', datetime: 'datetime', countdown: 'countdown' }
```

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

### Component Props / Params

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

A detailed list of all available props for the DateTimePicker component, with platform-specific notes.

```APIDOC
## Component Props / Params

### `mode` (optional)
- Type: `enum('date', 'time', 'datetime', 'countdown')`
- Description: Sets the mode of the picker (date, time, datetime, or countdown).

### `display` (optional)
- Type: `enum('default', 'spinner', 'calendar', 'clock', 'compact')`
- Description: Specifies the display mode for the picker on Android.

### `design` (optional, Android only)
- Type: `object`
- Description: Customizes the picker's appearance on Android.

### `initialInputMode` (optional, Android only)
- Type: `enum('date', 'time')`
- Description: Sets the initial input mode for the picker on Android.

### `title` (optional, Android only)
- Type: `string`
- Description: The title displayed above the picker on Android.

### `fullscreen` (optional, Android only)
- Type: `boolean`
- Description: Whether the picker should be displayed in fullscreen mode on Android.

### `startOnYearSelection` (optional, Android only)
- Type: `boolean`
- Description: If true, the picker starts with the year selection view on Android.

### `onValueChange` (optional)
- Type: `function`
- Description: Callback function that is invoked when the date or time value changes.

### `onDismiss` (optional)
- Type: `function`
- Description: Callback function invoked when the picker is dismissed.

### `onNeutralButtonPress` (optional, Android only)
- Type: `function`
- Description: Callback function invoked when the neutral button is pressed on Android.

### `onChange` (optional, deprecated)
- Type: `function`
- Description: Deprecated. Use `onValueChange` instead.

### `value` (required)
- Type: `Date`
- Description: The currently selected date and time.

### `maximumDate` (optional)
- Type: `Date`
- Description: The latest selectable date.

### `minimumDate` (optional)
- Type: `Date`
- Description: The earliest selectable date.

### `timeZoneName` (optional, iOS or Android only)
- Type: `string`
- Description: The time zone name to use for the picker.

### `timeZoneOffsetInMinutes` (optional, iOS or Android only)
- Type: `number`
- Description: The time zone offset in minutes from UTC.

### `timeZoneOffsetInSeconds` (optional, Windows only)
- Type: `number`
- Description: The time zone offset in seconds from UTC (Windows only).

### `dayOfWeekFormat` (optional, Windows only)
- Type: `string`
- Description: Format string for the day of the week (Windows only).

### `dateFormat` (optional, Windows only)
- Type: `string`
- Description: Format string for the date (Windows only).

### `firstDayOfWeek` (optional, Android and Windows only)
- Type: `number` (0 for Sunday, 1 for Monday, etc.)
- Description: Specifies the first day of the week.

### `textColor` (optional, iOS only)
- Type: `string`
- Description: The text color for the picker on iOS.

### `accentColor` (optional, iOS only)
- Type: `string`
- Description: The accent color for the picker on iOS.

### `themeVariant` (optional, iOS only)
- Type: `enum('auto', 'light', 'dark')`
- Description: The theme variant for the picker on iOS.

### `locale` (optional, iOS only)
- Type: `string`
- Description: The locale to use for the picker on iOS.

### `is24Hour` (optional, Windows and Android only)
- Type: `boolean`
- Description: If true, displays the time in 24-hour format.

### `positiveButton` (optional, Android only)
- Type: `object`
- Description: Configuration for the positive button on Android.
  - `text` (string): The text to display on the button.

### `negativeButton` (optional, Android only)
- Type: `object`
- Description: Configuration for the negative button on Android.
  - `text` (string): The text to display on the button.

### `neutralButton` (optional, Android only)
- Type: `object`
- Description: Configuration for the neutral button on Android.
  - `text` (string): The text to display on the button.

### `minuteInterval` (optional)
- Type: `number`
- Description: The interval for minutes in the time picker.

### `style` (optional, iOS only)
- Type: `object`
- Description: Custom styles for the picker on iOS.

### `disabled` (optional, iOS only)
- Type: `boolean`
- Description: If true, the picker is disabled on iOS.

### `view props` (optional, iOS only)
- Type: `object`
- Description: Props to pass to the underlying view on iOS.

### `onError` (optional, Android only)
- Type: `function`
- Description: Callback function invoked when an error occurs on Android.
```

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

### Android settings.gradle Configuration

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/docs/manual-installation.md

Add the DateTimePicker module to your `android/settings.gradle` file to include it in your project.

```gradle
include ':@react-native-community_datetimepicker'
project(':@react-native-community_datetimepicker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/datetimepicker/android')

```

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

### Open Android Date/Time Picker

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Opens the native Android date or time picker dialog. The `params` object accepts properties similar to the component's props.

```APIDOC
## DateTimePickerAndroid.open(params: AndroidNativeProps)

### Description
Opens the native Android date or time picker dialog. The `params` object accepts properties similar to the component's props.

### Method
```javascript
DateTimePickerAndroid.open
```

### Parameters
#### `params` (object) - Required
An object containing configuration for the picker. See 'Component props / params of the Android imperative api' for available properties.
```

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

### fullscreen

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Has effect only when `design` is "material". Allows setting the date picker dialog to be fullscreen.

```APIDOC
## fullscreen [Android only]

### Description
:warning: Has effect only when `design` is "material". Allows setting the date picker dialog to be fullscreen.

### Parameters
#### Path Parameters
- **fullscreen** (boolean) - Optional - Set to true to make the dialog fullscreen

### Request Example
```js
<RNDateTimePicker fullscreen={true} />
```
```

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

### Windows-Specific Time Picker Formatting

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Configure the time picker for 24-hour format, minute intervals, and timezone offset for Windows. The `minuteInterval` prop controls the step for minute selection.

```jsx
// Time picker with 24-hour clock and minute step
<DateTimePicker
  mode="time"
  value={new Date()}
  is24Hour={true}
  minuteInterval={15}
  timeZoneOffsetInSeconds={3600}   // UTC+1
  onValueChange={(e, d) => console.log('Windows time:', d)}
/>
```

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

### Open and Dismiss Android DateTimePicker Imperatively

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Use `DateTimePickerAndroid.open` to display the picker with specified parameters and `DateTimePickerAndroid.dismiss` to close it. Ensure the `DateTimePickerAndroid` is imported from the library.

```typescript
import { DateTimePickerAndroid } from '@react-native-community/datetimepicker';

DateTimePickerAndroid.open(params: AndroidNativeProps)
DateTimePickerAndroid.dismiss(mode: AndroidNativeProps['mode'])
```

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

### Detox Android Release Build and Test

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/CONTRIBUTING.md

Build and test the Android app in release mode using Detox. Requires bundling the JS. An Android emulator must be running.

```sh
yarn bundle:android # we need to bundle js first
yarn detox:android:build:release
yarn detox:android:test:release
```

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

### Configure Positive Button for Android Picker

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Sets the label and text color for the positive action button on Android pickers.

```javascript
<RNDateTimePicker positiveButton={{label: 'OK', textColor: 'green'}} />
```

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

### `firstDayOfWeek` prop (Android / Windows)

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Set which day is shown first in the calendar grid for Android and Windows.

```APIDOC
## `firstDayOfWeek` prop (Android / Windows)

Set which day is shown first in the calendar grid.

```jsx
import DateTimePicker from '@react-native-community/datetimepicker';
import {DAY_OF_WEEK} from '@react-native-community/datetimepicker/src/constants';

<DateTimePicker
  value={new Date()}
  mode="date"
  firstDayOfWeek={DAY_OF_WEEK.Monday}  // Sunday=0, Monday=1, ..., Saturday=6
  onValueChange={(e, d) => console.log(d)}
/>
```
```

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

### dateFormat

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Optional prop for Windows only, used to set the display format for the date value in the picker's text box. Refer to Microsoft Globalization documentation for format details.

```APIDOC
## dateFormat (optional, Windows only)

### Description
Sets the display format for the date value in the picker's text box.
Reference: https://docs.microsoft.com/en-us/uwp/api/windows.globalization.datetimeformatting.datetimeformatter?view=winrt-18362#examples

### Parameters
- **dateFormat**: `string` - The format string for the date.

### Code Example
```javascript
<RNDateTimePicker dateFormat="dayofweek day month" />
```
```

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

### firstDayOfWeek

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Optional prop for Android and Windows only, indicating which day is displayed as the first day of the week. The value should correspond to an integer representing a day of the week.

```APIDOC
## firstDayOfWeek (optional, Android and Windows only)

### Description
Indicates which day is shown as the first day of the week.

### Parameters
- **firstDayOfWeek**: `number` - An integer representing the first day of the week (e.g., 0 for Sunday, 1 for Monday).

### Code Example
```javascript
<RNDateTimePicker firstDayOfWeek={DAY_OF_WEEK.Wednesday} />
// The native parameter type is an enum defined in defined https://docs.microsoft.com/en-us/uwp/api/windows.globalization.dayofweek?view=winrt-18362 - meaning an integer needs to passed here (DAY_OF_WEEK).
```
```

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

### positiveButton

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Set the positive button label and text color.

```APIDOC
## positiveButton [Android only]

### Description
Set the positive button label and text color.

### Parameters
#### Path Parameters
- **positiveButton** (object) - Optional - An object with `label` (string) and `textColor` (string) properties

### Request Example
```js
<RNDateTimePicker positiveButton={{label: 'OK', textColor: 'green'}} />
```
```

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

### Configure Negative Button for Android Picker

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Sets the label and text color for the negative action button on Android pickers.

```javascript
<RNDateTimePicker negativeButton={{label: 'Cancel', textColor: 'red'}} />
```

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

### startOnYearSelection

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

If true, the date picker will open with the year selector first. Not applicable for material picker.

```APIDOC
## startOnYearSelection [Android only]

### Description
If true, the date picker will open with the year selector first. Not applicable for material picker.

### Parameters
#### Path Parameters
- **startOnYearSelection** (boolean) - Optional - Set to true to start with year selection

### Request Example
```js
<RNDateTimePicker startOnYearSelection={true} />
```
```

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

### title

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Has effect only when `design` is "material". Allows setting the title of the dialog for the pickers.

```APIDOC
## title [Android only]

### Description
:warning: Has effect only when `design` is "material". Allows setting the title of the dialog for the pickers.

### Parameters
#### Path Parameters
- **title** (string) - Optional - The title for the dialog

### Request Example
```js
<RNDateTimePicker title="Choose anniversary" />
```
```

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

### Set Minute Interval with `minuteInterval`

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Snap minute selection to fixed intervals. On iOS, this prop only works when `display` is set to `"spinner"`.

```jsx
import DateTimePicker from '@react-native-community/datetimepicker';

// Allow only 15-minute increments
<DateTimePicker
  value={new Date()}
  mode="time"
  display="spinner"
  minuteInterval={15}   // 1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30
  onValueChange={(e, d) => console.log('Time with 15-min interval:', d)}
/>
```

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

### Windows-specific props

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Additional formatting props for the `CalendarDatePicker` control on Windows, including date format, day of week format, and time picker settings.

```APIDOC
## Windows-specific props

The Windows implementation exposes additional formatting props for the `CalendarDatePicker` control.

```jsx
import DateTimePicker from '@react-native-community/datetimepicker';
import {DAY_OF_WEEK} from '@react-native-community/datetimepicker/src/constants';

// Date picker with custom format
<DateTimePicker
  value={new Date()}
  mode="date"
  dateFormat="dayofweek day month"       // 'day month year' | 'dayofweek day month' | 'longdate' | 'shortdate'
  dayOfWeekFormat="{dayofweek.abbreviated(3)}"  // abbreviated(2|3) | full
  firstDayOfWeek={DAY_OF_WEEK.Monday}
  minimumDate={new Date(2020, 0, 1)}
  maximumDate={new Date(2030, 11, 31)}
  placeholderText="Select a date"
  style={{width: 350, height: 30}}
  onValueChange={(e, d) => console.log('Windows date:', d)}
/>

// Time picker with 24-hour clock and minute step
<DateTimePicker
  mode="time"
  value={new Date()}
  is24Hour={true}
  minuteInterval={15}
  timeZoneOffsetInSeconds={3600}   // UTC+1
  onValueChange={(e, d) => console.log('Windows time:', d)}
/>
```
```

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

### Set First Day of Week with `firstDayOfWeek` (Android/Windows)

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Set which day is shown first in the calendar grid. This prop is supported on Android and Windows platforms.

```jsx
import DateTimePicker from '@react-native-community/datetimepicker';
import {DAY_OF_WEEK} from '@react-native-community/datetimepicker/src/constants';

<DateTimePicker
  value={new Date()}
  mode="date"
  firstDayOfWeek={DAY_OF_WEEK.Monday}  // Sunday=0, Monday=1, ..., Saturday=6
  onValueChange={(e, d) => console.log(d)}
/>
```

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

### `minuteInterval` prop

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Snap minute selection to fixed intervals. On iOS, this prop only works with `display="spinner"`.

```APIDOC
## `minuteInterval` prop

Snap minute selection to fixed intervals. On iOS, only works with `display="spinner"`.

```jsx
import DateTimePicker from '@react-native-community/datetimepicker';

// Allow only 15-minute increments
<DateTimePicker
  value={new Date()}
  mode="time"
  display="spinner"
  minuteInterval={15}   // 1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30
  onValueChange={(e, d) => console.log('Time with 15-min interval:', d)}
/>
```
```

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

### dayOfWeekFormat

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Optional prop for Windows only, used to set the display format for the day of the week headers. Refer to Microsoft UWP documentation for format details.

```APIDOC
## dayOfWeekFormat (optional, Windows only)

### Description
Sets the display format for the day of the week headers.
Reference: https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.calendarview.dayofweekformat?view=winrt-18362#remarks

### Parameters
- **dayOfWeekFormat**: `string` - The format string for the day of the week.

### Code Example
```javascript
<RNDateTimePicker dayOfWeekFormat={'{dayofweek.abbreviated(2)}'} />
```
```

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

### negativeButton

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Set the negative button label and text color.

```APIDOC
## negativeButton [Android only]

### Description
Set the negative button label and text color.

### Parameters
#### Path Parameters
- **negativeButton** (object) - Optional - An object with `label` (string) and `textColor` (string) properties

### Request Example
```js
<RNDateTimePicker negativeButton={{label: 'Cancel', textColor: 'red'}} />
```
```

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

### Set Time Zone Offset in Seconds

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Allows setting a custom time zone offset in seconds. This prop is specific to Windows and is recommended to be replaced by `timeZoneName` for cross-platform consistency.

```javascript
// UTC+1
<RNDateTimePicker timeZoneOffsetInSeconds={3600} />
```

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

### DateTimePickerAndroid Imperative API

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

The recommended approach for Android to open the native picker dialog programmatically, similar to `Alert.alert()`. Supports both default and Material 3 designs.

```APIDOC
## `DateTimePickerAndroid` Imperative API

The recommended approach for Android. Opens the native picker dialog programmatically, like `Alert.alert()`. Supports both default and Material 3 designs.

```jsx
import React, {useState} from 'react';
import {View, Button, Text} from 'react-native';
import {DateTimePickerAndroid} from '@react-native-community/datetimepicker';

export default function AndroidDemo() {
  const [date, setDate] = useState(new Date());

  const showDatePicker = () => {
    DateTimePickerAndroid.open({
      value: date,
      mode: 'date',
      display: 'default',
      minimumDate: new Date(2000, 0, 1),
      maximumDate: new Date(2035, 11, 31),
      onValueChange: (event, selectedDate) => {
        if (selectedDate) setDate(selectedDate);
      },
      onDismiss: () => console.log('dismissed'),
    });
  };

  const showTimePicker = () => {
    DateTimePickerAndroid.open({
      value: date,
      mode: 'time',
      is24Hour: true,
      onValueChange: (event, selectedDate) => {
        if (selectedDate) setDate(selectedDate);
      },
    });
  };

  // Programmatically close a picker (returns Promise<boolean>)
  const dismissDatePicker = async () => {
    const dismissed = await DateTimePickerAndroid.dismiss('date');
    console.log('Was dismissed:', dismissed);
  };

  return (
    <View>
      <Text>Selected: {date.toLocaleString()}</Text>
      <Button title="Open Date Picker" onPress={showDatePicker} />
      <Button title="Open Time Picker" onPress={showTimePicker} />
      <Button title="Dismiss" onPress={dismissDatePicker} />
    </View>
  );
}
```
```

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

### Detox Android Debug Build and Test

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/CONTRIBUTING.md

Build and test the Android app in debug mode using Detox. Requires running the Metro Bundler. An Android emulator must be running.

```sh
# Debug requires to run Metro Bundler
yarn start
yarn detox:android:build:debug
yarn detox:android:test:debug
```

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

### Imperative Date Picker Usage on Android

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Recommended imperative API usage for showing a date picker on Android. This approach uses DateTimePickerAndroid.open to display the picker.

```javascript
export const App = () => {
  const [date, setDate] = useState(new Date(1598051730000));

  const showMode = (currentMode) => {
    DateTimePickerAndroid.open({
      value: date,
      onValueChange: (event, selectedDate) => setDate(selectedDate),
      mode: currentMode,
      is24Hour: true,
    });
  };

  const showDatepicker = () => {
    showMode('date');
  };

  const showTimepicker = () => {
    showMode('time');
  };

  return (
    <SafeAreaView>
      <Button onPress={showDatepicker} title="Show date picker!" />
      <Button onPress={showTimepicker} title="Show time picker!" />
      <Text>selected: {date.toLocaleString()}</Text>
    </SafeAreaView>
  );
};
```

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

### Android Styling via Expo Config Plugin

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Customize native Android dialog colors at build time using the Expo config plugin. Requires `>= 8.2.0` and an Expo development build.

```APIDOC
## Android Styling via Expo Config Plugin

Customize native Android dialog colors at build time using the Expo config plugin (requires `>= 8.2.0` and an Expo development build).

```json
// app.json
{
  "expo": {
    "plugins": [
      [
        "@react-native-community/datetimepicker",
        {
          "android": {
            "datePicker": {
              "colorAccent":       {"light": "#FF5722"},
              "textColorPrimary":  {"light": "#FF5722"},
              "windowBackground":  {"light": "#FFFFFF", "dark": "#121212"}
            },
            "timePicker": {
              "background":             {"light": "#FF5722", "dark": "#383838"},
              "numbersBackgroundColor": {"light": "#FF5722", "dark": "#383838"},
              "numbersTextColor":       {"light": "#FFFFFF", "dark": "#EEEEEE"},
              "headerBackground":       {"light": "#E64A19", "dark": "#212121"}
            }
          }
        }
      ]
    ]
  }
}
```

After updating, rebuild the native project:

```bash
npx expo prebuild -p android --clean
expo run:android
```
```

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

### Set Initial Input Mode for Android Date Picker

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Defines the initial input mode for the date picker on Android, only effective when `design` is 'material'. 'default' shows the calendar/clock view, while 'keyboard' allows direct typing.

```javascript
<RNDateTimePicker initialInputMode="default" />
```

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

### iOS-specific props: `themeVariant`, `accentColor`, `textColor`

Source: https://context7.com/react-native-datetimepicker/datetimepicker/llms.txt

Override system appearance for the picker on iOS 14+ with options for theme, accent, and text colors.

```APIDOC
## iOS-specific props: `themeVariant`, `accentColor`, `textColor`

Override system appearance for the picker on iOS 14+.

```jsx
import DateTimePicker from '@react-native-community/datetimepicker';
import {useColorScheme} from 'react-native';

export default function IOSStyledPicker() {
  const colorScheme = useColorScheme();

  return (
    <DateTimePicker
      value={new Date()}
      mode="date"
      display="inline"                  // or 'compact' | 'spinner' 
      themeVariant={colorScheme}        // 'light' | 'dark'
      accentColor="#FF5722"             // tint color for selection highlights (not 'spinner')
      textColor="#333333"               // spinner text color (only display='spinner')
      onValueChange={(e, d) => console.log(d)}
    />
  );
}
```
```

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

### Configure Android Date/Time Picker Styles in app.json

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/docs/android-styling.md

Specify custom colors for date and time pickers in your app.json or app.config.js. Ensure both 'light' and 'dark' modes are declared if you wish to influence dark mode colors; otherwise, the plugin will throw an error. The plugin also validates the color names used.

```json
{
  "expo": {
    "plugins": [
      [
        "@react-native-community/datetimepicker",
        {
          "android": {
            "datePicker": {
              "colorAccent": {
                "light": "#FF5722"
              },
              "textColorPrimary": {
                "light": "#FF5722"
              }
            },
            "timePicker": {
              "background": {"light": "#FF5722", "dark": "#383838"},
              "numbersBackgroundColor": {"light": "#FF5722", "dark": "#383838"}
            }
          }
        }
      ]
    ]
  }
}
```

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

### Enable Fullscreen for Android Date Picker

Source: https://github.com/react-native-datetimepicker/datetimepicker/blob/master/README.md

Configures the date picker dialog to be fullscreen on Android, only effective when `design` is 'material'.

```javascript
<RNDateTimePicker fullscreen={true} />
```