React Native日期时间选择组件的示例代码
更新时间：2018年04月27日 11:30:29 作者：ReactNative开发圈
本篇文章主要介绍了React Native日期时间选择组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React Native日期时间选择组件：react-native-datepicker，支持安卓和IOS双平台，支持单独选择日期、单独选择时间和选择日期和时间，支持自定义日期格式。
效果图
安装方法
npm install react-native-datepicker --save
示例代码
<Text style={styles.instructions}>time: {this.state.time}</Text>
<DatePicker
style={{width: 200}}
date={this.state.datetime}
mode="datetime"
format="YYYY-MM-DD HH:mm"
confirmBtnText="确定"
cancelBtnText="取消"
showIcon={false}
onDateChange={(datetime) => {this.setState({datetime: datetime});}}
/>
<Text style={styles.instructions}>datetime: {this.state.datetime}</Text>
<DatePicker
style={{width: 200}}
date={this.state.datetime1}
mode="datetime"
format="YYYY-MM-DD HH:mm"
confirmBtnText="确定"
cancelBtnText="取消"
customStyles={{
dateIcon: {
position: 'absolute',
left: 0,
top: 4,
marginLeft: 0
},
dateInput: {
marginLeft: 36
}
}}
minuteInterval={10}
onDateChange={(datetime) => {this.setState({datetime1: datetime});}}
/>
<Text style={styles.instructions}>datetime: {this.state.datetime1}</Text>
主要参数说明
date：设置初始显示的日期 mode：显示的模式，date,datetime,time format：设置日期格式，默认为'YYYY-MM-DD' confirmBtnText：确定按钮的显示名称 cancelBtnText：取消按钮的显示名称 minDate：显示的最小日期 maxDate：显示的最大日期 duration：时间间隔 onDateChange：日期变化时触发的事件 placeholder：占位符
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了基于webpack4.X从零搭建React脚手架的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了详解react-refetch的使用小例子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
Redux是为javascript应用程序提供一个状态管理工具集中的管理react中多个组件的状态redux是专门作状态管理的js库（不是react插件库可以用在其他js框架中例如vue，但是基本用在react中），这篇文章主要介绍了react-redux及redux状态管理工具使用详解,需要的朋友可以参考下2023-01-01
本文主要介绍了react组件传值的四种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
React styled components样式组件化使用流程
styled-components 是react的一个第三方库，一种css私有化的方式。用来实现CSS in JS 的方式之一。在多人协作中，css必定会出现命名冲突，与vue的scoped解决方案不同，react用styled-components的给类名加了随机字符的方式实现了css的私有化2023-02-02
这篇文章主要介绍了关于React动态修改元素样式的三种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本篇文章主要介绍了ReactNative实现图片上传功能的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-07-07
这篇文章主要来和大家一起分享在 React 开发中常见的一些错误,以及如何避免这些错误,理解这些问题背后的细节,防止犯下类似的错误,需要的可以参考下2023-12-12
这篇文章主要介绍了React Draggable插件如何实现拖拽功能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了React hooks的优缺点详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下， 希望能够给你带来帮助2021-09-09
最新评论