react-native-ui-lib/src/components/dateTimePicker/dateTimePicker.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "DateTimePicker",
  "category": "form",
  "description": "Date and Time Picker Component that wraps RNDateTimePicker for date and time modes. See: https://github.com/react-native-community/react-native-datetimepicker#react-native-datetimepicker",
  "note": "DateTimePicker uses a native library. You MUST add and link the native library to both iOS and Android projects",
  "extends": ["form/TextField"],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/DateTimePickerScreen.tsx",
  "images": [
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_iOS.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/DateTimePicker/DateTimePicker_Android.gif?raw=true"
  ],
  "props": [
    {
      "name": "mode",
      "type": "DATE | TIME",
      "description": "The type of picker to display ('date' or 'time')",
      "default": "MODES.DATE"
    },
    {
      "name": "value",
      "type": "Date",
      "description": "The initial value to set the picker to",
      "note": "Defaults to device's date and time"
    },
    {"name": "onChange", "type": "() => Date", "description": "Called when the date/time change"},
    {"name": "editable", "type": "boolean", "description": "Should this input be editable or disabled"},
    {"name": "minimumDate", "type": "Date", "description": "The minimum date or time value to use"},
    {"name": "maximumDate", "type": "Date", "description": "The maximum date or time value to use"},
    {
      "name": "dateTimeFormatter",
      "type": "(value: Date, mode: DateTimePickerMode) => string",
      "description": "A callback function to format the time or date"
    },
    {
      "name": "locale",
      "type": "string",
      "description": "Allows changing of the locale of the component",
      "note": "iOS only"
    },
    {
      "name": "is24Hour",
      "type": "boolean",
      "description": "Allows changing of the time picker to a 24 hour format",
      "note": "Android only"
    },
    {
      "name": "minuteInterval",
      "type": "number",
      "description": "The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30",
      "note": "iOS only"
    },
    {
      "name": "timeZoneOffsetInMinutes",
      "type": "number",
      "description": "Allows changing of the timeZone of the date picker. By default it uses the device's time zone",
      "note": "iOS only"
    },
    {"name": "dialogProps", "type": "DialogProps", "description": "Props to pass the Dialog component"},
    {"name": "headerStyle", "type": "ViewStyle", "description": "Style to apply to the iOS dialog header"},
    {"name": "renderInput", "type": "JSX.Element", "description": "Render custom input"},
    {
      "name": "themeVariant",
      "type": "LIGHT | DARK",
      "description": "Override system theme variant (dark or light mode) used by the date picker"
    },
    {
      "name": "display",
      "type": "string",
      "description": "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"
    },
    {
      "name": "confirmButtonProps",
      "type": "ButtonProps",
      "description": "Confirm button props"
    },
    {
      "name": "cancelButtonProps",
      "type": "ButtonProps",
      "description": "Cancel button props"
    }
  ],
  "snippet": ["<DateTimePicker title={'Select time'$1} placeholder={'Placeholder'$2} mode={'time'$3}/>"]
}