import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle } from 'react-native'; import type { TextInputProps } from '../TextInput'; export interface DatePickerProps { /** * Date picker input label. */ label: string; /** * Current date value. Must be in correct default format or format provided via format prop. */ value?: Date; /** * Datepicker variants. * - default: is default UI of Android or iOS * - calendar: calendar UI * - month-year: month and year UI */ variant?: 'default' | 'calendar' | 'month-year'; /** * Mininum date. Restrict the range of possible date values. */ minDate?: Date; /** * Maximum date. Restrict the range of possible date values. */ maxDate?: Date; /** * Input placeholder. Date format will be used as placeholder if not specified. */ placeholder?: string; /** * Callback that is called when new value is selected. */ onChange: (value: Date) => void; /** * Confirm label text. iOS only. */ confirmLabel: string; /** * Date format. Default format is dd/MM/yyyy. * Following date-fns's format (https://date-fns.org/v2.16.1/docs/format). */ displayFormat?: string; /** * Whether the Date picker is disabled. */ disabled?: boolean; /** * Error message to display. */ error?: string; /** * Whether the value is required, if true, an asterisk will be appended to the label. */ required?: boolean; /** * The helper text to display. */ helpText?: string; /** * Addtional style. */ style?: StyleProp; /** * Testing id of the component. */ testID?: string; /** * Calendar variant prop. Label for the confirm button of the month picker, Android only. */ monthPickerConfirmLabel?: string; /** * Calendar variant prop. Label for the cancel button of the month picker, Android only. */ monthPickerCancelLabel?: string; /** * Supported orientations for the DatePicker modal, iOS only. */ supportedOrientations?: ('portrait' | 'landscape')[]; /** * Locale for the date picker, iOS only. */ locale?: string; /** * [Android only] autoTheme will automatically set the theme based on the device's light mode or dark mode. * */ autoTheme?: boolean; /** * Custom renderer for the selected value. The function provides the current date object and the formatted date string for the current display format. */ renderSelectedValue?: (value: { date: Date; formattedDateString: string; }, props?: NativeTextInputProps) => React.ReactNode; } export interface InternalDatePickerProps extends DatePickerProps { /** * Props that are passed to TextInput. */ inputProps?: Pick; /** * Whether the component is used within a FormGroup for styling purposes. */ groupStyleEnabled?: boolean; /** * Input component to use instead of the default TextInput. */ TextInputComponent?: React.ComponentType; }