element两个日期选择器怎样进行联动

最新推荐文章于 2025-09-18 09:39:50 发布

原创最新推荐文章于 2025-09-18 09:39:50 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #css3

本文介绍如何使用Element UI实现两个日期选择器之间的联动效果，确保结束时间不会早于开始时间，并且两者都不能选择未来日期。

element两个日期选择器怎样进行联动

展示效果
解决方法

展示效果

在这里插入图片描述

解决方法

<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker clearable size="small"
          v-model="queryParams.startTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择开始时间"
          :picker-options="startNoTime">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker clearable size="small"
                        v-model="queryParams.endTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择结束时间"
                        :picker-options="endNoTime">
        </el-date-picker>
      </el-form-item>
</el-form>

data() {
	return {
	  queryParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: null,
        endTime: null,
	  },
	  // 开始时间限制范围
      startNoTime: {
        disabledDate(date) {
          // 可选当天以及当天之前的日期
          return date.getTime() > Date.now()
        }
      },
      // 结束时间限制范围
      endNoTime: {
        disabledDate(date) {
          // 可选当天以及当天之前的日期
          return date.getTime() > Date.now()
        }
      },
	}
}，
watch: {
    "queryParams.startTime": {
      handler(val) {
        this.endNoTime = {
          disabledDate(time) {
            const time1 = new Date(val).getTime() - 8.64e7;
            // 结束时间禁止选择当天以后日期并且不能选择开始时间之前的
            return time.getTime() < time1 || time.getTime() > Date.now()
          }
        }
      }
    },
    "queryParams.endTime": {
      handler(val) {
        this.startNoTime = {
          disabledDate(time) {
            const time1 = new Date(val).getTime() - 8.64e7;
            // 结束时间禁止选择当天以后日期并且不能选择开始时间之前的
            return time.getTime() > time1 || time.getTime() > Date.now()
          }
        }
      }
    },
  },