React Native Dates

React Native Date and date range picker / calendar for iOS and Android

Based on https://github.com/werein/react-native-dates

API

typeDatesType={range: boolean,// select a range of dateshistory: boolean,//allow dates in the past to be selecteddate: ?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 on Sundays and showed selected date bellow

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */importReact,{Component}from'react';import{AppRegistry,StyleSheet,Text,View}from'react-native';importDatesfrom'react-native-dates';exportdefaultclassReactNativeDatesDemoextendsComponent{state={date: null,focus: 'startDate',startDate: null,endDate: null}render(){constisDateBlocked=(date)=>date.format('dddd')==='Sunday';constonDatesChange=({ startDate, endDate, focusedInput })=>this.setState({ ...this.state,focus: focusedInput},()=>this.setState({ ...this.state, startDate, endDate }));constonDateChange=({ date })=>this.setState({ ...this.state, date });return(<Viewstyle={styles.container}><DatesonDatesChange={onDatesChange}isDateBlocked={isDateBlocked}startDate={this.state.startDate}endDate={this.state.endDate}focusedInput={this.state.focus}history={true}range/><Datesdate={this.state.date}onDatesChange={onDateChange}isDateBlocked={isDateBlocked}/>{this.state.date&&<Textstyle={styles.date}>{this.state.date&&this.state.date.format('LL')}</Text>}<Textstyle={[styles.date,this.state.focus==='startDate'&&styles.focused]}>{this.state.startDate&&this.state.startDate.format('LL')}</Text><Textstyle={[styles.date,this.state.focus==='endDate'&&styles.focused]}>{this.state.endDate&&this.state.endDate.format('LL')}</Text></View>);}}conststyles=StyleSheet.create({container: {flex: 1,flexGrow: 1,marginTop: 20},date: {marginTop: 50},focused: {color: 'blue'}});AppRegistry.registerComponent('ReactNativeDatesDemo',()=>ReactNativeDatesDemo);