Element el-date-picker 组件多个日期/时间相互限制

发呆的小蔡°

已于 2023-08-16 09:55:02 修改

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： element Vue(Vue2) 文章标签： vue.js javascript 前端

于 2023-01-06 15:03:16 首次发布

本文链接：https://blog.youkuaiyun.com/Shivy_/article/details/128577841

Vue(Vue2) 同时被 2 个专栏收录

10 篇文章

订阅专栏

element

3 篇文章

订阅专栏

在使用ElementUI的日期选择器DatePicker时，可以通过picker-options属性来设置限制，例如确保开始时间在结束时间之前，且两者都小于当前时间。文章提供了示例代码，展示如何在开始时间、结束时间和发表时间之间设置相互约束。

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

介绍

在使用 element的 DatePicker 日期选择器时；当有多个时间，并且相互存在着限制关系的时候，可以使用日期选择器里的 picker-options 属性，来进行限制。

使用场景

一：开始时间与结束时间

当有两个时间：开始时间和结束时间；
他们的关系是：如果有开始时间，那么结束时间必须大于开始时间并且小于当前时间。如果有结束时间，那么开始时间必须再结束时间及以前。
代码如下：

<template>
  <div>
    <el-form class="publish-form" :model="form" :rules="rules" label-position="top" :inline="true" ref="fromData" :show-message="false">
      <el-form-item prop="startTime" label="开始时间" class="way-form-box">
         <el-date-picker v-model="form.startTime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptionsStart" placeholder="请选择时间">
         </el-date-picker>
       </el-form-item>
      <el-form-item prop="finishTime">
         <span slot="label">
          创作完成时间
            <span style="color: #999;">（示例：1990-01-01）</span>
         </span>
         <el-date-picker v-model="form.finishTime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptionsEnd" placeholder="请选择">
         </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>
<template>
  <div>
    <el-form class="publish-form" :model="formData" :rules="rules" label-position="top" :inline="true" ref="formDataRef" :show-message="false">
      <el-form-item prop="startTime" label="开始时间" class="way-form-box">
        <el-date-picker v-model="formData.startTime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptionsStart" placeholder="请选择时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="finishTime">
        <span slot="label">
          完成时间
            <span style="color: #999;">（示例：1990-01-01）</span>
        </span>
        <el-date-picker v-model="formData.finishTime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptionsEnd" placeholder="请选择">
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // form 表单字段
        formData: {
          startTime: "", // 开始时间
          finishTime: "", // 结束时间
        },
        rules: {
   	  	  // 开始时间
          startTime: [
            {
              type: "string",
              required: false,
              message: "请选择开始时间",
              trigger: "change",
            },
          ],
          // 结束时间
          finishTime: [
            {
              type: "string",
              required: true,
              message: "请选择完成时间",
              trigger: "change",
            },
          ],
        },
        // 开始时间限制
        pickerOptionsStart: {
          disabledDate: time => {
            // 获取结束时间
            let endTime = this.formData.finishTime;
            // 如果有结束时间，开始时间必须在结束时间及以前
            if(endTime) {
              return (time.getTime() >= new Date(endTime).getTime());
            } else {
              // 选择今天之前
              // return time.getTime() > Date.now() - 8.64e6 - 24*60*60*1000;
              // 今天及以前
              return time.getTime() > Date.now() - 8.64e6;
            }
          }
        },
        // 结束时间限制
        pickerOptionsEnd: {
          disabledDate: time => {
            // 获取开始时间
            let startTime = this.formData.startTime;
            // 如果有开始时间，结束时间必须在开始时间及以后
            if(startTime) {
              // 选择开始时间以前
              // return ((time.getTime() < new Date(startTime).getTime() - 8.64e6)  || ( time.getTime() > Date.now() - 8.64e6));
              //  开始时间及以前
              return ((time.getTime() <= new Date(startTime).getTime() - 86400000) || (time.getTime() >= Date.now()));
            }
          }
        }
      }
    }
  }
</script>

二：开始时间，结束时间与发表时间

当有三个时间：开始时间和结束时间，发表时间；
他们的关系是：开始时间 <= 结束时间 <= 发表时间
代码如下：

<template>
  <div>
    <el-form class="publish-form" :model="formData" :rules="rules" label-position="top" :inline="true" ref="formDataRef" :show-message="false">
      <el-form-item prop="startTime" label="开始时间" class="way-form-box">
        <el-date-picker v-model="formData.startTime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptionsStart" placeholder="请选择时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="finishTime">
        <span slot="label">
          完成时间
            <span style="color: #999;">（示例：1990-01-01）</span>
        </span>
        <el-date-picker v-model="formData.finishTime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptionsEnd" placeholder="请选择">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="publishTime" label="发表时间">
        <el-date-picker v-model="formData.publishTime" value-format="yyyy-MM-dd" type="date" :picker-options="publishOptions" placeholder="请选择时间">
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // form 表单字段
        formData: {
          startTime: "", // 开始时间
          finishTime: "", // 结束时间
          publishTime: "", // 发表时间
        },
        rules: {
   	  	  // 开始时间
          startTime: [
            {
              type: "string",
              required: false,
              message: "请选择开始时间",
              trigger: "change",
            },
          ],
          // 结束时间
          finishTime: [
            {
              type: "string",
              required: true,
              message: "请选择完成时间",
              trigger: "change",
            },
          ],
        },
        // 开始时间限制
        pickerOptionsStart: {
          disabledDate: time => {
            // 获取结束时间
            let endTime = this.formData.finishTime;
             // 获取发表时间
            let publishTime = this.formData.publishTime;
            // 如果有结束时间，开始时间必须在结束时间及以前
            if (endTime) {
              return (time.getTime() >= new Date(endTime).getTime());
            }
            //  如果选择了发表时间；那么开始时间必须在发表以前
            if (publishTime) {
              return (time.getTime() >= new Date(publishTime).getTime());
            }
            else {
              //  console.log(Date.now());
              // 选择今天之前
              // return time.getTime() > Date.now() - 8.64e6 - 24*60*60*1000;
              // 今天及以前
              return time.getTime() > Date.now() - 8.64e6;
            }
          }
        },
        // 结束时间限制
        pickerOptionsEnd: {
          disabledDate: time => {
            // 获取开始时间
            let startTime = this.formData.startTime;
            // 获取发表时间
            let publishTime = this.formData.publishTime;
            if (startTime && publishTime) {
              // 如果有开始时间  并且有  发表时间；  那结束时间必须在开始及以后 ；并且 发表及以前
              return ((time.getTime() <= new Date(startTime).getTime() - 86400000) || (time.getTime() > new Date(publishTime).getTime()))
            } else if (startTime) {
              return ((time.getTime() <= new Date(startTime).getTime() - 86400000) || (time.getTime() >= Date.now()));
            }
            else if (publishTime) {
              return (time.getTime() >= new Date(publishTime).getTime());
            }
            else {
              // 选择今天以及今天之前
              return time.getTime() > Date.now() - 8.64e6;
            }
          }
        },
        // 发表时间
        publishOptions: {
          disabledDate: time => {
            // 获取完成时间
            let endTime = this.formData.finishTime;
            if (endTime) {
              return ((time.getTime() <= new Date(endTime).getTime() - 86400000) || (time.getTime() > Date.now()));
            } else {
              // 选择今天以及今天之前；
              return time.getTime() > Date.now() - 8.64e6;
            }
          }
        },
      }
    }
  }
</script>