react-native DatePickerAndroid（二）

た入场券 2022-03-08 03:20 202阅读 0赞

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