1.6.0 • Published 1 year ago
react-native-calendar-range-picker v1.6.0
:point_up_2: react-native-calendar-range-picker
A Simple react native calendar picker using Hooks.
Install
yarn add react-native-calendar-range-picker
or
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',
}}
...
/>;
License
MIT
1.6.0
1 year ago
1.5.8
2 years ago
1.5.7
2 years ago
1.5.5
2 years ago
1.5.4
2 years ago
1.5.6
2 years ago
1.5.3
4 years ago
1.5.2
4 years ago
1.5.1
4 years ago
1.4.6
4 years ago
1.5.0
4 years ago
1.4.9
4 years ago
1.4.8
4 years ago
1.4.7
4 years ago
1.4.5
5 years ago
1.4.4
5 years ago
1.4.3
5 years ago
1.3.7
5 years ago
1.4.2
5 years ago
1.4.1
5 years ago
1.4.0
5 years ago
1.3.9
5 years ago
1.3.8
5 years ago
1.3.6
5 years ago
1.3.5
5 years ago
1.3.4
5 years ago
1.3.3
5 years ago
1.3.2
5 years ago
1.3.1
5 years ago
1.3.0
5 years ago
1.2.2
5 years ago
1.2.1
5 years ago
1.2.0
5 years ago
1.1.8
5 years ago
1.1.7
5 years ago
1.1.6
5 years ago
1.1.5
5 years ago
1.1.4
5 years ago
1.1.3
5 years ago
1.1.2
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago