说明
版本: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全栈》系列,请大家多多关注。