VUX Datetime 组件compute-days-function动态设置日期列表

黎轩栀海

于 2022-07-28 15:54:13 发布

阅读量732

点赞数

CC 4.0 BY-SA版权

分类专栏：前端前端框架小领地文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/yuan_jlj/article/details/126036137

前端同时被 2 个专栏收录

154 篇文章

订阅专栏

前端框架小领地

22 篇文章

订阅专栏

本文介绍了如何利用Datetime组件的`compute-days-function`属性来实现动态设置日期列表。通过示例代码展示了如何根据预设的日期数组过滤日期，只显示特定的日期，从而实现自定义日期选择的功能。在 Vue 应用中，这个功能对于创建定制化的日期选择器非常有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看要实现的效果:

选择特定的时间,这就要用到Datetime组件的compute-days-function属性

名字	类型	默认值	说明	版本要求
compute-days-function	function		动态设置日期列表，参数为 `({year, month, min, max}, generateRange)`	v2.6.1

直接上代码

export default {
  data() {
    return {
      computeDaysValue:'',
      startDate:'2022-07-27',
      endDate:'2022-08-10',
      DayList:['29','01','02','05','08'],
    }
  },
}

<datetime format="YYYY-MM-DD" v-model="computeDaysValue" :start-date="startDate" :end-date="endDate" :compute-days-function="computeDaysFunction" title="日期" placeholder="请选择"></datetime>

computeDaysFunction(options, generateRange) {
      console.log('options',options);
      console.log('generateRange',generateRange);
      let dayl = [],minD = options.min;
      for(let i=minD;i<=options.max;i++){
        if(this.DayList.findIndex(sub=>sub==i)>=0){
          dayl.push(i);
        }
      }
      return dayl;
    },