element-ui大家应该都知道，最近接触到一个日期选项卡的案例，顺便总结一下，Look！
这边有几点步骤需要注意，第一将日期选择器设置当前时间为默认时间；第二获取当前日期的后6天；第三将默认时间改成任意选择的日期，获取后6天的日期；第四日期选择器格式需要转换成我们所需要的格式。
按照上述思路，可以更好的帮助读者理解代码。
<template>
<el-col :span="24" class="block">
<el-date-picker v-model="chooseCurDay" :placeholder="nowDay" type="date"></el-date-picker>
</el-col>
<el-col :span="22" :offset="1" class="date">
<el-tabs v-model="activeName">
<el-tab-pane
v-for="(item,index) in days"
:key="index"
:label="funDate(chooseCurDay,index)"
:name="item.name"
></el-tab-pane>
</el-tabs>
</el-col>
</template>
<script>
export default {
data() {
return {
nowDay: "", //当前日期
chooseCurDay: "" //选择的日期
};
},
created() {
this.nowDay = this.dateFormat(new Date());
this.chooseCurDay = new Date();
},
methods: {
//转日期格式
dateFormat(time) {
var date = new Date(time);
var year = date.getFullYear();
var month =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1;
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours =
date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes =
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
// 拼接
return year + "-" + month + "-" + day;
},
funDate(date, aa) {
let date1;
date1 = date;
let time1 = this.dateFormat(date1); //time1表示当前时间
let date2 = new Date(date1);
date2.setDate(date1.getDate() + aa);
let time2 = this.dateFormat(date2);
date = "";
return time2;
}
}
}
</script>
