基于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 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
javascript 原型继承介绍
2011/08/30 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
解决uWSGI的编码问题详解
2017/03/24 Python
Python学习入门之区块链详解
2017/07/25 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
以下的初始化有什么区别
2013/12/16 面试题
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
城管年度个人总结
2015/02/28 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
单位考核鉴定意见
2015/06/05 职场文书
在校证明模板
2015/06/17 职场文书
运动会广播稿100字
2015/08/19 职场文书
高三英语教学反思
2016/03/03 职场文书
销售会议开幕词
2016/03/04 职场文书
MySQL创建管理子分区
2022/04/13 MySQL