el-date-picker 置灰限制日期选择范围

抛开“开始时间”和“截止时间”的label不谈,如果选择的截止时间在开始时间之前,逻辑是有问题的吧,所以还是要从代码上做限制。

表现为选择开始时间后,则截止时间只能选择在开始时间之后的日期;选择了截止时间,则开始时间只能选择在截止时间之前的日期。

这里展示了两种限制,一种为置灰,一种为选择不合适的时间后置空另一个时间。

我使用的是vue3 + js的写法,复制后直接可以运行。

<template>
  <div class="app-container">
    <div class="search-box">
      <el-form :inline="true" :model="searchObj">
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="searchObj.startTime"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="开始时间"
            :disabled-date="disabledStartDate"
            @change="handleChangeStartDate"
          />
          &nbsp;至 &nbsp;
          <el-date-picker
            v-model="searchObj.endTime"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="结束时间"
            :disabled-date="disabledEndDate"
            @change="handleChangEndDate"
          />
        </el-form-item>
        <el-form-item label="">
          <el-button @click="onSearch">查询</el-button>
        </el-form-item>
        <el-form-item label="">
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { dayjs } from 'element-plus'

const searchObj = reactive({
  startTime: "",
  endTime: ""
});

// 如果 searchObj.endTime 存在且小于更新后的 searchObj.startTime,
// 则将 searchObj.endTime 设置为 null。
const handleChangeStartDate = () => {
  if (searchObj.endTime && dayjs(searchObj.endTime).isBefore(searchObj.startTime)) {
    searchObj.endTime = null;
  }
}

// 如果 searchObj.startTime 存在且大于更新后的 searchObj.startTime,
// 则将 searchObj.startTime 设置为 null。
const handleChangEndDate = () => {
  if (searchObj.startTime && dayjs(searchObj.startTime).isAfter(searchObj.endTime)) {
    searchObj.startTime = null;
  }
}

// 选择 startTime 后,对 endTime 做置灰限制
const disabledEndDate = (date) => {
  if (!searchObj.startTime) return false;
  return date < dayjs(searchObj.startTime).startOf("day")
}
// 选择 endTime 后,对 startTime 做置灰限制
const disabledStartDate = (date) => {
  if (!searchObj.endTime) return false;
  return date > dayjs(searchObj.endTime).startOf("day")
}

const onSearch = () => {
  console.log("查询")
}

const onReset = () => {
  searchObj.startTime = null
  searchObj.endTime = null
}

</script>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值