React Native Paper Dates

    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.

    dayContent
    Type: ((params: { date: Date, day: number, month: number, year: number, selected: boolean, isToday: boolean, disabled: boolean }) => React.ReactNode) | undefined
    Renders custom content inside each day, for example a dot or a badge with the number of events on that date. Return null for days that need no content. The node is overlaid on the day and does not receive touches, so pressing it still selects the date.

    <DatePickerModal
  locale="en"
  mode="single"
  visible={open}
  onDismiss={onDismiss}
  onConfirm={onConfirm}
  dayContent={({ date }) =>
    eventCounts[date.toDateString()] ? (
      <Badge size={16}>{eventCounts[date.toDateString()]}</Badge>
    ) : null
  }
/>

    dayContentPosition
    Type: 'top' | 'top-left' | 'top-right' | 'center' | 'bottom' | 'bottom-left' | 'bottom-right' | undefined
    Where dayContent is anchored within the day. Defaults to 'bottom'. The anchor box matches the day circle rather than the wider grid cell, so the corner values sit on the circle's bounding box.

    dayContentStyle
    Type: StyleProp<ViewStyle> | undefined
    Style for the dayContent overlay container. Useful to nudge the content past the day circle, for example { marginTop: -3, marginRight: -3 } for a badge that overhangs the top-right corner.

    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.