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()
- 步骤三：根据年份计算是第几周，最后自己赋值给响应的变量即可！
最后
小编是前端开发者，目前正在持续更新《若依nodejs全栈》系列，请大家多多关注。