occ-mobile/app/components/selectTime/selectTime.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  Dimensions,
  TouchableOpacity,
  Platform,
  DatePickerAndroid,
} from 'react-native'
import { connect } from 'react-redux'
import Collapsible from 'react-native-collapsible'
import SelectTime from '../../containers/common/SelectTime'
import { setNowFormatDate } from '../../utils/utils'
import moment from 'moment'

const { width, height } = Dimensions.get('window')
@connect(({ theme }) => ({
  ...theme,
}))
class SelectTimeCom extends Component {
  constructor(props) {
    const date = new Date()
    super(props)
    this.state = {
      // 开始时间
      startTime: setNowFormatDate(true),
      // date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate(),
      // 结束时间
      endTime: setNowFormatDate(),
      // date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
    }
  }

  async TimeAndroid(mark) {
    const { action, year, month, day } = await DatePickerAndroid.open({
      date: new Date(),
      // minDate: new Date(),
      mode: 'spinner',
    })
    if (action !== DatePickerAndroid.dismissedAction) {
      let newDate = `${year}-${(month + 1)<10?"0"+month:month}-${day}`
      newDate = moment(newDate, 'YYYY-MM-DD').format('YYYY-MM-DD')
      if (mark == 'start') {
        if (newDate <= this.state.endTime) {
          this.setState({
            startTime: newDate,
          })
        }
      } else if (mark == 'end') {
        if (this.state.startTime <= newDate) {
          this.setState({
            endTime: newDate,
          })
        }
      }
      // 这里开始可以处理用户选好的年月日三个参数：year, month (0-11), day
    }
  }

  render() {
    return (
      <View
        style={{
          position: 'absolute',
          top: 60,
          left: 0,
          width: width,
          backgroundColor: '#FFF',
        }}
      >
        <Collapsible collapsed={this.props.dateActive}>
          <View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                padding: 20,
                marginBottom: 20,
              }}
            >
              <View>
                <Text
                  style={{
                    fontSize: 13,
                    lineHeight: 18,
                    letterSpacing: 0.16,
                    color: '#333',
                    alignSelf: 'center',
                  }}
                >
                  开始时间
                </Text>
                <TouchableOpacity
                  onPress={() =>
                    Platform.OS == 'ios'
                      ? this.showTime._openModal('start')
                      : this.TimeAndroid('start')
                  }
                  style={{
                    paddingHorizontal: 40,
                    paddingVertical: 7,
                    marginTop: 16,
                    borderColor: '#DDD',
                    borderWidth: 1,
                    borderRadius: 100,
                  }}
                >
                  <Text
                    style={{
                      fontSize: 13,
                      lineHeight: 18,
                      letterSpacing: 0.16,
                      color: '#333',
                    }}
                  >
                    {this.state.startTime}
                  </Text>
                </TouchableOpacity>
              </View>
              <View style={{ paddingTop: 37 }}>
                <Text
                  style={{
                    fontSize: 18,
                    lineHeight: 25,
                    letterSpacing: 0.22,
                    color: '#333',
                  }}
                >
                  ~
                </Text>
              </View>
              <View>
                <Text
                  style={{
                    fontSize: 13,
                    lineHeight: 18,
                    letterSpacing: 0.16,
                    color: '#333',
                    alignSelf: 'center',
                  }}
                >
                  结束时间
                </Text>
                <TouchableOpacity
                  onPress={() =>
                    Platform.OS == 'ios'
                      ? this.showTime._openModal('end')
                      : this.TimeAndroid('end')
                  }
                  style={{
                    paddingHorizontal: 40,
                    paddingVertical: 7,
                    marginTop: 16,
                    borderColor: '#DDD',
                    borderWidth: 1,
                    borderRadius: 100,
                  }}
                >
                  <Text
                    style={{
                      fontSize: 13,
                      lineHeight: 18,
                      letterSpacing: 0.16,
                      color: '#333',
                    }}
                  >
                    {this.state.endTime}
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
            <View style={{ height: 40, flexDirection: 'row' }}>
              <TouchableOpacity
                onPress={() => {
                  data = { fn: 'cancel' }
                  this.props.dateCb(data)
                }}
                style={{
                  width: width / 2,
                  backgroundColor: '#FFF',
                  justifyContent: 'center',
                }}
              >
                <Text
                  style={{
                    fontSize: 14,
                    lineHeight: 22,
                    letterSpacing: 0.21,
                    color: '#333',
                    alignSelf: 'center',
                  }}
                >
                  取消
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => {
                  data = {
                    startTime: this.state.startTime,
                    endTime: this.state.endTime,
                  }
                  this.props.dateCb(data)
                }}
                style={{
                  width: width / 2,
                  backgroundColor: '#E70013',
                  justifyContent: 'center',
                }}
              >
                <Text
                  style={{
                    fontSize: 14,
                    lineHeight: 22,
                    letterSpacing: 0.21,
                    color: '#FFF',
                    alignSelf: 'center',
                  }}
                >
                  确定
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </Collapsible>

        {/* 时间弹窗 */}
        <SelectTime
          ref={showTime => (this.showTime = showTime)}
          cb={(date, mark) => {
            let newDate = moment(date).format('YYYY-MM-DD')
            if (mark == 'start') {
              if (newDate <= this.state.endTime) {
                this.setState({
                  startTime: newDate,
                })
              }
            } else if (mark == 'end') {
              if (this.state.startTime <= newDate) {
                this.setState({
                  endTime: newDate,
                })
              }
            }
          }}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  footer: {
    flexDirection: 'row',
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
    marginTop: 10,
  },
})

export default SelectTimeCom