react-native-daterange-picker
Version:
Date range and single date picker for React Native (Supports iOS and Android)
279 lines (236 loc) • 12.9 kB
Markdown
# react-native-daterange-picker
A React Native component for picking date ranges or single dates.
- Completely customizable
- Uses Moment.js for handling dates
<img src="http://www.deniz.gg/date_range_4.gif" width=300/>
## Installation
`yarn add react-native-daterange-picker`
or
`npm install --save react-native-daterange-picker`
## Usage
### Date range
```js
import React from "react";
import { StyleSheet, View, Text } from "react-native";
import moment from "moment";
import DateRangePicker from "react-native-daterange-picker";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: null,
endDate: null,
displayedDate: moment(),
};
}
setDates = (dates) => {
this.setState({
...dates,
});
};
render() {
const { startDate, endDate, displayedDate } = this.state;
return (
<View style={styles.container}>
<DateRangePicker
onChange={this.setDates}
endDate={endDate}
startDate={startDate}
displayedDate={displayedDate}
range
>
<Text>Click me!</Text>
</DateRangePicker>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
```
### Single date
<img src="http://www.deniz.gg/single_date_3.gif" width=300/>
Use the `date` prop instead of the `startDate` and `endDate` props.
```js
import React from "react";
import { StyleSheet, View, Text } from "react-native";
import moment from "moment";
import DateRangePicker from "react-native-daterange-picker";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
date: null,
displayedDate: moment(),
};
}
setDates = (dates) => {
this.setState({
...dates,
});
};
render() {
const { date, displayedDate } = this.state;
return (
<View style={styles.container}>
<DateRangePicker
onChange={this.setDates}
date={date}
displayedDate={displayedDate}
>
<Text>Click me!</Text>
</DateRangePicker>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
```
### Minimum and maximum allowed dates
<img src="http://www.deniz.gg/disabled_dates_2.gif" width=300/>
Use the `minDate` and `maxDate` props to disable the dates that aren't allowed.
```js
import React from "react";
import { StyleSheet, View, Text } from "react-native";
import moment from "moment";
import DateRangePicker from "react-native-daterange-picker";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: null,
endDate: null,
displayedDate: moment(),
minDate: moment().set("date", 17),
maxDate: moment().set("date", 20),
};
}
setDates = (dates) => {
this.setState({
...dates,
});
};
render() {
const { startDate, endDate, displayedDate, minDate, maxDate } = this.state;
return (
<View style={styles.container}>
<DateRangePicker
onChange={this.setDates}
startDate={startDate}
endDate={endDate}
minDate={minDate}
maxDate={maxDate}
range
displayedDate={displayedDate}
>
<Text>Click me!</Text>
</DateRangePicker>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
```
### Setting locale
Simply pass your custom Moment object with locale attached to it as a prop.
```js
import React from "react";
import { StyleSheet, View, Text } from "react-native";
import DateRangePicker from "react-native-daterange-picker";
import moment from "moment/min/moment-with-locales";
moment.locale("en");
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
startDate: null,
endDate: null,
displayedDate: moment(),
};
}
setDates = (dates) => {
this.setState({
...dates,
});
};
render() {
const { startDate, endDate, displayedDate } = this.state;
return (
<View style={styles.container}>
<DateRangePicker
onChange={this.setDates}
endDate={endDate}
startDate={startDate}
displayedDate={displayedDate}
range
moment={moment}
>
<Text>Click me!</Text>
</DateRangePicker>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
```
## Options
| Property | type | required? | defaultValue | Description |
| -------------------- | -------- | :-----------------: | :----------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| open | boolean | no | | Prop to control calendar visibility state. Passing this prop will disable the default function for toggling visibility off/on by clicking the backdrop/click me button. |
| onChange | function | yes | | Date change callback function. |
| startDate | Moment | yes (if `range`) | | Value of the picked start date. |
| endDate | Moment | yes (if `range`) | | Value of the picked end date. |
| date | Moment | yes (if no `range`) | | Value of the picked single date. |
| displayedDate | Moment | yes | | The date (year/month) which is being displayed on the picker. |
| minDate | Moment | no | | The minimum allowed date for the picker. |
| maxDate | Moment | no | | The maximum allowed date for the picker. |
| range | boolean | no | false | Allows you to pick between range and single date selection. |
| presetButtons | boolean | no | false | Enables preset buttons (Today / This Week / This Month) |
| dayHeaders | boolean | no | true | Allows you to enable/disable day headers. |
| backdropStyle | Object | no | | Styling for the backdrop of the picker. |
| containerStyle | Object | no | | Styling for the picker container. |
| headerStyle | Object | no | | Styling for header area. |
| headerTextStyle | Object | no | | Styling for header text. |
| dayStyle | Object | no | | Styling for a single day element. |
| dayTextStyle | Object | no | | Styling for the text of a single day element. |
| selectedStyle | Object | no | | Styling for selected day element(s). |
| selectedTextStyle | Object | no | | Styling for the text of selected day element(s). |
| dayHeaderStyle | Object | no | | Styling for selected day header element(s). |
| dayHeaderTextStyle | Object | no | | Styling for the text of day header element(s). |
| disabledStyle | Object | no | | Styling for disabled day element(s). |
| buttonStyle | Object | no | | Styling for the preset button(s). |
| buttonTextStyle | Object | no | | Styling for the text of preset button(s). |
| buttonContainerStyle | Object | no | | Styling for the preset button container. |
| monthPrevButton | Node | no | | Icon for previous button. |
| monthNextButton | Node | no | | Icon for next button. |
| monthButtonsStyle | Object | no | | Styling for month prev/next buttons. |
| moment | Moment | no | | Custom Moment object, useful for setting custom locale. |
## Questions & Suggestions
Feel free to contact me at deniz@deniz.gg for your questions and suggestions.