React Native日期时间选择组件的示例代码
2018-04-27 11:30
1096 查看
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-datetime)
- Vue无限滑动周选择日期的组件的示例代码
- Android表单组件,单选,多选,下拉列表,日期选择,时间选择
- Android组件-下拉列表、时间选择器、日期选择器、单选框、复选框
- 行程日历组件:选择开始和结束日期+滑动选择时间
- iOS如何获取当前日期前后N天的时间示例代码
- Android日期和时间选择器实现代码
- 日期选择示例javascript代码
- Android中TimePicker与DatePicker时间日期选择组件的使用实例
- MongoDB批量将时间戳转为通用日期格式示例代码
- laydate 时间选择组件对日期的控制
- Js日期选择器并自动加入到输入框中示例代码
- js中的时间转换―毫秒转换成日期时间的示例代码
- 微信小程序-picker组件地区,时间,日期选择
- Flex - 带时间选择(可手工输入)的日期组件,去掉了 StringToolkit.formatNumberWithChar
- Android时间选择器、日期选择器实现代码
- 基于 Vue 的树形选择组件的示例代码
- Js日期选择器并自动加入到输入框中示例代码
- Androin 常用组件下拉框日期选择器、时间选择器、RadioButton、CheckBox使用
- js判断选择时间不能小于当前时间的示例代码