如何使用React Native日期时间选择组件
程序员文章站
2022-05-12 15:06:17
...
这次给大家带来如何使用React Native日期时间选择组件,使用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:占位符
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是如何使用React Native日期时间选择组件的详细内容,更多请关注其它相关文章!
推荐阅读
-
React Native日期时间选择组件的示例代码
-
react-native DatePicker日期选择组件的实现代码
-
详解如何在项目中使用jest测试react native组件
-
详解React Native开源时间日期选择器组件(react-native-datetime)
-
Vue日期时间选择器组件使用方法详解
-
React Native日期时间选择组件的示例代码
-
React Native日期时间选择组件实例详解
-
如何使用React Native日期时间选择组件
-
react-native DatePicker日期选择组件的实现代码
-
详解React Native开源时间日期选择器组件(react-native-datetime)