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
}
`

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 (

onDatesChange={onDatesChange}
isDateBlocked={isDateBlocked}
startDate={this.state.startDate}
endDate={this.state.endDate}
focusedInput={this.state.focus}
range
/>

date={this.state.date}
onDatesChange={onDateChange}
isDateBlocked={isDateBlocked}
/>

{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);
``