React-native DatePicker The implementation of the date selection component

The implementation of this tutorial is as follows:

In order to achieve its fade-in/fade-out coverage, there is a Cancel button, here with a three-party component, you can first install:

Three-party components address: Https://github.com/eyaleizenberg/react-native-custom-action-sheet (can see, you can also go directly to my steps)

1. Run the project directory in Terminal: NPM install React-native-custom-action-sheet--save

2. Then run: NPM start

3. The specific implementation code is as follows:

import React, {Component} from ‘react’;
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  DatePickerIOS
} from ‘react-native’;

// This is a three-party component github address: https://github.com/eyaleizenberg/react-native-custom-action-sheet
var CustomActionSheet = require (‘react-native-custom-action-sheet’);

class Demo extends Component {

  state = {
    datePickerModalVisible: false, // Selector hidden mark
    chooseDate: new Date () // Date of choice
  };

  _showDatePicker () {// Toggle display and hidden markers
    this.setState ((datePickerModalVisible:! this.state.datePickerModalVisible));
  };

  _onDateChange (date) {// Change the date state
    alert (date); // pop-up alert box: show your selected date
    this.setState ({
      chooseDate: date
    });
  };

  render () {

    let datePickerModal = (// date picker component (assigns a selector or empty based on the tag)
      this.state.datePickerModalVisible?
      <CustomActionSheet
        modalVisible = {this.state.datePickerModalVisible}
        onCancel = (() => this._showDatePicker ())> // Click the cancel button to trigger the event
          <View style = {styles.datePickerContainer}>
            <DatePickerIOS
              mode = {"datetime"} // Selector mode: ‘date’ (date), ‘time’ (time), ‘datetime’ (date and time)
              minimumDate = (new Date ()) // Minimum time (the current time is set here)
              minuteInterval = {30} // Minimum time interval (30 minutes is set here)
              date = {this.state.chooseDate} // default time
              onDateChange = {this._onDateChange.bind (this)} // Call this function when the date is modified
            />
            </ View>
       </ CustomActionSheet>: null
    );

    return (
      <View style = {styles.container}>
        <TouchableHighlight
          style = {{backgroundColor: ‘cyan’, padding: 5}}
          onPress = (() => this._showDatePicker ()) // button: click trigger method
          underlayColor = ‘gray’
          >
          <Text> show DatePick </ Text>
        </ TouchableHighlight>
        {datePickerModal} // Date selection component
      </ View>
    );
  }
}

const styles = StyleSheet.create ({
  container: {
    flex: 1,
    justifyContent: ‘center’,
    alignItems: ‘center’,
    backgroundColor: ‘# F5FCFF’,
  },
  datePickerContainer: {
    flex: 1,
    borderRadius: 5,
    justifyContent: ‘center’,
    alignItems: ‘center’,
    backgroundColor: ‘white’,
    marginBottom: 10,
  },
});

AppRegistry.registerComponent (‘Demo’, () => Demo); 

Write well, run in Terminal: React-native Run-ios can see the effect

React-native DatePicker The implementation of the date selection component