ReactNative 基于rmc-datepicker的日期选择的使用

实现效果：

API

pram	description	type	default
styles	自定义DatePicker样式	Object	pickerStyles
value	选中值	String	当前日期
mode	日期类型： 1、date：年月日格式YYYY-MM-DD 2、time：时分格式HH:mm 3、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><DatePickerstyles={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>}><TouchableHighlightonPress={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;

源码地址

ReactNative 基于rmc-datepicker的日期选择的使用相关推荐

nui— DatePicker：日期选择框
5.12 DatePicker:日期选择框转至元数据结尾创建: 未知用户 (zhangping),最新修改于: 八月 07, 2015 转至元数据起始创建DatePicker 只需要一个id即可 ...
element 日期选择图标_element-ui日期组件DatePicker设置日期选择范围Picker Options
element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...
html做一个年份月份天数选择器,怎样实现一个datePicker（日期选择）组件
百度前端技术学院上有一个任务,要实现一个日期选择组件,本文由此而来~ 看看需求组件默认一直呈显示状比抖朋要插支一圈不者地态通插新,都次过是宗现制的前搭待个断前能绿和过某种方式选择年.月,选择了年月 ...
android date 组件,Android中TimePicker与DatePicker时间日期选择组件的使用实例
效果和代码都非常直观: 实例1:TimePicker xmlns:tools="http://schemas.android.com/tools" android:layout_w ...
antd 日期时间选择_antd-mobile的DatePicker日期选择组件使用
现在项目上有个需求,在时间选择上需要精确到分钟,且分钟只能是0分钟或者是30分钟. 其中组件有个minuteStep参数,将其设置成30,即可只显示0分钟或者30分钟了. 但是在选择的时候发现了问题, ...
基于datepicker的只选择年月的日期选择器
手头上的项目在开始做的时候,有那种需要用到日期选择的需求,本着快的原则,当时选择了datepicker这一款jqueryUI的插件,当然这个插件的质量相当不错,当时的需求是要完成一个有起止时间的选择, ...
重构ElementUI解决DatePicker日期选择组件修改父组件placement参数问题[Vue.js项目实践: 新冠自检系统]
新冠疫情自我检测系统网页设计开发文档 Sylvan Ding 的第一个基于 Vue.js 的项目. 本项目所提供的信息,只供参考之用,不保证信息的准确性.有效性.及时性和完整性,更多内容请查看国家卫健 ...
element 日期选择图标_element-ui 限制日期选择的方法(datepicker)
这篇文章主要为大家详细介绍了element-ui 限制日期选择的方法(datepicker),具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! El ...
html日期选择框_第十课日期选择框（datepicker）的操作
有客户问:datepicker是怎么操作的? 我答:datepicker可以直接用"输入文本"组件. 客户说:不是,现在我操作的这个网页上datepicker是不能直接输入的,否则 ...

ReactNative 基于rmc-datepicker的日期选择的使用

ReactNative 基于rmc-datepicker的日期选择的使用相关推荐

最新文章

热门文章