雄县做网站的免费刷赞网站推广免费
该组件选择周的时候,默认显示‘xxxx年第x周’,但在需求要显示为‘xxxx年x月第x周(mm.dd - mm.dd)’或者‘本周(mm.dd - mm.dd)’,最终效果为

首先需要修改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; // 不可选本周日以后的时间}
},
设置显示为‘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