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>
相关推荐
遂心_5 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark5 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
遂心_6 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy6 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy6 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼6 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
一个不爱写代码的瘦子7 小时前
迭代器和生成器
前端·javascript
洋葱头_8 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing8 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
源猿人10 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化