index.ios.js

/**
 * Created by TinySymphony on 2017-05-08.
 */

import React, { Component } from "react"
import { AppRegistry, StyleSheet, Text, View, TouchableHighlight } from "react-native"
import Calendar from "./Calendar"

export default class calendar extends Component {
	constructor (props) {
		super(props)
		this.calendar = null
		this.state = {
			startDate: new Date(2017, 7, 12),
			endDate  : new Date(2017, 8, 23)
		}
		this.openCalendar = this.openCalendar.bind(this)
		this.confirmDate = this.confirmDate.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()
	}
	render () {
		// It's an optional property, I use this to show the structure of customI18n object.
		// const 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.
		const color = {
			mainColor: "#138691"
		}
		const { startDate, endDate } = this.state
		const text =
			startDate && endDate
				? startDate.toLocaleDateString() + "  /  " + endDate.toLocaleDateString()
				: "Please select a period"
		return (
			<View style={styles.container}>
				<TouchableHighlight style={styles.btn} title="press" onPress={this.openCalendar}>
					<Text style={styles.btnFont}>Choose Dates</Text>
				</TouchableHighlight>
				<View>
					<Text style={styles.font}>{text}</Text>
				</View>
				<Calendar
					i18n="en"
					color={color}
					ref={calendar => {
						this.calendar = calendar
					}}
					format="YYYYMMDD"
					minDate="20170510"
					maxDate="20180412"
					startDate={this.state.startDate}
					endDate={this.state.endDate}
					onConfirm={this.confirmDate}
				/>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex           : 1,
		justifyContent : "center",
		alignItems     : "center",
		backgroundColor: "#F5FCFF"
	},
	btn: {
		paddingHorizontal: 20,
		paddingVertical  : 10,
		overflow         : "hidden",
		borderRadius     : 6,
		marginBottom     : 30,
		backgroundColor  : "#138691"
	},
	btnFont: {
		color   : "#fff",
		fontSize: 20
	},
	welcome: {
		fontSize : 20,
		textAlign: "center",
		margin   : 10
	},
	font: {
		fontSize  : 24,
		fontWeight: "400",
		color     : "#304853"
	},
	instructions: {
		textAlign   : "center",
		color       : "#333333",
		marginBottom: 5
	}
})

AppRegistry.registerComponent("calendar", () => calendar)