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

!platforms

A Simple react native calendar picker using Hooks.

!demo-play

Install

``
yarn add react-native-calendar-range-picker
`

or

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

Usage

$3

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


startDate="2024-03-05"
endDate="2024-03-12"
onChange={({ startDate, endDate }) => console.log({ startDate, endDate })}
/>
;
`

$3

`jsx

startDate="2024-03-05"
singleSelectMode
onChange={(date) => console.log(date)}
/>

`

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. |

$3

`jsx
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}
}

locale={CUSTOM_LOCALE}
...
/>;
`

$3

`jsx
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',
}}
...
/>;
``

License

MIT