react-native DatePickerAndroid(二)

版权声明:我写的你不能转载,但是你可以复制啊。复制记得加关注啊(迷之微笑)。 https://blog.csdn.net/quhongqiang/article/details/88547539
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);

猜你喜欢

转载自blog.csdn.net/quhongqiang/article/details/88547539