avatar
Published on

Vue3+ElementPlus el-date-picker 时间范围限制配置详解

Vue3+ElementPlus el-date-picker 时间范围限制配置详解

引言

在前端开发中，经常需要对日期选择器进行时间范围限制，例如只允许选择最近几天或不允许选择未来日期。本文将详细介绍如何在 Vue3 + ElementPlus 项目中使用 el-date-picker 组件实现这些功能。

Vue2 + ElementUI 旧版实现可参考：elementUI el-date-picker 时间范围设置 固定时间段可选 配置

实现效果

通过配置，可以实现如下效果：

  • 禁止选择未来日期
  • 只允许选择最近 2 天内的日期范围

效果图

核心配置

1. Template 部分

使用 el-date-picker 组件，并配置日期范围选择类型：

<el-date-picker
  v-model="dateRange"
  type="daterange"
  range-separator="至"
  :disabled-date="disabledDateFun"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  format="YYYY-MM-DD"
  value-format="YYYY-MM-DD"
/>

2. Script 部分（Composition API）

采用 Vue3 的 script-setup 语法糖，核心是实现 disabledDate 方法：

<script lang="ts" setup>
import { ref } from "vue";

// 日期范围数据绑定
const dateRange = ref<string[]>([]);

/**
 * 禁用日期的判断函数
 * @param time 当前日期对象
 * @returns 是否禁用该日期
 */
const disabledDateFun = (time: Date): boolean => {
  const currentTime = new Date().getTime();
  const twoDaysAgo = currentTime - 2 * 8.64e7; // 2天前的时间戳 (8.64e7 = 24*60*60*1000)
  
  // 禁止选择未来日期
  if (time.getTime() > currentTime) {
    return true;
  }
  
  // 禁止选择两天前的日期
  if (time.getTime() < twoDaysAgo) {
    return true;
  }
  
  return false;
};
</script>

关键代码解析

disabledDate 方法

disabledDate 是 ElementPlus 提供的用于自定义禁用日期的回调函数，它接收一个 Date 对象作为参数，返回布尔值：

  • 返回 true 表示禁用该日期
  • 返回 false 表示允许选择该日期

时间范围计算逻辑

在示例中，我们实现了两个限制条件：

  1. 禁止选择未来日期：

    time.getTime() > new Date().getTime()

  2. 只允许选择最近 2 天：

    time.getTime() < Date.now() - 2 * 8.64e7

    其中 8.64e7 是一天的毫秒数（246060*1000），通过调整倍数可以轻松修改允许选择的天数范围。

扩展应用

根据实际需求，可以灵活调整 disabledDate 方法以实现不同的限制效果：

1. 只允许选择今天及之前的日期

const disabledDateFun = (time: Date): boolean => {
  return time.getTime() > new Date().getTime();
};

2. 只允许选择最近 7 天

const disabledDateFun = (time: Date): boolean => {
  const sevenDaysAgo = Date.now() - 7 * 8.64e7;
  return time.getTime() > Date.now() || time.getTime() < sevenDaysAgo;
};

3. 只允许选择本月

const disabledDateFun = (time: Date): boolean => {
  const now = new Date();
  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
  
  return time.getTime() < startOfMonth.getTime() || time.getTime() > endOfMonth.getTime();
};

总结

通过 ElementPlus 的 el-date-picker 组件和 disabledDate 回调函数，我们可以轻松实现各种日期范围限制需求。核心在于根据业务逻辑编写合适的日期判断条件，从而实现灵活的日期选择控制。

这种方法不仅适用于日期范围选择，也适用于单个日期选择的限制场景，是前端开发中常用的日期处理技巧之一。