打车时间联级选择插件，时间联动选择，首汽打车时间选择插件

先上图，感觉有用再继续往下看，免得耽误您的时间

由于项目中需要用到类似打车软件的时间选择器，网上找了好多也没有同款，所以干脆自己封装了一个，基于vue+vant，主要是用到的vant（有赞）的van-popup和van-picker功能，如果您使用的是其他框架，也可以使用相应的弹出层和picker替代

另外选用是时间范围是当前时间开始最近7天，这个也可以改变，我这里显示的是英文，这个可以根据需要自己调整，下面上代码，注意代码依赖的是vue和vant，以下代码放入datatimepicker.vue中时间原因部分代码没有进行封装整理，见谅


<template><van-popupv-model="showDate"position="bottom":round="true":lazy-render="false"class="time_picker"><div class="user_title"><span>Choose your pick up time</span><span class="right_close" @click="handleToggle"></span></div><van-picker ref="_picker":columns="columns" :item-height="55"@change="onChange"@confirm="handleOk"@cancel="handleCancel"/><div class="timer_ok" @click="handleOk">OK</div></van-popup>
</template>
<script>
export default{data () {return {now : null,//当前时间，本处使用的是当前时间+30分钟，然后向下取整，都为5的倍数minH: '',//最小【时】minM: '',//最小【分】lastData :'',//上一次的日期lastMinute:'',//上一次的分钟currentHours:'',//当前小时currentMinute:'',//当前分钟showDate:false,yearObj:{},//存年月，格式化时间的时候用columns:[{values: [],className: 'column1'},{values: ['00h','01h','02h','03h','04h','05h','06h','07h','08h','09h','10h','11h','12h','13h','14h','15h','16h','17h','18h','19h','20h','21h','22h','23h'],className: 'column2',},{values: ['00m','05m','10m','15m','20m','25m','30m','35m','40m','45m','50m','55m'],className: 'column3',}]}},created(){this.now = new Date(+new Date() + 30*60*1000);//当前时间,加30分钟（根据需要自己调整）,因为是需要预约打车等使用，//所以提供的可选时间不能太接近当前时间，比如你8:10分准备约车，那么可选的最近时间为8:40this.columns[0].values = [this.getMD(0),this.getMD(1),this.getMD(2),this.getMD(3),this.getMD(4),this.getMD(5),this.getMD(6)]//最近7天this.getHM();//获取时分},mounted(){let picker = this.$refs._picker;//picker实例var minute = [];//分var hour = [];//时for(var i = 23; i >= this.minH; i--){minute.unshift((i<10?'0'+i:i)+'h')}this.currentHours = minute[0];picker.setColumnValues(1, minute);//初始化设置【时】列的所有值picker.setColumnValue(1, this.currentHours);//初始化设置【时】列的选中值this.lastData = this.getMD(0);this.lastMinute = this.minM+'m';for(var i = this.minM; i < 60; i+=5){hour.push((i<10?'0'+i:i)+'m')}this.currentMinute = hour[0]picker.setColumnValues(2, hour);//初始化设置【分】列的所有值picker.setColumnValue(2, this.currentMinute);//初始化设置【分】列的选中值},methods:{getMD(d){//获取月，日var date = new Date(+this.now+d*24*60*60*1000);var month = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];//月份，如果想用中文可以在这替换var day = ['Sun','Mon','Tues','Wed','Thur','Fri','Sat'];//星期，如果想用中文可以在这替换var key = month[date.getMonth()]var obj = {};obj[month[date.getMonth()]+'.'+(date.getDate()<10?'0'+date.getDate():date.getDate())] = date.getFullYear()Object.assign(this.yearObj,obj)return  month[date.getMonth()]+'.'+(date.getDate()<10?'0'+date.getDate():date.getDate())+' '+day[date.getDay()];},getHM(){//获取时分this.minH = this.now.getHours();//时this.minM = Math.floor(this.now.getMinutes()/5)*5;//分，分钟取整，都是5的倍数},onChange(picker,data){var minute = [];//时var hour = [];//分if(data[0] != this.lastData){//日期改变了this.currentHours = data[1]this.currentMinute = data[2]if(data[0] == this.getMD(0)){//说明是当天for(var i = 23; i >= this.minH; i--){//时minute.unshift((i<10?'0'+i:i)+'h')}picker.setColumnValues(1, minute);picker.setColumnValue(1, this.currentHours);this.currentHours = minute[0]for(var i = this.minM; i < 60; i+=5){//分hour.push((i<10?'0'+i:i)+'m')}picker.setColumnValues(2, hour);//初始化设置【分】列的所有值picker.setColumnValue(2, this.currentMinute);//初始化设置【分】列的选中值this.currentMinute = hour[0]}else if(data[0] == this.getMD(6)){//最后一天for(var i = 0; i <= this.minH; i++){minute.push((i<10?'0'+i:i)+'h')}picker.setColumnValues(1, minute);picker.setColumnValue(1, this.currentHours);this.currentHours = minute[minute.length-1];for(var i = this.minM; i >= 0; i-=5){//分hour.unshift((i<10?'0'+i:i)+'m')}picker.setColumnValues(2, hour);//初始化设置【分】列的所有值picker.setColumnValue(2, this.currentMinute);//初始化设置【分】列的选中值this.currentMinute = hour[hour.length-1]}else{picker.setColumnValues(1, this.columns[1].values);picker.setColumnValue(1, this.currentHours);picker.setColumnValues(2, this.columns[2].values);picker.setColumnValue(2, this.currentMinute);}this.lastData = data[0];}else {//日期没改变if(data[0] == this.getMD(6)){//说明是最后一天if(this.minH+'h' != data[1]){//如果是最后一天，但不是最后一个小时if(this.lastMinute == data[2]){//分钟没改变picker.setColumnValues(2, this.columns[2].values);picker.setColumnValue(2, this.currentMinute);this.currentMinute = this.columns[2].values[0]}}else{//是最后一天的最后一个小时if(this.lastMinute == data[2]){//分钟没改变for(var i = this.minM; i >= 0; i-=5){//分hour.unshift((i<10?'0'+i:i)+'m')}picker.setColumnValues(2, hour);//初始化设置【分】列的所有值picker.setColumnValue(2, this.currentMinute);//初始化设置【分】列的选中值this.currentMinute = hour[hour.length-1]this.lastMinute = data[2]}}}else if(data[0] == this.getMD(0)){//第一天if(this.minH+'h' != data[1]){//如果是第一天，但不是第一个小时if(this.lastMinute == data[2]){//分钟没改变picker.setColumnValues(2, this.columns[2].values);picker.setColumnValue(2, this.currentMinute);this.currentMinute = this.columns[2].values[0]}}else{//是第一天的第一个小时if(this.lastMinute == data[2]){//分钟没改变for(var i = this.minM; i < 60; i+=5){//分hour.push((i<10?'0'+i:i)+'m')}picker.setColumnValues(2, hour);//初始化设置【分】列的所有值picker.setColumnValue(2, this.currentMinute);//初始化设置【分】列的选中值this.lastMinute = data[2]this.currentMinute = hour[0]}}}}},handleToggle(){this.showDate = !this.showDate},handleOk(){var time = this.$refs._picker.getValues()this.showDate = false;// this.$parent.setDateTime(time)var year = this.yearObj[time[0].split(' ')[0]]//获取对应的年this.$emit('setDateTime',time,year);//调用父组件方法},handleCancel(){this.showDate = false;},},
}
</script>
<style lang="stylus">.time_picker{height: 416px;.van-picker-column__item {font-family: PingFangSC-Medium;font-size: 18px;color: #333333;font-weight :600;}}
</style>
<style lang="stylus" scoped>.van-popup--bottom.van-popup--round {border-radius :11px 11px 0 0;}.user_title {font-family: PingFangSC-Semibold;font-size: 18px;color: #2E2F30;letter-spacing: 0;text-align: center;margin:18px 0 20px;font-weight :600;.right_close {display:inline-block;width :20px;height :20px;background :url(../../assets/images/right_close.png)background-size :20px 20px;position:absolute;right :15px;top:18px;}}.timer_ok {width:345px;height :49px;background: #FB5350;border-radius: 7px;font-family: PingFangSC-Semibold;font-size: 18px;color: #FFFFFF;text-align: center;line-height :49px;position :absolute;left:0;right :0;margin:auto;bottom:15px;}
</style>

使用方法：在test02.vue中


<template><div class="main"><van-button type="info" v-on:click="toggle">点击</van-button><datetimepicker ref="_picker" @setDateTime="setDateTime"></datetimepicker></div>
</template>
<script>
import datetimepicker from './datetimepicker.vue'
export default{components:{datetimepicker},data () {return {}},mounted(){},methods:{toggle(){this.$refs._picker.handleToggle()},setDateTime(time,year){//选择日期ok按钮console.log(time,year)//["Apr.08 Wed", "15h", "45m"] 2020},},
}
</script>

返回的时间是一个数组，可根据自己需要自行组装，【拿走不谢，点个赞就行】

打车时间联级选择插件，时间联动选择，首汽打车时间选择插件相关推荐

Ant Design Cascader组件实现联级组件实现省市区联动
Ant Design Cascader 联级组件实现省市区联动 <a-form ref="formRegister" :form="form" id=&q ...
java后台怎么获取系统时间_Java 后台获取当前时间
Calendar c = Calendar.getInstance();//可以对每个时间域单独修改 int year = c.get(Calendar.YEAR); int month = c.ge ...
基于51单片机定时器计数+2片74HC595联级+8位数码管时钟+按键修改时间
基于51单片机定时器计数+2片74HC595联级+8位数码管时钟+按键修改时间 Proteus仿真实例代码 #include "at89x52.h" /**74hc595引脚定义 ...
Layui时间插件laydate只选择时分
一.说明二.分析三.效果四.代码一.说明需要一个只选择时分的控件,首先想到的是laydate,然后看一下控件的类型 type 可选值名称用途 year 年选择器只提供年列表选择 mon ...
前端实现商品联级选择禁用（附带一个表情包插件）
<template><div id="app"><h3>前端实现淘宝商品联级选择禁用</h3><div v-for=" ...
广东计算机考试1级时间安排,1级计算机考试时间
在每年的计算机考试时间是怎样安排的呢?下面是学习啦小编为大家分享的1级计算机考试,供大家参阅. 1级计算机考试时间 1级计算机考试相关调整 2017年考试继续使用2013版考试体系,同时对部分级别和科 ...
a-range-picker限制选择今天之前的时间和今天之后的时间
a-range-picker限制选择今天之前的时间和今天之后的时间 antd的时间选择器做限制主要用到的参数是disabledDate ,下面我们看下案例: HTML: <a-date-pick ...
android日期联动,Android时间(TimePicker)日期(DatePicker)控件联动
Android原生控件中时间日期是分开的,但是有时我们的实际工作中可能是需要两个联动选择的,这时就需要我们自己将两个控件组合起来封装了一个工具类. image.png image.png 一. 创建工 ...
腾讯地图城市选择插件-三级联动
城市数据来自于腾讯地图- 腾讯地图api http://lbs.qq.com/webservice_v1/guide-region.html 1.设计思路 1.因为是传城市ID获取下级城市数据-所以这 ...

打车时间联级选择插件，时间联动选择，首汽打车时间选择插件

打车时间联级选择插件，时间联动选择，首汽打车时间选择插件相关推荐

最新文章

热门文章