React-native-calendar-range-picker NPM

:point_up_2: react-native-calendar-range-picker

A Simple react native calendar picker using Hooks.

demo-play

Install

yarn add react-native-calendar-range-picker

npm install react-native-calendar-range-picker --save

Usage

Select date range

import Calendar from "react-native-calendar-range-picker";

<View style={{ flex: 1 }}>
  <Calendar
    startDate="2024-03-05"
    endDate="2024-03-12"
    onChange={({ startDate, endDate }) => console.log({ startDate, endDate })}
  />
</View>;

Select single date

<View style={{ height: 600 }}>
  <Calendar
    startDate="2024-03-05"
    singleSelectMode
    onChange={(date) => console.log(date)}
  />
</View>

Props

Common props you may want to specify include:

Properties	PropType	Description
`onChange`	`func`	(Required) Handler which gets executed on day press including date data.(start, end or single date)
`singleSelectMode`	`boolean`	Only select single date. (default = false)
`pastYearRange`	`number`	Amount of months allowed to scroll to the past. (default = 1)
`futureYearRange`	`number`	Amount of months allowed to scroll to the future. (default = 2)
`locale`	`object`	Can be localized by adding custom locales to locale object.
`startDate`	`string(YYYY-MM-DD)`	Initially visible start date.
`endDate`	`string(YYYY-MM-DD)`	Initially visible end date.
`initialNumToRender`	`number`	FlatList initialNumToRender prop.(to protect slow initial render)(default = 7)
`flatListProps`	`FlatList Props`	FlatList all props.
`isMonthFirst`	`boolean`	Switch year and month order. (2024 April -> April 2024)
`disabledBeforeToday`	`boolean`	Disable select day before today.
`disabledAfterToday`	`boolean`	Disable select day after today.
`style`	`object`	Customize style.

Locale

const CUSTOM_LOCALE = {
    monthNames: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
    ],
    dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    today: 'Today',
    year: '', // letter behind year number -> 2024{year}
  }

<Calendar
  locale={CUSTOM_LOCALE}
  ...
/>;

Customize Style

<Calendar
  style={{
    container: {},
    monthContainer: {},
    monthOverlayContainer: {},
    weekContainer:{},
    monthNameText: {},
    dayNameText: {},
    dayText: {},
    dayTextColor: '#f7f7f7',
    holidayColor: 'rgba(0,0,0,0.5)',
    todayColor: 'blue',
    disabledTextColor: '#Hex',
    selectedDayTextColor: '#Hex',
    selectedDayBackgroundColor: '#Hex',
    selectedBetweenDayTextColor: '#Hex',
    selectedBetweenDayBackgroundTextColor: '#Hex',
  }}
  ...
/>;