ReactNative 基於rmc-datepicker的日期選擇的使用

實現效果：

API

pram	description	type	default
styles	自定義DatePicker樣式	Object	pickerStyles
value	選中值	String	當前日期
mode	日期類型： 一、date：年月日 格式YYYY-MM-DD 二、time：時分 格式HH:mm 三、datetime：年月日時分 格式YYYY-MM-DD HH:mm	String	date
defaultDate	默認選中日期	String	當前日期
minDate	日期的起始時間	Date
maxDate	日期的截止時間	Date
onValueChange	改變日期選擇時執行	Function
locale	時間面板選擇中文仍是英文 CN：表示中文後面帶年月日時分的單位 US:表示英文後面不帶單溫	String	CN
okText	picker右上角肯定按鈕配置	StringdismissText	肯定
dismissText	picker左上角取消按鈕配置	String/React.ReactElement	取消
title	picker title配置	String/React.ReactElement	請選擇

Demo

import React, { Component } from "react";
import {
    StyleSheet,
    Text,
    ScrollView,
    Image,
    Alert,
    TextInput,
    View,
    TouchableOpacity,
    TouchableHighlight
} from "react-native";
import { Radio, Toast, CheckBox, DatePicker } from "./../../../rn-design";
const styles = StyleSheet.create({
    button: {
        borderWidth: 1,
        borderColor: "red",
        padding: 5,
        width: 300
    },
    okText: {
        color: "#dc4931"
    },
    dismissText: {
        color: "#434345"
    },
    title: {
        fontSize: 13,
        color: "#999"
    }
});

class Demo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dateValue: undefined
        };
    }
    onChange = (dateValue) => {
        this.setState({ dateValue });
    };
    format(date) {
        let mday = date.getDate();
        let month = date.getMonth() + 1;
        month = month < 10 ? `0${month}` : month;
        mday = mday < 10 ? `0${mday}` : mday;
        return `${date.getFullYear()}-${month}-${mday}`;
    }
    show = () => {
        // console.log('show')
    };
    render() {
        return (
            <ScrollView>
                <DatePicker
                    styles={pickerStyles}
                    defaultDate={new Date()}
                    value={this.state.dateValue}
                    mode="date"
                    minDate={new Date(2010, 1, 1)}
                    maxDate={new Date(2020, 12, 31)}
                    onChange={this.onChange}
                    okText={<Text style={styles.okText}>肯定</Text>}
                    dismissText={<Text style={styles.dismissText}>取消</Text>}
                    title={<Text style={styles.title}>請選擇時間</Text>}>
                    <TouchableHighlight
                        onPress={this.show}
                        activeOpacity={0.5}
                        style={[styles.button]}
                        underlayColor="#a9d9d4">
                        <Text>
                            {(this.state.dateValue && this.format(this.state.dateValue)) || "open"}
                        </Text>
                    </TouchableHighlight>
                </DatePicker>
            </ScrollView>
        );
    }
}

export default Demo;

源碼地址