Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right
Article directory
foreword
Searching for data within a certain period of time is a requirement for many websites, so how to set the data within a certain period of time by default? Today I will share
1. The final effect of el-date-picker
2. Writing steps
Gossip less, link ~~ Oh! On the code! ! !
<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;
},
Summarize
Setting the default value for the el-date-picker date picker is mainly three steps in the code part:
- Write a date picker for el-date-picker
- Define openTime in data
This is the end of sharing the value of openTime (get24hoursRangeTime) . If you have any questions or suggestions, welcome to discuss, thank you! +