elementUI日期选择器

一个日期选择器

<el-form-item label="申请时间:">
   <el-date-picker
      v-model="timeRange"
      type="daterange"
      range-separator="~"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      class="time"
      ></el-date-picker>
</el-form-item>

  data(){
    return {
        timeRange: null,
    }
  },
  watch: {
    timeRange: {
      /**
       * @param { Array<Date> } value
       */
      handler (value) {
        this.queryParams.createTimeStart = value?.[0]?.getTime();
        this.queryParams.createTimeEnd = value?.[1]?.getTime();
      },
      deep: true,
    },
  },

两个日期时间输入框时间 范围控制

<el-form-item label="调用时间：">
  <el-col :span="11">
     <el-date-picker
        v-model="queryParams.startTime"
        type="date"
        placeholder="开始时间"
        style="width: 80%"
        value-format="timestamp"
        :picker-options="pickerOptions0"
        ></el-date-picker>
  </el-col>
  <el-col :span="0">—</el-col>
     <el-col :span="11">
       <el-date-picker
        v-model="queryParams.endTime"
        type="date"
        placeholder="结束时间"
        style="width: 80%"
        value-format="timestamp"
        :picker-options="pickerOptions1"
        ></el-date-picker>
   </el-col>
</el-form-item>

data(){
    return {
      queryParams:{
        starTime:'',
        endTime:'',
      },
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.queryParams.endTime) {
            var endTime = new Date(this.queryParams.endTime).valueOf();
          }
          return time.valueOf() > endTime;
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.queryParams.startTime) {
            // 让用户可以选择开始结束同一天
            var startTime = new Date(this.queryParams.startTime).valueOf() - 8.64e7 + 1;
          } else {
            return false;
          }
          return time && time.valueOf() < startTime;
        },
      },
    }
}

先选择开始时间，控制结束时间必须大于开始时间的选择范围

先选择结束时间，控制开始时间要小于结束时间的选择范围