基于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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
绘制微信小程序验证码功能的实例代码
Jan 05 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 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
php printf输出格式使用说明
2010/12/05 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
php eval函数一句话木马代码
2015/05/21 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
python optparse模块使用实例
2015/04/09 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
详解Python的循环结构知识点
2019/05/20 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python 字典中的所有方法及用法
2020/06/10 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
设计师珠宝:Ylang 23
2018/05/11 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
会计专业毕业生自荐信范文
2013/12/20 职场文书
大学生求职计划书
2014/04/30 职场文书
教师个人考察材料
2014/12/16 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
怎样写观后感
2015/06/19 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python