https://github.com/werein/react-native-dates
React Native date / daterange picker and calendar
https://github.com/werein/react-native-dates
calendar datepicker daterange daterangepicker datetime-picker react react-native react-native-dates
Last synced: about 1 year ago
JSON representation
React Native date / daterange picker and calendar
- Host: GitHub
- URL: https://github.com/werein/react-native-dates
- Owner: werein
- Created: 2016-10-20T08:59:46.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T01:17:13.000Z (over 3 years ago)
- Last Synced: 2024-04-14T19:03:07.301Z (about 2 years ago)
- Topics: calendar, datepicker, daterange, daterangepicker, datetime-picker, react, react-native, react-native-dates
- Language: JavaScript
- Homepage:
- Size: 1.4 MB
- Stars: 165
- Watchers: 3
- Forks: 53
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Dates
[](https://travis-ci.org/werein/react-native-dates)[](https://ci.appveyor.com/project/jirikolarik/react-native-dates) [](https://codeclimate.com/github/werein/react-native-dates) [](https://codeclimate.com/github/werein/react-native-dates)
__React Native Date and date range picker / calendar for iOS and Android__
## API
```javascript
type DatesType = {
range: boolean,
date: ?moment,
startDate: ?moment,
endDate: ?moment,
focusedInput: 'startDate' | 'endDate',
onDatesChange: (date: { date?: ?moment, startDate?: ?moment, endDate?: ?moment }) => void,
isDateBlocked: (date: moment) => boolean
weekHeader?: {
dayFormat?: string
},
header?: {
renderLeftLabel?: Function,
renderCenterLabel?: moment => void,
renderRightLabel?: Function,
},
hideDifferentMonthDays: boolean
}
```
## Demo
## Example
In this example we disabled dates back in history and we shows selected dates bellow
```javascript
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Dates from 'react-native-dates';
import moment from 'moment';
export default class ReactNativeDatesDemo extends Component {
state = {
date: null,
focus: 'startDate',
startDate: null,
endDate: null
}
render() {
const isDateBlocked = (date) =>
date.isBefore(moment(), 'day');
const onDatesChange = ({ startDate, endDate, focusedInput }) =>
this.setState({ ...this.state, focus: focusedInput }, () =>
this.setState({ ...this.state, startDate, endDate })
);
const onDateChange = ({ date }) =>
this.setState({ ...this.state, date });
return (
{this.state.date && {this.state.date && this.state.date.format('LL')}}
{this.state.startDate && this.state.startDate.format('LL')}
{this.state.endDate && this.state.endDate.format('LL')}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexGrow: 1,
marginTop: 20
},
date: {
marginTop: 50
},
focused: {
color: 'blue'
}
});
AppRegistry.registerComponent('ReactNativeDatesDemo', () => ReactNativeDatesDemo);
```