基于Vant UI框架实现时间段选择器


Posted in Javascript onDecember 24, 2020

本文实例为大家分享了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示例

基于Vant UI框架实现时间段选择器

API:注意红色划掉的没有实现

基于Vant UI框架实现时间段选择器

基于Vant UI框架实现时间段选择器

基于Vant UI框架实现时间段选择器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中将字符串转换成json的三种方式
Jan 12 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
jQuery实现预加载图片的方法
Mar 17 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
原生jQuery实现只显示年份下拉框
Dec 24 #jQuery
js制作提示框插件
Dec 24 #Javascript
vue+openlayers绘制省市边界线
Dec 24 #Vue.js
在HTML中使用JavaScript的两种方法
Dec 24 #Javascript
vue项目中openlayers绘制行政区划
Dec 24 #Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 #Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 #Vue.js
You might like
PHP版本常用的排序算法汇总
2015/12/20 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
Python多线程学习资料
2012/12/19 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Django实现快速分页的方法实例
2017/10/22 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python删除n行后的其他行方法
2019/01/28 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
在C#中如何实现多态
2014/07/02 面试题
公司综合部的成员自我评价分享
2013/11/05 职场文书
装修协议书范本
2014/04/21 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
工资收入证明
2014/10/07 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
小学英语听课心得体会
2016/01/14 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers