ReactNative: 使用日期選擇器組件DatePickerIOS組件

一、簡介

在App中，時間選擇器使用的場景還是比較多的，例如選擇外賣的送貨時間、物流的收貨日期等等。在ReactNative中提供了一個日期選擇器組件DatePickerIOS，這個是iOS平台使用的。它的API也比較簡單，一般實際開發中需要再次封裝使用。

 

二、API

組件中常用屬性如下

//當前日期實例，必選屬性，一般可用當前日期表示：new Date()
date: PropTypes.instanceOf(Date).isRequired

//限制最大選擇日期
maximumDate: PropTypes.instanceOf(Date)

//限制最小選擇日期
minimumDate: PropTypes.instanceOf(Date)

//選擇器模式，枚舉值：'日期'、'時間'、'日期和時間'
mode: PropTypes.oneOf(['date', 'time', 'datetime'])

//設置的分鍾間隔
minuteInterval: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30])

//時區
timeZoneOffsetInMinutes: PropTypes.number

//選擇時間時的觸發回調事件，必選屬性
onDateChange: PropTypes.func.isRequired

 

三、使用

了解了API，簡單使用如下：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    DatePickerIOS
} from 'react-native';


export default class ReactNativeDemo extends Component {

    render() {
        return (
            <View style={[styles.flex,styles.bgColor,styles.center]}>
                <DatePickerIOS
                    style={{width: 400, height: 100}}
                    date={new Date()}
                    maximumDate={new Date(2050,12,30)}
                    minimumDate={new Date(2000,12,30)}
                    mode={'datetime'}
                    minuteInterval={30}
                    timeZoneOffsetInMinutes={(new Date()).getTimezoneOffset() * 8 / 60}
                    onDateChange={(date) => {
                        const dateString = date.toLocaleDateString();
                        console.log('current date:'+dateString);
                    }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: '#1FB9FF'
    },
    center: {
        alignItems: 'center',
        justifyContent: 'center'
    }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);