Skip to main content

DateTimePicker

<DateTimePicker title={'Select time'} placeholder={'Placeholder'} mode={'time'}/>
TIP
This component extends the form/TextField props.
APIThis is the list of additional props for the component

cancelButtonProps
ButtonProps
​

Cancel button props

confirmButtonProps
ButtonProps
​

Confirm button props

dateTimeFormatter
(value: Date, mode: DateTimePickerMode) => string
​

A callback function to format the time or date

dialogProps
DialogProps
​

Props to pass the Dialog component

display
string
​

Defines the visual display of the picker. The default value is 'spinner' on iOS and 'default' on Android. The list of all possible values are default, spinner, calendar or clock on Android and default, spinner, compact or inline for iOS. Full list can be found here: https://github.com/react-native-datetimepicker/datetimepicker#display-optional

editable
boolean
​

Should this input be editable or disabled

headerStyle
ViewStyle
​

Style to apply to the iOS dialog header

is24Hour
boolean
​

Allows changing of the time picker to a 24 hour formatAndroid only

locale
string
​

Allows changing of the locale of the componentiOS only

maximumDate
Date
​

The maximum date or time value to use

minimumDate
Date
​

The minimum date or time value to use

minuteInterval
number
​

The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30iOS only

mode
DATE | TIME
​

The type of picker to display ('date' or 'time'). Default is MODES.DATE

onChange
() => Date
​

Called when the date/time change

renderInput
JSX.Element
​

Render custom input

themeVariant
LIGHT | DARK
​

Override system theme variant (dark or light mode) used by the date picker

timeZoneOffsetInMinutes
number
​

Allows changing of the timeZone of the date picker. By default it uses the device's time zoneiOS only

value
Date
​

The initial value to set the picker toDefaults to device's date and time