Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Tinysymphony/react-native-calendar-select
A component to select period from calendar like Airbnb
https://github.com/Tinysymphony/react-native-calendar-select
airbnb calendar date picker react-native select
Last synced: about 2 months ago
JSON representation
A component to select period from calendar like Airbnb
- Host: GitHub
- URL: https://github.com/Tinysymphony/react-native-calendar-select
- Owner: Tinysymphony
- License: mit
- Created: 2017-05-11T12:08:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-10-05T13:23:20.000Z (over 2 years ago)
- Last Synced: 2024-04-14T21:54:04.986Z (10 months ago)
- Topics: airbnb, calendar, date, picker, react-native, select
- Language: JavaScript
- Size: 2.82 MB
- Stars: 305
- Watchers: 9
- Forks: 97
- Open Issues: 38
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-calendar-select ★195 - A component to select a date period from calendar modal, like Airbnb. (Components / UI)
- awesome-reactnative-ui - react-native-calendar-select
- awesome-react-native - react-native-calendar-select ★195 - A component to select a date period from calendar modal, like Airbnb. (Components / UI)
- awesome-reactnative-ui - react-native-calendar-select
- awesome-react-native - react-native-calendar-select ★195 - A component to select a date period from calendar modal, like Airbnb. (Components / UI)
- awesome-react-native - react-native-calendar-select ★195 - A component to select a date period from calendar modal, like Airbnb. (Components / UI)
README
## react-native-calendar-select [](https://travis-ci.org/Tinysymphony/react-native-calendar-select) [](https://coveralls.io/github/Tinysymphony/react-native-calendar-select?branch=master)
A date picker component like Airbnb. You can select a date period from the calendar modal.
### Examples
#### iOS Examples
#### Android Examples
### Usage
> This component use `moment.js` to process date.
**install from npm**
``` shell
npm install --save react-native-calendar-select
```
**import in project**
``` js
import Calendar from 'react-native-calendar-select';
```
```js
constructor (props) {
super(props);
this.state = {
startDate: new Date(2017, 6, 12),
endDate: new Date(2017, 8, 2)
};
this.confirmDate = this.confirmDate.bind(this);
this.openCalendar = this.openCalendar.bind(this);
}
// when confirm button is clicked, an object is conveyed to outer component
// contains following property:
// startDate [Date Object], endDate [Date Object]
// startMoment [Moment Object], endMoment [Moment Object]
confirmDate({startDate, endDate, startMoment, endMoment}) {
this.setState({
startDate,
endDate
});
}
openCalendar() {
this.calendar && this.calendar.open();
}
// in render function
render() {
// It's an optional property, I use this to show the structure of customI18n object.
let customI18n = {
'w': ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
'weekday': ['', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
'text': {
'start': 'Check in',
'end': 'Check out',
'date': 'Date',
'save': 'Confirm',
'clear': 'Reset'
},
'date': 'DD / MM' // date format
};
// optional property, too.
let color = {
subColor: '#f0f0f0'
};
return (
{this.calendar = calendar;}}
customI18n={customI18n}
color={color}
format="YYYYMMDD"
minDate="20170510"
maxDate="20180312"
startDate={this.state.startDate}
endDate={this.state.endDate}
onConfirm={this.confirmDate}
/>
);
}
```
### Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| i18n | String | 'en' | Language of the component, supports `en` / `zh` / `jp`. |
| customI18n | Object | {} | Customize text of the component, the structure of this object is shown in the example above. |
| color | Object | {} | Customize color. |
| format | string | 'YYYY-MM-DD' | Define date format, you can also pass Date Object or Moment Object as props. |
| minDate | String / Object | - | Min date of calendar |
| maxDate | String / Object | - | Max date of calendar |
| startDate | String / Object | null | Start date of selection |
| endDate | String / Object | null | End date of selection |
| onConfirm | Function | - | Callback function when the period is confirmed, receives an object as only parameter, contains `startDate` / `endDate` / `startMoment` / `endMoment` four property. |
### Instance methods
| Method | Description |
| --- | --- |
| cancel | Cancel modification of state and close modal |
| close | Close select modal |
| open | Open select modal |
| clear | Reset state of component |
| confirm | Confirm selection and close modal |
LICENSE MIT