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 (            <View style={{flex:1}}>                <Text>{'选中时间：'+this.state.dateTxt}</Text>                <View style={{flexDirection:'row',alignItems:'center'}}>                    <Text>设置mode：</Text>                    <Button title='date' onPress={()=>{this.setState({mode:'date'})}}/>                    <Button title='time' onPress={()=>{this.setState({mode:'time'})}}/>                    <Button title='datetime' onPress={()=>{this.setState({mode:'datetime'})}}/>                </View>                <View style={{flexDirection:'row',alignItems:'center'}}>                    <Text>设置minuteInterval：</Text>                    <Button title='1' onPress={()=>{this.setState({minuteInterval:1})}}/>                    <Button title='5' onPress={()=>{this.setState({minuteInterval:5})}}/>                    <Button title='30' onPress={()=>{this.setState({minuteInterval:30})}}/>                </View>                <View style={{flexDirection:'row',alignItems:'center'}}>                    <Text>设置timeZoneOffsetInMinutes：</Text>                    <Button title='东九区' onPress={()=>{this.setState({timeZoneOffsetInMinutes:9*60})}}/>                    <Button title='东八区' onPress={()=>{this.setState({timeZoneOffsetInMinutes:8*60})}}/>                    <Button title='东七区' onPress={()=>{this.setState({timeZoneOffsetInMinutes:7*60})}}/>                </View>                <DatePickerIOS                    date={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});                }}/>            </View>        );    }}

github下载地址