element-ui周选择器，如何获取年、周、起止日期？

2024/10/24 11:22:52 来源：https://blog.csdn.net/yan1915766026/article/details/141016899 浏览: 次关键词：element-ui周选择器，如何获取年、周、起止日期？

说明

版本：vue2、element-ui@2.15.14
element-ui的日期选择器可以设为周，即type=week，官方示例如下：
在这里插入图片描述
如果你什么都不操作，那么获取的周的值为：

value1: Tue Aug 06 2024 00:00:00 GMT+0800 (中国标准时间)

如果给周选择器设置value-format，那么用weekValue值进行计算的时候，大概率会报错！
那么，怎能能同时获取所选周的年份、第几周、周的起止日期呢？

实现步骤

效果图：

在这里插入图片描述

代码：

 <el-date-pickerv-model="weekValue"type="week"format="yyyy 第 WW 周"placeholder="选择周":picker-options="weekOptions"style="width: 100%;"@change="changeWeek"
>
</el-date-picker>
export default {data() {return {weekValue: null,weekOptions: {firstDayOfWeek: 1,}}}methods: {changeWeek(val) {const year = val.getFullYear();const firstDayOfYear = new Date(year, 0, 1);const pastDaysOfYear = Math.floor((val - firstDayOfYear) / (24 * 60 * 60 * 1000));const week = Math.ceil((pastDaysOfYear + firstDayOfYear.getDay()) / 7);let startTime = new Date(val.getTime()); //开始时间let endTime = new Date(val.getTime() + (24 * 60 * 60 * 1000) * 6); //结束时间let timeArr = [startTime.toISOString().slice(0, 10), endTime.toISOString().slice(0, 10)];console.log('周的起止日期', timeArr)console.log('year', year)console.log('week', week)}}
}

简单解析

步骤一：给周的picker-options属性的firstDayOfWeek设置1，即默认周的第一天是周一，element-ui的默认值为7，即周日；这样你就能根据所选值计算出周的起止日期了，改变选择时周的val值就是周一，加+就是所选的周日了。
步骤二：计算年份：val.getFullYear()
步骤三：根据年份计算是第几周，最后自己赋值给响应的变量即可！