react native DatePickerIOS 使用详解

DatePickerIOS：ios 时间选择器
熟悉：

date：选中的日期。
maximumDate：最大日期。选择的日期大于此日期则回到此日期。
minimumDate：最小日期。选择的日期小于此日期则回到此日期。
mode：(‘date’, ‘time’, ‘datetime’) 选择器模式。
minuteInterval：最小间隔。(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)
onDateChange：日期变化大回调函数
timeZoneOffsetInMinutes：时区差，单位是分钟。默认是手机当前时区。

Demo：

/**
 * Created by mengqingdong on 2017/5/3.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Button,
    DatePickerIOS,
} from 'react-native';

export default class DatePickerIOSDemo extends Component {
    static navigationOptions = {
        title: 'DatePickerIOS',
    };

    maxDate = new Date();
    minDate = new Date();
    constructor(props){
        super(props);
        this.maxDate.setDate(new Date().getDate()+365);
        this.minDate.setDate(new Date().getDate()-365);
    }
    state = {
        date: new Date(),
        dateTxt: '',
        maxDate: this.maxDate,
        minDate: this.minDate,
        mode: 'datetime',
        minuteInterval: 1,
        timeZoneOffsetInMinutes: 8*60,
    }

    render() {
        return (
            flex:1}}>
                {'选中时间：'+this.state.dateTxt}
                flexDirection:'row',alignItems:'center'}}>
                    设置mode：
                    'date' onPress={()=>{this.setState({mode:'date'})}}/>
                    'time' onPress={()=>{this.setState({mode:'time'})}}/>
                    'datetime' onPress={()=>{this.setState({mode:'datetime'})}}/>
                

                flexDirection:'row',alignItems:'center'}}>
                    设置minuteInterval：
                    '1' onPress={()=>{this.setState({minuteInterval:1})}}/>
                    '5' onPress={()=>{this.setState({minuteInterval:5})}}/>
                    '30' onPress={()=>{this.setState({minuteInterval:30})}}/>
                
                flexDirection:'row',alignItems:'center'}}>
                    设置timeZoneOffsetInMinutes：
                    '东九区' onPress={()=>{this.setState({timeZoneOffsetInMinutes:9*60})}}/>
                    '东八区' onPress={()=>{this.setState({timeZoneOffsetInMinutes:8*60})}}/>
                    '东七区' onPress={()=>{this.setState({timeZoneOffsetInMinutes:7*60})}}/>
                
                this.state.date}
                    maximumDate={this.state.maxDate}
                    minimumDate={this.state.minDate}
                    mode={this.state.mode}
                    minuteInterval={this.state.minuteInterval}
                    timeZoneOffsetInMinutes={this.state.timeZoneOffsetInMinutes}
                    onDateChange={(date)=>{
                        this.setState({date:date});
                        var year = date.getFullYear();
                        var month = date.getMonth();
                        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({dateTxt:s});
                }}/>
            
        );
    }
}

github下载地址