#Range Date Picker

The range date picker provides a modal allowing the selection of a date range.

#Preview

#Usage

import React from "react";
import { View, Text } from "react-native";
import { Button } from 'react-native-paper';
import { DatePickerModal } from 'react-native-paper-dates';
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function App() {
  const [range, setRange] = React.useState({ startDate: undefined, endDate: undefined });
  const [open, setOpen] = React.useState(false);

   const onDismiss = React.useCallback(() => {
    setOpen(false);
  }, [setOpen]);

 const onConfirm = React.useCallback(
    ({ startDate, endDate }) => {
      setOpen(false);
      setRange({ startDate, endDate });
    },
    [setOpen, setRange]
  );

  return (
    <SafeAreaProvider>
      <View style={{ justifyContent: 'center', flex: 1, alignItems: 'center' }}>
        <Button onPress={() => setOpen(true)} uppercase={false} mode="outlined">
          Pick range
        </Button>
        <DatePickerModal
          locale="en"
          mode="range"
          visible={open}
          onDismiss={onDismiss}
          startDate={range.startDate}
          endDate={range.endDate}
          onConfirm={onConfirm}
        />
      </View>
    </SafeAreaProvider>
  )
}

#Live Example

View an interactive Expo snack.

#Props

allowEditing
Type: boolean | undefined
Whether the user can toggle between the calendar and text input views. Defaults to true.

animationType
Type: 'slide' | 'fade' | 'none' | undefined
The animation used when opening the component. Defaults to 'slide' on iOS/Android and 'none' on web.

calendarIcon
Type: string | undefined
The icon used to switch back to the calendar from the input view. Defaults to 'calendar-blank'. Pass a name from MaterialCommunityIcons.

closeIcon
Type: string | undefined
The icon used to close the modal. Defaults to 'close'. Pass a name from MaterialCommunityIcons.

disableStatusBar
Type: boolean | undefined
When true, the modal does not modify the status bar appearance or translucency. Defaults to false.

disableStatusBarPadding
Type: boolean | undefined
When true, skips safe-area top padding for the status bar. Defaults to false.

disableWeekDays
Type: number[] | undefined
Weekday indexes to hide from the calendar grid (for example [0, 6] to hide Sunday and Saturday).

editIcon
Type: string | undefined
The icon used to switch from the calendar to the input view. Defaults to 'pencil-outline'. Pass a name from MaterialCommunityIcons.

emptyLabel
Type: string | undefined
Fallback text when a range bound is empty. Defaults to a single space.

endDate
Type: Date | undefined
The currently selected end date.

endLabel
Type: string | undefined
Label shown for an empty end date. Defaults to 'End'.

endYear
Type: number | undefined
The last year available in the year picker. Defaults to 2200.

headerSeparator
Type: string | undefined
Separator between start and end dates in the header. Defaults to '-'.

inputEnabled
Type: boolean | undefined
Whether the text input view is editable. Defaults to true.

label
Type: string | undefined
Header label. Defaults to the locale translation for selectRange (English: 'Select period').

locale (Required)
Type: string
Locale used for formatting and translations (for example 'en' or 'de').

mode (Required)
Type: 'single' | 'multiple' | 'range'
Selection mode. Use 'range' for this picker.

onChange
Type: (params: { startDate: Date | undefined, endDate: Date | undefined }) => void
Called whenever the selected range changes inside the modal.

onConfirm (Required)
Type: (params: { startDate: Date | undefined, endDate: Date | undefined }) => void
Called when the user confirms the selection.

onDismiss (Required)
Type: () => void
Called when the modal is dismissed.

placeholder
Type: string | undefined
Placeholder text for the edit (text input) view.

presentationStyle
Type: 'overFullScreen' | 'pageSheet' | 'formSheet' | undefined
iOS modal presentation style. Defaults to 'overFullScreen'.

• 'overFullScreen': Full-screen overlay (default).
• 'pageSheet': Card-style sheet. On iPad (width and height > 650pt), automatically uses formSheet for a better fit.
• 'formSheet': Centered form sheet (~540×620pt on iPad).

saveLabel
Type: string | undefined
Confirm button label. Defaults to the locale translation for save (English: 'Save').

saveLabelDisabled
Type: boolean | undefined
Disables the confirm button. Defaults to false.

startDate
Type: Date | undefined
The currently selected start date.

startLabel
Type: string | undefined
Label shown for an empty start date. Defaults to 'Start'.

startWeekOnMonday
Type: boolean | undefined
When true, the calendar grid starts on Monday. Defaults to false.

startYear
Type: number | undefined
The first year available in the year picker. Defaults to 1800.

statusBarOnTopOfBackdrop
Type: boolean | undefined
When true, renders the status bar on top of the modal backdrop (also applied automatically for sheet presentations).

uppercase
Type: boolean | undefined
Whether header and action labels are uppercased. Defaults to false.

validRange
Type: { startDate?: Date, endDate?: Date, disabledDates?: Date[] }
Limits which dates can be selected. Dates outside the range are grayed out.

visible (Required)
Type: boolean
Whether the modal is shown.

withDateFormatInLabel
Type: boolean | undefined
When true, appends the expected date format to labels in the edit view.