import React, {Component} from 'react';
import {StyleSheet, Text, View,TouchableHighlight,DatePickerAndroid} from 'react-native';
import { withNavigation } from 'react-navigation';
class MyPage extends Component {
static navigationOptions = {
title: '首页'
}
constructor() {
super();
this.state = {
presetDate: new Date(2016, 3, 5),
allDate: new Date(2020, 4, 5),
simpleText: '选择日期,默认今天',
minText: '选择日期,不能比今日再早',
maxText: '选择日期,不能比今日再晚',
presetText: '选择日期,指定2016/3/5',
}
}
//进行创建时间日期选择器
async showPicker(stateKey, options) {
try {
var newState = {};
const {action, year, month, day} = await DatePickerAndroid.open(options);
if (action === DatePickerAndroid.dismissedAction) {
newState[stateKey + 'Text'] = 'dismissed';
} else {
var date = new Date(year, month, day);
newState[stateKey + 'Text'] = date.toLocaleDateString();
newState[stateKey + 'Date'] = date;
}
this.setState(newState);
} catch ({code, message}) {
console.warn(`Error in example '${stateKey}': `, message);
}
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight text={this.state.minText}
onPress={this.showPicker.bind(this, 'preset', {date: this.state.presetDate})} >
<Text>点击调起日期</Text>
</TouchableHighlight>
<TouchableHighlight text={this.state.presetText}
onPress={this.showPicker.bind(this, 'preset', {date: this.state.presetDate})}>
<Text>点击调起日期</Text>
</TouchableHighlight>
<TouchableHighlight text={this.state.minText}
onPress={this.showPicker.bind(this, 'min', {date: this.state.minDate,minDate:new Date()})}>
<Text>点击调起当前日期之后</Text>
</TouchableHighlight>
<TouchableHighlight text={this.state.maxText}
onPress={this.showPicker.bind(this, 'max', {date: this.state.maxDate,maxDate:new Date()})}>
<Text>点击调起日期之前</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width: "100%",
height: '100%',
backgroundColor: '#f5f5f5',
},
});
export default withNavigation(MyPage);