实现效果：

image

API

pramdescriptiontypedefault
styles自定义DatePicker样式ObjectpickerStyles
value选中值String当前日期
mode日期类型：
1、date：年月日 格式YYYY-MM-DD
2、time：时分 格式HH:mm
3、datetime：年月日时分 格式YYYY-MM-DD HH:mm		Stringdate
defaultDate默认选中日期String当前日期
minDate日期的起始时间Date
maxDate日期的截止时间Date
onValueChange改变日期选择时执行Function
locale时间面板选择中文还是英文
CN：表示中文后面带年月日时分的单位
US:表示英文后面不带单温		StringCN
okTextpicker右上角确定按钮配置StringdismissText确定
dismissTextpicker左上角取消按钮配置String/React.ReactElement取消
titlepicker 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;

源码地址

Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区