Component API

/**
 * Cross-platform DateTimePicker component
 * @param props - Platform-specific props (IOSNativeProps | AndroidNativeProps | WindowsNativeProps)
 * @returns React component for date/time selection
 */
declare const DateTimePicker: React.FC<
  IOSNativeProps | AndroidNativeProps | WindowsNativeProps
>;

import React, { useState } from "react";
import DateTimePicker from "@react-native-community/datetimepicker";

// iOS Usage - Declarative component
function IOSDatePicker() {
  const [date, setDate] = useState(new Date());

  return (
    <DateTimePicker
      value={date}
      mode="date"
      display="compact"
      onChange={(event, selectedDate) => setDate(selectedDate || date)}
      locale="en-US"
      textColor="#007AFF"
      accentColor="#FF6B6B"
      themeVariant="light"
    />
  );
}

// Android Usage - Component with Material Design
function AndroidDatePicker() {
  const [date, setDate] = useState(new Date());
  const [show, setShow] = useState(false);

  return (
    <>
      <Button title="Show Picker" onPress={() => setShow(true)} />
      {show && (
        <DateTimePicker
          value={date}
          mode="date"
          display="default"
          design="material"
          title="Select Date"
          fullscreen={false}
          onChange={(event, selectedDate) => {
            setShow(false);
            if (selectedDate) setDate(selectedDate);
          }}
        />
      )}
    </>
  );
}

type IOSNativeProps = Readonly<{
  /** The currently selected date (required) */
  value: Date;
  
  /** Date change handler - called when user changes date/time */
  onChange?: (event: DateTimePickerEvent, date?: Date) => void;
  
  /** The date picker mode */
  mode?: IOSMode;
  
  /** Sets the preferredDatePickerStyle for picker */
  display?: IOSDisplay;
  
  /** The date picker locale */
  locale?: string;
  
  /** The interval at which minutes can be selected */
  minuteInterval?: MinuteInterval;
  
  /** Timezone offset in minutes */
  timeZoneOffsetInMinutes?: number;
  
  /** The tz database name */
  timeZoneName?: string;
  
  /** The date picker text color */
  textColor?: string;
  
  /** The date picker accent color (selected date and navigation icons) */
  accentColor?: string;
  
  /** Override theme variant used by iOS native picker */
  themeVariant?: 'dark' | 'light';
  
  /** Is this picker disabled? */
  disabled?: boolean;
  
  /** Maximum date - restricts the range of possible values */
  maximumDate?: Date;
  
  /** Minimum date - restricts the range of possible values */
  minimumDate?: Date;
}>;

type AndroidNativeProps = Readonly<{
  /** The currently selected date (required) */
  value: Date;
  
  /** Date change handler - called when user changes date/time or dismisses */
  onChange?: (event: DateTimePickerEvent, date?: Date) => void;
  
  /** The date picker mode */
  mode?: AndroidMode;
  
  /** The display options (not supported for Material 3 pickers) */
  display?: Display;
  
  /** Use Material 3 pickers or the default ones */
  design?: Design;
  
  /** (Material 3 only) The initial input mode when the dialog opens */
  initialInputMode?: InputMode;
  
  /** (Material 3 only) The title of the dialog */
  title?: string;
  
  /** (Material 3 only) Controls if the date picker should be shown as fullscreen dialog */
  fullscreen?: boolean;
  
  /** Display TimePicker in 24 hour */
  is24Hour?: boolean;
  
  /** The interval at which minutes can be selected (not supported in Material 3) */
  minuteInterval?: MinuteInterval;
  
  /** Timezone offset in minutes */
  timeZoneOffsetInMinutes?: number;
  
  /** The tz database name */
  timeZoneName?: string;
  
  /** Maximum date - restricts the range of possible values */
  maximumDate?: Date;
  
  /** Minimum date - restricts the range of possible values */
  minimumDate?: Date;
  
  /** Positive button configuration */
  positiveButton?: ButtonType;
  
  /** Neutral button configuration (not supported in Material 3) */
  neutralButton?: ButtonType;
  
  /** Negative button configuration */
  negativeButton?: ButtonType;
  
  /** @deprecated use positiveButton instead */
  positiveButtonLabel?: string;
  
  /** @deprecated use neutralButton instead */
  neutralButtonLabel?: string;
  
  /** @deprecated use negativeButton instead */
  negativeButtonLabel?: string;
  
  /** Sets the first day of the week shown in the calendar */
  firstDayOfWeek?: DAY_OF_WEEK;
  
  /** Callback when an error occurs inside the date picker native code */
  onError?: (error: Error) => void;
}>;

type WindowsNativeProps = Readonly<{
  /** The currently selected date (required) */
  value: Date;
  
  /** Date change handler - called when user changes date/time */
  onChange?: (event: DateTimePickerEvent, date?: Date) => void;
  
  /** The display options */
  display?: Display;
  
  /** Placeholder text for the picker */
  placeholderText?: string;
  
  /** Date format style */
  dateFormat?: WindowsDateFormat;
  
  /** Day of week format style */
  dayOfWeekFormat?: WindowsDayOfWeekFormat;
  
  /** Sets the first day of the week shown in the calendar */
  firstDayOfWeek?: DAY_OF_WEEK;
  
  /** Timezone offset in seconds */
  timeZoneOffsetInSeconds?: number;
  
  /** The tz database name */
  timeZoneName?: string;
  
  /** Display TimePicker in 24 hour */
  is24Hour?: boolean;
  
  /** The interval at which minutes can be selected */
  minuteInterval?: number;
  
  /** Accessibility label for the picker */
  accessibilityLabel?: string;
  
  /** Maximum date - restricts the range of possible values */
  maximumDate?: Date;
  
  /** Minimum date - restricts the range of possible values */
  minimumDate?: Date;
}>;

/** iOS picker modes */
type IOSMode = 'date' | 'time' | 'datetime' | 'countdown';

/** Android picker modes */
type AndroidMode = 'date' | 'time';

/** Android display styles */
type Display = 'spinner' | 'default' | 'clock' | 'calendar';

/** iOS display styles */
type IOSDisplay = 'default' | 'compact' | 'inline' | 'spinner';

/** Material Design system selection */
type Design = 'default' | 'material';

/** Android Material 3 input mode */
type InputMode = 'default' | 'keyboard';

/** Minute selection intervals */
type MinuteInterval = 1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30;

/** Day of week values (0=Sunday, 6=Saturday) */
type DAY_OF_WEEK = 0 | 1 | 2 | 3 | 4 | 5 | 6;

/** Windows date format options */
type WindowsDateFormat = 
  | 'day month year'
  | 'dayofweek day month'
  | 'longdate'
  | 'shortdate';

/** Windows day of week format options */
type WindowsDayOfWeekFormat = 
  | '{dayofweek.abbreviated(2)}'
  | '{dayofweek.abbreviated(3)}'
  | '{dayofweek.full}';