React Native iOS 独有组件之 DatePicke

使用 DatePickerIOS 来在 iOS 平台上渲染一个日期/时间选择器。这是一个受约束的(Controlled)组件，所以你必须监听 onDateChange 回调函数并且及时更新 date 属性来使得组件更新，否则用户的修改会立刻被撤销来确保当前显示值和 props.date 一致。

属性

名称	类型	必填	说明
date	Date	是	当前被选中的日期
onDateChange	function	是	日期/时间变化的监听函数。
maximumDate	Date	否	可选的最大日期
minimumDate	Date	否	可选的最小日期
minuteInterval	enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)	否	可选的最小的分钟单位。
mode	enum('date', 'time', 'datetime')	否	选择器模式。
locale	String	否	日期选择器的区域设置
timeZoneOffsetInMinutes	number	否	时区差，单位是分钟。

实例

1. 逻辑代码

import React, {Component} from 'react';
import {
  StyleSheet, 
  Text, 
  DatePickerIOS,
  View
} from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chosenDate: new Date(),
      dateText:''
    };
    this.setDate = this.setDate.bind(this);
  }

  setDate(newDate){
    this.setState({chosenDate: newDate});
  }

  
  render() {
    return (
      <View style = {styles.container}>
        <Text style={styles.text}>{'你选择的时间是：'+ this.state.dateText}</Text>

        <DatePickerIOS 
          date = {this.state.chosenDate}
          mode = {'datetime'}
          onDateChange = {(date) => {
            this.setState({chosenDate:date});
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var date1 = date.getDate();
            var hour = date.getHours();       //获取当前小时数(0-23)
            var mins = date.getMinutes();     //获取当前分钟数(0-59)
            var secs = date.getSeconds();     //获取当前秒数(0-59)
            var msecs = date.getMilliseconds();    //获取当前毫秒数(0-999)
            var s = year+"/"+month+"/"+date1+' '+hour+':'+mins+':'+secs+':'+msecs;
            this.setState({dateText:s});
          }}
        /> 
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 30,
    backgroundColor: '#F5FCFF',
  },
  text: {
    marginTop:10,
    marginLeft:5,
    marginRight:5,
    height:30,
    borderWidth:1,
    padding:6,
    borderColor:'green',
    textAlign:'center'
  },
});

2. 效果图

datepicker.jpg