3.3.7 • Published 2 years ago
@lamtran91/rn-select-date-range v3.3.7
rn-select-date-range
A simple React Native date range picker component
Installing
npm install rn-select-date-range
or
yarn add rn-select-date-range
Screenshot
Prerequisites
CalendarPicker requires Moment JS.
npm install --save moment
Example React Native App
import moment from "moment";
import React, { useState } from "react";
import { SafeAreaView, StyleSheet, View, Text } from "react-native";
import DateRangePicker from "rn-select-date-range";
const App = () => {
const [selectedRange, setRange] = useState({});
return (
<SafeAreaView>
<View style={styles.container}>
<DateRangePicker
onSelectDateRange={(range) => {
setRange(range);
}}
blockSingleDateSelection={true}
responseFormat="YYYY-MM-DD"
maxDate={moment()}
minDate={moment().subtract(100, "days")}
selectedDateContainerStyle={styles.selectedDateContainerStyle}
selectedDateStyle={styles.selectedDateStyle}
/>
<View style={styles.container}>
<Text>first date: {selectedRange.firstDate}</Text>
<Text>second date: {selectedRange.secondDate}</Text>
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
margin: 50,
},
selectedDateContainerStyle: {
height: 35,
width: "100%",
alignItems: "center",
justifyContent: "center",
backgroundColor: "blue",
},
selectedDateStyle: {
fontWeight: "bold",
color: "white",
},
});
export default App;
CalendarPicker Props
Prop | Type | Required | Description |
---|---|---|---|
onSelectDateRange | Method | Required | This will return a object with firstDate and lastDate |
maxDate | Moment Date | Optional | If you need to pass Max Date user can select, set this prop as a moment date |
minDate | Moment Date | Optional | If you need to pass Min Date user can select, set this prop as a moment date |
responseFormat | String | Optional | Please refere the date formats here Moment Date Formats |
blockSingleDateSelection | boolean | Optional | This will block the user to click single date without date range |
font | String | Optional | Name of the font you are using in your theme |
selectedDateContainerStyle | Style | Optional | Style of the selected date container |
selectedDateStyle | Style | Optional | Style of the selected date |
ln | string | Optional | Two letter locales string that is supported by the Moment library |
onConfirm | Method | Optional | This function will be executed if confirm button pressed |
onClear | Method | Optional | This function will be executed if clear button pressed |
clearBtnTitle | string | Optional | Text for the button to clear data. If empty string passed, button will not be shown |
confirmBtnTitle | string | Optional | Text for the button to confirm selection of dates. If empty string passed, button will not be shown |
onSelectDateRange response
{
firstDate: if you pass responseFormat it will be a formatted date, if not it will be a moment date
lastDate: if you pass responseFormat it will be a formatted date, if not it will be a moment date
}
Run the sample app
cd example
npm install
npx react-native run-ios
Suggestions?
Open Issues. Submit PRs.