时间:2021-07-01 10:21:17 帮助过:28人阅读
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:占位符
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
Vue实现PopupWindow组件使用步骤解析
vue+jquery+lodash滑动时顶部悬浮固定功能实现详解
以上就是React Native日期时间选择组件实例详解的详细内容,更多请关注Gxl网其它相关文章!