Element UI DatePicker 日期选择器

该组件选择周的时候，默认显示‘xxxx年第x周’，但在需求要显示为‘xxxx年x月第x周（mm.dd - mm.dd)’或者‘本周（mm.dd - mm.dd)’，最终效果为

1. 首先需要修改v-model默认展示日期，控件中默认展示为周二，设置picker-options，修改为周一，

同时设置不可选本周日以后的时间：

<el-date-pickerv-model="weekValue1"type="week":format="thisweek + '（' + start2 + ' - ' + end2 + '）'"@change="showDate1":picker-options="onPicker" // 设置picker-optionsplaceholder="选择周":clearable="false">
</el-date-picker>

onPicker: {firstDayOfWeek: 1, // 周起始日为星期一disabledDate (value) {const today = new Date(); // 获取今天日期const d = today.getDay(); // 计算今天是周几。如果是周天，d=0let w = 0;if (d === 0) {w = 7;} else {w = d;}// let startTime = today.setDate(today.getDate() - w);// return value.getTime() < startTime; //不可选本周一以前的时间const endTime = today.setDate(today.getDate() + (7 - w));return value.getTime() > endTime; // 不可选本周日以后的时间}
},

2. 设置显示为‘xxxx年x月第x周（mm.dd - mm.dd)’和format有关，

 :format="thisweek + '（' + start2 + ' - ' + end2 + '）'"
@change="showDate1"

用@change绑定showDate1方法控制thisweek,start2,end2。

---

这里介绍一个轻量的处理时间和日期的 JavaScript 库：Day.js

中文文档：https://dayjs.gitee.io/zh-CN/

vue下安装和使用：在main.js下：

import dayjs from 'dayjs';
Vue.prototype.dayjs = dayjs;

直接调用dayjs() 将返回一个包含当前日期和时间的 Day.js 对象。
等同于 dayjs(new Date()) 的调用。
dayjs(e) 等同 dayjs(new Date(e))

subtract(1, 'day') 方法： 返回减去一定时间的复制的 Day.js 对象。减去1天，控件展示为周一的日期。

add(6, 'day')方法： 返回增加一定时间的复制的 Day.js 对象。加上6天，控件展示为周日的日期。

showDate1 (e) {const startTime = this.dayjs(e).subtract(1, 'day').$d;const endTime = this.dayjs(startTime).add(6, 'day').$d;this.start2 = this.splitDate2(startTime);this.end2 = this.splitDate2(endTime);this.weekValue1 = new Date()const y = this.weekValue1.getFullYear()const m = this.weekValue1.getMonth() + 1const d = this.weekValue1.getDate()this.lastweekday = new Date(this.dateToYYYYMMDD(this.weekValue1 - 7 * 24 * 60 * 60 * 1000)) // 所选周上周的日期this.lastweek = this.lastweekday.getFullYear() + '年' + (this.lastweekday.getMonth() + 1) + '月第' + this.getMonthWeek(this.lastweekday.getFullYear(), (this.lastweekday.getMonth() + 1), this.lastweekday.getDate()) + '周'if (this.weekValue1.getFullYear() === y && this.weekValue1.getMonth() + 1 === m && this.getMonthWeek(y, m, this.weekValue1.getDate()) === this.getMonthWeek(y, m, d)) {this.thisweek = '本周'} else {this.thisweek = y + '年' + m + '月第' + this.getMonthWeek(y, m, d) + '周'}
},
// 处理时间格式
splitDate2 (date) {return this.dayjs(date).format('MM.DD');
},
// 计算某日是第几周
getMonthWeek (a, b, c) {const date = new Date(a, parseInt(b) - 1, c)const day = date.getDay() || 7const d = date.getDate()return Math.ceil((d + 6 - day) / 7)
},

参考：https://blog.csdn.net/Sunshine__Girl/article/details/109269138