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

根据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>
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()
 
最终效果：
 
  指定起止日期，后选的将会受到先选的限制
  不同的日期选择器，不过也存在关联关系
实现方法不难，利用了 change 事件，动态改变 picker-options 中的 disableDate 即可。
查看Demo
Template
[removed][removed]
<script src="//unpkg.com/element-ui@2.3.8/lib/index.js
2. 先选择开始日期，那么结束日期必须在开始日期之后，即只能选择开始日期之后的日期；
3. 先选择结束日期，那么开始日期必须在结束日期之前，即只能选择结束日期之前的日期；
三个条件是【且】的关系。
实现效果：
小编操作和写文日期5月27日
<template>
    <div class="date-times-picker">
        <el-popover placement="bottom" width="460" trigger="click" v-model="visible" @after-leave="hideHandle">
            <div class="date-ti
                                    vue  el-date-picker 时间选择器内，选择一个日期，当前时间到后面的某一个时间日期(日期动态传入)。想要的结果日期选择器代码： 日期验证的方法： 动态传入限制日期参数：
                                    vue element-ui日期组件时间范围1.问题描述在使用element-ui el-date-picker组件时，我需要控制日期选择范围，比如开始时间小于结束时间，结束时间大于开始时间代码：2.问题描述还有一种需求是在第一种情况基础上加上时间范围，比如结束时间大于开始时间并且不能大于开始时间加一个月效果如下代码如下3.时间转换为String格式方法
1.问题描述
在使用element-ui el-date-picker组件时，我需要控制日期选择范围，比如开始时间小于结束时间，结束时间大于开始时间
                                    前端框架使用vue，组件库使用ant design of vue，后台框架使用springboot + mybatis plus
遇到一个时间范围查询的需求，但是查看之前的方式实现比较复杂，这里列一种实现简单的方式。
先看日期范围
日期范围查询的标签如下
<a-form-item label="时间范围">
  <a-range-picker @change="onRangeChange" />
</a-form-item>
change函数有两个参数