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 小时前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-memoize
前端·javascript·源码阅读
腾讯TNTWeb前端团队9 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
拉不动的猪12 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪12 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom14 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom14 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom14 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom14 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试