基于Vant UI框架实现时间段选择器
更新时间:2020年12月24日 13:24 点击:2295
本文实例为大家分享了Vant UI框架实现时间段选择器的具体代码,供大家参考,具体内容如下
组件代码如下:
<template> <van-picker :title="title" :show-toolbar="showToolbar" :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" :confirm-button-text="confirmButtonText" :cancel-button-text="cancelButtonText" :loading="loading" :readonly="readonly" :item-height="itemHeight" :visible-item-count="visibleItemCount" :swipe-duration="swipeDuration" > <template slot="default"> <slot name="default"></slot> </template> <template slot="title"> <slot name="title"></slot> </template> <template slot="confirm"> <slot name="confirm"></slot> </template> <template slot="cancel"> <slot name="cancel"></slot> </template> <template slot="option"> <slot name="option"></slot> </template> <template slot="columns-top"> <slot name="columns-top"></slot> </template> <template slot="columns-bottom"> <slot name="columns-bottom"></slot> </template> </van-picker> </template> <script> import Vue from 'vue' import { Field, Picker, Popup } from 'vant'; Vue.use(Field).use(Picker).use(Popup); export default { name: "VanDatePicker", props: { value: { type: Date, default: () => new Date() }, minDate: { type: Date, default: () => new Date(new Date().getFullYear()-5,0,1) }, maxDate: { type: Date, default: () => new Date(new Date().getFullYear()+5,0,1) }, showToolbar: { type: Boolean, default: () => false }, title: { type: String, default: () => '' }, confirmButtonText: { type: String, default: () => '确认' }, cancelButtonText: { type: String, default: () => '取消' }, loading: { type: Boolean, default: () => false }, readonly: { type: Boolean, default: () => false }, itemHeight: { type: Number||String, default: () => 44 }, visibleItemCount: { type: Number||String, default: () => 6 }, swipeDuration: { type: Number||String, default: () => 1000 }, }, data() { return { monthArr: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'], dayArr: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12','13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24','25', '26', '27', '28', '29', '30', '31'], }; }, computed: { columns: function () { let minYear = this.minDate.getFullYear(); let maxYear = this.maxDate.getFullYear(); let year = this.value.getFullYear(); let month = this.value.getMonth(); let day = this.value.getDate(); let yearArr = []; let i = 0; while (i < maxYear - minYear + 1) { yearArr.unshift((maxYear - i) + ''); i ++; } let columns = [ { values: yearArr, defaultIndex: Math.floor(year) - minYear }, { values: this.monthArr, defaultIndex: Math.floor(month) }, { values: this.dayArr, defaultIndex: Math.floor(day-1) }, { values: ['-'] }, { values: yearArr, defaultIndex: Math.floor(year) - minYear }, { values: this.monthArr, defaultIndex: Math.floor(month) }, { values: this.dayArr, defaultIndex: Math.floor(day-1) }, ]; return columns } }, watch: { }, methods: { onConfirm(value, index) { // console.log(`当前值:${value}, 当前索引:${index}`); this.$emit('confirm',value,index); }, onChange(picker, value, index) { // console.log(`当前值:${value}, 当前索引:${index}`); let _this = this; let minMonth = this.minDate.getMonth(); let minDay = this.minDate.getDate(); let maxMonth = this.maxDate.getMonth(); let maxDay = this.maxDate.getDate(); let d = new Date(value[0],value[1],0); setDate(0); setDate(4); function setDate(i) { //最小年份 if (value[i]-0===_this.minDate.getFullYear()) { picker.setColumnValues(i+1,_this.monthArr.slice(minMonth)); let strMinM = ''; if (minMonth<9) { strMinM = '0'+(minMonth+1) } else { strMinM = strMinM + 1 + '' } picker.setColumnValue(i+1,value[i+1]-1<minMonth?strMinM:value[i+1]); if (index===i&&value[i+1]-1<minMonth) { picker.setColumnValues(i+2,_this.dayArr.slice(minDay-1,d.getDate())); picker.setColumnValue(i+2,value[i+2]<minDay?minDay.toString():value[i+2]); } else { if (value[i+1]-1===_this.minDate.getMonth()) { picker.setColumnValues(i+2,_this.dayArr.slice(minDay-1,d.getDate())); picker.setColumnValue(i+2,value[i+2]<minDay?minDay.toString():value[i+2]); } else { picker.setColumnValues(i+2,_this.dayArr.slice(0,d.getDate())); picker.setColumnValue(i+2,value[i+2]>d.getDate()?d.getDate().toString():value[i+2]); } } } //最大年份 else if (value[i]-0===_this.maxDate.getFullYear()) { picker.setColumnValues(i+1,_this.monthArr.slice(0,maxMonth+1)); let strManM = ''; if (maxMonth<9) { strManM = '0'+(maxMonth+1) } else { strManM = maxMonth + 1 + '' } picker.setColumnValue(i+1,value[i+1]-1>maxMonth?strManM:value[i+1]); if (index===i&&value[i+1]-1>maxMonth) { picker.setColumnValues(i+2,_this.dayArr.slice(0,maxDay)); picker.setColumnValue(i+2,value[i+2]>maxDay?maxDay.toString():value[i+2]); } else { if (value[i+1]-1===_this.maxDate.getMonth()) { picker.setColumnValues(i+2,_this.dayArr.slice(0,maxDay)); picker.setColumnValue(i+2,value[i+2]>maxDay?maxDay.toString():value[i+2]); } else { picker.setColumnValues(i+2,_this.dayArr.slice(0,d.getDate())); picker.setColumnValue(i+2,value[i+2]>d.getDate()?d.getDate().toString():value[i+2]); } } } //其他年份 else { picker.setColumnValues(i+1,_this.monthArr); picker.setColumnValue(i+1,value[i+1]); picker.setColumnValues(i+2,_this.dayArr.slice(0,d.getDate())); picker.setColumnValue(i+2,value[i+2]>d.getDate()?d.getDate().toString():value[i+2]); } } let finallyVal = picker.getValues(); let len = Math.floor(finallyVal.length/2); //开始时间不大于结束时间 if (finallyVal.slice(0,len).join("")>finallyVal.slice(len+1).join("")){ picker.setValues([...finallyVal.slice(0,len),"-",...finallyVal.slice(0,len)]); if (new Date(finallyVal.slice(0,len).join("-")+' 00:00:00').getTime()===this.maxDate.getTime()) { console.log(111); picker.setColumnValues(5,_this.monthArr.slice(0,maxMonth+1)); picker.setColumnValues(6,_this.dayArr.slice(0,maxDay)); } } this.$emit('change',picker,finallyVal,index); }, onCancel() { // console.log('取消'); this.$emit('cancel'); }, }, } </script> <style scoped> </style>
调用demo
<template> <div> <van-field readonly clickable label="时间段" :value="value" placeholder="选择时间段" @click="showPicker = true" /> <van-popup v-model="showPicker" round position="bottom"> <van-date-picker show-toolbar v-model="currentDate" title="选择时间段" :min-date="minDate" :max-date="maxDate" @cancel="showPicker = false" @confirm="onConfirm" @change="onChange" > </van-date-picker> </van-popup> </div> </template> <script> import VanDatePicker from '@/components/VanDatePicker'; export default { name: "Test", components: {VanDatePicker}, data() { return { value: '', showPicker: false, minDate: new Date(2010, 5, 15), maxDate: new Date(2025, 10, 15), currentDate: new Date(), startDate: '', endDate: '', }; }, mounted() { }, methods: { onConfirm(value, index) { console.log(`当前值:${value}, 当前索引:${index}`); this.startDate = value.slice(0,3).join('-'); this.endDate = value.slice(4,7).join('-'); this.value = this.startDate + '至' + this.endDate; this.showPicker = false }, onChange(picker, value, index) { console.log(`当前值:${value}, 当前索引:${index}`); }, }, } </script> <style scoped> </style>
UI示例
API:注意红色划掉的没有实现
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
上一篇: vant时间控件使用方法详解
下一篇: 原生jQuery实现只显示年份下拉框
相关文章
- 这篇文章主要介绍了使用Vant完成通知栏Notify的提示操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-11
- 这篇文章主要介绍了c#从数据库里取得数据并异步更新ui的方法,大家参考使用吧...2020-06-25
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
这篇文章主要介绍了No module named ‘win32gui‘ 的解决方法(踩坑之旅),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-18- 这篇文章主要介绍了解决vant-UI库修改样式无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-03
- 这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-14
- 由于业务需要,要求实现树形菜单,且菜单数据由后台返回,下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下...2021-05-13
- 这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22
详解element-ui 表单校验 Rules 配置 常用黑科技
这篇文章主要介绍了element-ui 表单校验 Rules 配置 常用黑科技,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11- 这篇文章主要介绍了详解基于Vue cli开发修改外部组件Vant默认样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-04
jQuery EasyUI编辑DataGrid用combobox实现多级联动
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧...2016-09-01- SwiftUI是一种使用Swift语言在苹果设备上构建用户界面的创新且简单的方式,下面这篇文章主要给大家介绍了关于SwiftUI图片缩放、拼图等处理的相关资料,需要的朋友可以参考下...2021-08-23
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
这篇文章主要介绍了jQuery Easyui使用之可折叠面板动态加载无效果的解决方案,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧...2016-08-24如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
这篇文章主要介绍了如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上,需要的朋友可以参考下...2015-12-28- 小米在3月9日下午5点推送了小米5的MIUI8.2更新,这次升级最大的改变是核心变成了Android7.0,因此加入了不少新功能。从MIUI1到MIUI8,历经了好几年了,下面小编为大家整理MIUI八个历史版本的系统图标,来看看吧...2017-07-06
- 这篇文章主要介绍了JS实现简单面向对象的颜色选择器,以完整实例形式分析了JavaScript基于面向对象实现颜色选择器的具体步骤与实现技巧,需要的朋友可以参考下...2016-04-23
解析element-ui中upload组件传递文件及其他参数的问题
这篇文章主要介绍了element-ui中upload组件如何传递文件及其他参数,分析一下我使用element-ui遇到的问题以及解决方法,需要的朋友可以参考下...2021-11-10vue+elementui实现点击table中的单元格触发事件--弹框
这篇文章主要介绍了vue+elementui实现点击table中的单元格触发事件--弹框,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要为大家详细介绍了jQuery UI结合Ajax创建可定制的Web界面,如何利用Ajax和jQuery UI创建具有各种定制功能的高度可定制的UI,感兴趣的小伙伴们可以参考一下...2016-06-24
- 这篇文章主要为大家详细介绍了Unity3D UGUI实现翻书特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25