vue element的日期选择器，选择日期时间范围的限制

最新推荐文章于 2025-04-21 19:19:02 发布

l_XIANA

最新推荐文章于 2025-04-21 19:19:02 发布

阅读量4.7k

点赞数

文章标签： vue.js es6 javascript html

本文链接：https://blog.youkuaiyun.com/l_XIANA/article/details/115733928

版权

本文介绍了如何使用Element UI的日期选择器组件限制活动开始和结束时间的选择范围，确保活动开始时间不早于当前日期，结束时间不早于开始时间。通过设置`pickerOptions`的`disabledDate`属性，实现了这一功能，保证了活动时间配置的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做活动配置，那么就会需要配置活动的开始时间和活动的结束时间，对于活动开始时间选择范围是不能今天之前时间的，活动的结束时间也是，是不能选择今天之前的时间和活动开始之前时间的，有了明确的目的，现在就来解决它！

根据element官网提供的属性,来实现它

在这里插入图片描述

html部分

 <el-form-item
      label="活动时间"
      prop="startTime"
      :rules="[
        {
          required: true,
          message: '请选择活动开始日期',
          trigger: 'change',
        },
      ]"
    >
      <el-date-picker
        v-model="form.startTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择活动开始日期"
        clearable
        :picker-options="pickerOptionsStart"
      />
    </el-form-item>
    <el-form-item
      label=""
      label-width="8px"
      prop="endTime"
      :rules="[
        {
          required: true,
          message: '请选择活动结束日期',
          trigger: 'change',
        },
      ]"
    >
      <el-date-picker
        v-model="form.endTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetime"
        placeholder="选择活动结束日期"
        clearable
        :picker-options="pickerOptionsEnd"
      />
    </el-form-item>

js部分

export default {
  data() {
    return {
      form: {
        startTime: "", // 开始时间
        endTime: "", // 结束时间
      },
      // 限制时间范围
      // 活动开始时间不能选择今天之前的时间 今天之前的时间设置禁止选择状态
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.form.endTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > this.form.endTime
            );
          }
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      // 活动结束时间不能选择活动开始的之前的时间
      //比如选择活动开始时间为4.16日，那么4.16日之前都要为禁止选择状态
      pickerOptionsEnd: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 8.64e7 ||
            time.getTime() < new Date(this.form.startTime).getTime()
          );
        },
      },
    };
  },
};