el-date-picker根据开始时间或结束时间禁用前后时间

javascript 复制代码
<template>
  <div>
    <el-form-item label="开始时间" prop="startTime">
      <el-date-picker
        v-model="inputForm.startTime"
        :disabled="disabled"
        value-format="yyyy-MM-dd"
        :clearable="true"
        type="date"
        :append-to-body="false"
        placeholder="请选择开始时间"
        :picker-options="startTimePickerOptions"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="结束时间" prop="endTime" label-width="110px">
      <el-date-picker
        v-model="inputForm.endTime"
        :disabled="disabled"
        value-format="yyyy-MM-dd"
        :clearable="true"
        type="date"
        :append-to-body="false"
        placeholder="请选择结束时间"
        :picker-options="endTimePickerOptions"
      ></el-date-picker>
    </el-form-item>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputForm: {
        startTime: null,
        endTime: null,
      },
      disabled: false, // 控制日期选择器是否禁用
    };
  },
  computed: {
    startTimePickerOptions() {
     let that = this //改变作用域
      return {
        disabledDate(time) {
          // 检查 inputForm 是否存在
          if (!that.inputForm || !that.inputForm.endTime) {
            return false; // 如果没有 inputForm 或没有选择结束时间,则不禁用任何日期
          }
          // 禁用结束时间开始时间之前的日期
          return time.getTime() < new Date(that.inputForm.endTime).getTime(); 
        },
      };
    },
    endTimePickerOptions() {
    let that = this //改变作用域
      return {
        disabledDate(time) {
          // 检查 inputForm 是否存在
          if (!this.inputForm || !this.inputForm.startTime) {
            return false; // 如果没有 inputForm 或没有选择开始时间,则不禁用任何日期
          }
          // 禁用开始时间结束时间之后的日期
          return time.getTime() < new Date(this.inputForm.startTime).getTime();
        },
      };
    },
  },

};
</script>
相关推荐
纪元A梦7 分钟前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
会飞的鱼先生10 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了10 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
秋天的一阵风16 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风17 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺36 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺37 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码38 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
JustHappy41 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
培根芝士1 小时前
electron-updater实现自动更新
javascript·electron