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>
相关推荐
星语卿1 小时前
Vuetify:构建优雅Vue应用的Material Design组件库
前端·javascript·vue.js
wangbing11251 小时前
界面规范11-对话框
javascript·vue.js·elementui
不一样的少年_2 小时前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
一枚前端小能手2 小时前
🔥 滚动监听写到手抽筋?IntersectionObserver让你躺平实现懒加载
前端·javascript
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js
遂心_2 小时前
React中的onChange事件:从原理到实践的全方位解析
前端·javascript·react.js
GHOME2 小时前
原型链的原貌
前端·javascript·面试
槿泽2 小时前
Vue集成Electron目前最新版本
前端·vue.js·electron
luckyCover2 小时前
带你一起攻克js之原型到原型链~
前端·javascript
麦当_2 小时前
SwipeMultiContainer 滑动切换容器算法指南
前端·javascript·算法