element-ui 日期选择器

DatePicker 日期选择器 的使用，主要实现的功能是开始时间随便选，结束时间是不能小于开始时间

1、直接上代码，我这里用value-format="yyyy-MM-dd"和format="yyyy-MM-dd"做了只选择年月日

<el-date-picker
   v-model="editForm.scpgjyxqs"
   type="date"
   value-format="yyyy-MM-dd"
   format="yyyy-MM-dd"
   :picker-options="pickerOptionsStart"
   placeholder="选择开始日期"
   >
</el-date-picker>
<el-date-picker
    v-model="editForm.scpgjyxqz"
    type="date"
    value-format="yyyy-MM-dd"
    format="yyyy-MM-dd"
    :picker-options="pickerOptionsEnd"
     placeholder="选择结束日期"
     >
</el-date-picker>

2、使用picker-options来配置，禁用日期通过 disabledDate 设置，传入函数，下面是配置在data函数里面的代码

data () {
  return {
      //开始日期配置
      pickerOptionsStart: {
        disabledDate: (time) => {
          let state;
          if (this.addPriceForm.scpgjyxqz !== "") {
            state =
              time.getTime() > Date.now() ||
              time.getTime() > new Date(this.addPriceForm.scpgjyxqz).getTime();
          } else {
            state = time.getTime() > Date.now();
          }
          return state;
        },
      }, 
      //结束日期配置
      pickerOptionsEnd: {
        disabledDate: (time) => {
          return (
            time.getTime() <
              new Date(this.addPriceForm.scpgjyxqs).getTime() - 86400000
          );
        },
      }, 
  }
}

3、拓展功能，下面的功能是选择了开始日期，结束日期则只能选开始日期到当前日期
比如：startTime: "2021年1月1日"，那么结束日期endTime: "当前日"
其实只是在结束日期那里添加了一个条件time.getTime() > Date.now()
当然，如果有需要也可也更改其他

data () {
  return {
      //开始日期配置
      pickerOptionsStart: {
        disabledDate: (time) => {
          let state;
          if (this.addPriceForm.scpgjyxqz !== "") {
            state =
              time.getTime() > Date.now() ||
              time.getTime() > new Date(this.addPriceForm.scpgjyxqz).getTime();
          } else {
            state = time.getTime() > Date.now();
          }
          return state;
        },
      }, 
      //结束日期配置
      pickerOptionsEnd: {
        disabledDate: (time) => {
          return (
            time.getTime() <
              new Date(this.addPriceForm.scpgjyxqs).getTime() - 86400000 || time.getTime() > Date.now()
          );
        },
      }, 
  }
}