应项目需求要分别设置开始日期和结束日期,且未来日期不可选择,实现代码如下:
1.template内容
<el-row style="margin: 20px 0px">
<el-date-picker v-model="startValue" type="datetime"
:picker-options="pickerOptions" placeholder="请选择开始时间">
</el-date-picker>
<el-date-picker v-model="endValue" type="datetime"
:picker-options="pickerOptions" placeholder="请选择截止时间">
</el-date-picker>
<el-button type="primary" @click="get(); getWeek();getUsageRate()">
获取数据
</el-button>
</el-row>
2.script内容
<script>
export default {
data() {
return {
startValue: this.setDateTime(this.subtractDays(new Date(), 7), 0, 0, 0),//默认日期
endValue: this.setDateTime(this.subtractDays(new Date(), 1), 23, 59, 59),//前六天
//禁止选择未来日期
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
},
}
},
methods: {
subtractDays(date, days) {
// 返回给定日期的前几天的日期
const result = new Date(date.getTime());
result.setDate(result.getDate() - days);
return result;
},
setDateTime(date, hours, minutes, seconds) {
// 设置日期对象的小时、分钟和秒
date.setHours(hours, minutes, seconds, 0); // 设置秒和毫秒为0
return date;
}
}
}
3.实现效果是这样
问题总结,欢迎交流