el-date-picker 显示默认时间,时间段,可选指定时间

3,902 阅读1分钟

element UI 日期组件应用场景比较多,举几个最近遇到的需求

默认显示一周的日期(今天开始) 指定日期之前不可选,今天及以后日期不可选

 <el-form
    :inline="true"
    :model="deviceFormData"
    ref="deviceFormData"
    class="hardware-form"
  >
    <el-form-item label="产品成立日:">
      <el-date-picker
        v-model="deviceFormData.time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        @change="handleDate"
      >
      </el-date-picker>
    </el-form-item>
  </el-form>
  
data (){
	return {
        // 默认日期
        deviceFormData: {
          time: []
      },
      paramsDate: {
        cpclrqS: null, //开始日期
        cpclrqE: null //结束日期
    },
    //控制可选日期
    pickerOptions: {
      disabledDate: time => {
        let date2020 = new Date("2020/05/31 23:59:59").getTime();//当前日期之前不可选
        return !(date2020 < time.getTime() && time.getTime() < Date.now());
      }
    }
    }
},
methods:{
    // 默认日期
    getTimeFn() {
      const that = this;
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);// n天 * n
      that.deviceFormData.time[0] = that.formatDate(start);
      that.deviceFormData.time[1] = that.formatDate(end);
      this.paramsDate.cpclrqS = that.deviceFormData.time[0];
      this.paramsDate.cpclrqE = that.deviceFormData.time[1];
    },
}