el-date-picker如何默认设置某个时间段

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

搜索某个特定时间段内的数据，是很多网站都会有的需求，那么如何默认设置某个时间段内的数据呢？今天我来做下分享

一、el-date-picker最终展示出的效果

二、编写步骤

闲话少叙，上链接~~ 哦 ！上代码！！！

<el-form-item
	label="开门时间"
	prop="openTime"
 >
    <el-date-picker
    v-model="formInline.openTime"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd HH:mm:ss"
    @change="onSearch"
   >
   </el-date-picker>
</el-form-item>

//搜索form表单
formInline: {
  ......
  openTime: this.get24hoursRangeTime(),
  ......
},

get24hoursRangeTime() {
      //当前设定的日期时间
      let rangeArr = []; //定义一个装时间的数组
      let d = new Date();
      let year1, month1, day1, hour1, minutes1, seconds1;
      year1 = d.getFullYear();
      month1 = d.getMonth() + 1;
      day1 = d.getDate();
      hour1 = d.getHours();
      minutes1 = d.getMinutes();
      seconds1 = d.getSeconds();
      month1 = month1 > 10 ? month1 : '0' + month1; 
      day1 = day1 > 10 ? day1 : '0' + day1;
      minutes1 = minutes1 < 10 ? '0' + minutes1 : minutes1;
      seconds1 = seconds1 < 10 ? '0' + seconds1 : seconds1;
      let value1 = year1 + '-' + month1 + '-' + day1 + ' ' + hour1 + ':' + minutes1 + ':' + seconds1;
      rangeArr.push(value1);
      //前一天设定的日期时间
      let year2, month2, day2, hour2, minutes2, seconds2;
      //getTime() 返回距 1970 年 1 月 1 日之间的毫秒数,setTime设置 Date 对象的日期和时间值
      d.setTime(d.getTime() - 24 * 60 * 60 * 1000); //减去一天的毫秒时间，就是前一天的了
      year2 = d.getFullYear();
      month2 = d.getMonth() + 1;
      day2 = d.getDate();
      hour2 = d.getHours();
      minutes2 = d.getMinutes();
      seconds2 = d.getSeconds();
      month2 = month2 > 10 ? month2 : '0' + month2;
      day2 = day2 > 10 ? day2 : '0' + day2;
      minutes2 = minutes2 < 10 ? '0' + minutes2 : minutes2;
      seconds2 = seconds2 < 10 ? '0' + seconds2 : seconds2;
      let value2 = year2 + '-' + month2 + '-' + day2 + ' ' + hour2 + ':' + minutes2 + ':' + seconds2;
      rangeArr.unshift(value2);
      return rangeArr;
    },

总结

给el-date-picker日期选择器设置默认值主要就是代码部分的三个步骤：

1. 写入一个el-date-picker的日期选择器
2. 在data中定义openTime
3. 对openTime的值进行处理(get24hoursRangeTime)
   分享就到这里了，如果您有什么疑问或者建议欢迎探讨，谢谢！+