disabledDate根据开始时间设置结束时间禁用状态 vue elementUI

胆大王-

已于 2023-04-13 08:57:16 修改

阅读量794

点赞数

分类专栏： vue与elementUI 文章标签： vue.js elementui javascript

于 2023-04-07 17:30:51 首次发布

本文链接：https://blog.youkuaiyun.com/wulikunbing/article/details/130016706

版权

vue与elementUI 专栏收录该内容

42 篇文章

订阅专栏

这段代码展示了如何在Vue.js应用中使用el-date-picker组件来创建两个日期选择器，一个用于开始日期，一个用于结束日期。结束日期的选择被限制在开始日期之后的一周内，并且初始化为当前日期的一周前和当前日期。此外，开始日期不能选择当前时间之后的日期。

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

<template>
  <div class="block">
    <span class="demonstration">开始时间</span>
    <el-date-picker
      v-model="startDate"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期"
      :picker-options="pickerOptionsStart">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">结束时间</span>
    <el-date-picker
      v-model="endDate"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //开始时间限制只能选当前时间之前的
        pickerOptionsStart: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        pickerOptions: {
        //结束时间限制只能选开始时间之后一周的,比如开始时间选1号，结束时间只能选7号
          disabledDate:(time) => {//这里不加箭头函数获取不到this.startDate
            if(new Date(time).getTime() > (new Date(this.startDate).getTime() + 6*24*3600*1000)){
                return time.getTime() > new Date(this.startDate).getTime() + 6*24*3600*1000;
            }else{
                return time.getTime() < new Date(this.startDate).getTime() + 5*24*3600*1000;
            }
          },
        },
        startDate: '',
        endDate: '',
      };
    },
    created(){
        this.setDate()
    },
    methods:{
        //设置默认值开始时间为当前时间的一周前，结束时间为当前日期
        setDate(){
            const start = new Date();
            start.setTime(start.getTime() - 6*24*3600*1000);
            this.startDate = start;
            this.endDate = new Date();
        }
    }
  };
</script>

完整代码如上：相关方法有注释。

上面写的开始和结束时间的输入框是两个单独的输入框，结束时间需要根据开始时间进行计算。两者之间的间隔是正好一周，比如：开始时间选完1号之后，结束时间只有7号这一天可以选择，其他时间都被禁用。同时，还设置了一个默认值，即最近的一周，如：今天7号，那么开始时间是1号，结束时间是7号。