This is a simple snippet written on top of react-native-calendars
with hooks
and TypeScript
inspired by https://github.com/lazaronixon/react-native-date-range-picker.
It depends on date-fns
and react-native-calendars
First run
yarn add date-fns react-native-calendars @types/react-native-calendars
then just include date-range-picker.tsx
in your project and use it as below:
import { addDays, addYears } from "date-fns";
...
<DateRangePicker
initialRange={{from: new Date(), to: addDays(new Date(), 4)}}
minDate={new Date()}
maxDate={addYears(new Date(), 1)}
onFromOnlySelected={(from: Date) => {
console.warn(from);
}}
onFullRangeSelected={(range: IDateRange) => {
console.warn(range);
}}
firstDay={1} //Sunday is 0, Monday is 1...
width={"100%"} // style.width -> number | string
color={"#00ff00"}
textColor={"#000000"}
/>
Locale config is commented out in date-range-picker.tsx
so just comment in and change as needed.