关于日期获取 - 周视图、月视图(自定义日期获取元素日历组件的周视图)
最编程
2024-05-08 07:41:31
...
element 日历组件可能需要用到的自定义日期;
小问题:展示指定日期的周视图;
插件使用 moment
思路1:
1.取到当前日期是这一年的第几周;2.拿到获取指定年份指定周的起止日期;
这部分思路已实现之后,发现还有另外的思路; 实现方法:getWeekNumber,getWeekStartAndEnd
思路2:
moment可以直接取指定日期的startOf, 参数为isoWeek , 意思是返回每周周一的日期,如此,加 + 7 则可以得到周视图;实现方法:getWeekDays
思路3:
是思路2的另版,省略了+7的计算,利用moment.endOf; 实现方法:getStartAndEndOfWeek
最后记录一下月视图的实现
<template>
<div>
<el-calendar
v-model="defaultDate"
:range="selectedDate"
/>
</div>
</template>
<script>
import moment from 'moment'
export default {
data() {
const targetDate = '2024-5-1'
const rang = this.getStartAndEndOfWeek(targetDate)
return {
selectedDate: [rang.start, rang.end], // 当前日期范围为本周
today: new Date(), // 今天的日期
defaultDate: targetDate // 默认选中今天的日期
}
},
created() {
const targetDate = '2024-5-1'
const targetYear = moment(targetDate).year()
const weekNumber = this.getWeekNumber(targetDate)
const rang = this.getWeekStartAndEnd(targetYear, weekNumber)
const rang2 = this.getStartAndEndOfWeek(targetDate)
console.log(targetDate, '是', targetYear, '年')
console.log(targetDate, '是第', weekNumber, '周')
console.log(targetDate, '起止周是', rang.start, rang.end)
console.log(targetDate, '起止周是', rang2)
},
methods: {
// 获取指定日期在指定年份的第几周
getWeekNumber(date) {
// 确保日期是按 ISO 周标准解析(周一作为周的开始)
return moment(date).isoWeek()
},
// 周视图-思路1
// 获取指定年份指定周的起始时间和结束时间
getWeekStartAndEnd(year, weekNumber) {
// 设置年份和周数
const startOfWeek = moment().year(year).week(weekNumber).startOf('isoWeek')
// ISO 标准中,周的开始为周一
const endOfWeek = moment(startOfWeek).endOf('isoWeek')
// 格式化日期以便更易于阅读
const format = 'YYYY-MM-DD'
return {
start: startOfWeek.format(format),
end: endOfWeek.format(format)
}
},
// 周视图-思路3
getStartAndEndOfWeek(date) {
// 设置为该周的开始,ISO 标准中周一为一周的开始
const startOfWeek = moment(date).startOf('isoWeek')
// 设置为该周的结束,ISO 标准中周日为一周的结束
const endOfWeek = moment(date).endOf('isoWeek')
// 格式化日期以便更易于阅读
const format = 'YYYY-MM-DD'
return {
start: startOfWeek.format(format),
end: endOfWeek.format(format)
}
},
// 周视图-思路2
getWeekDays(date) {
const days = []
// 设置为该周的开始,ISO 标准中周一为一周的开始
const current = moment(date).startOf('isoWeek')
// 循环添加一周的每一天
for (let i = 0; i < 7; i++) {
days.push(current.format('YYYY-MM-DD'))
current.add(1, 'days') // 增加一天
}
return days
},
// 完整的月视图
getFullCalendarMonth(year, month) {
// 设定月份的第一天和最后一天
const startOfMonth = moment([year, month]).startOf('month')
const endOfMonth = moment([year, month]).endOf('month')
// 找到月初所在周的周一和月末所在周的周日
const startOfCalendar = startOfMonth.startOf('isoWeek')
const endOfCalendar = endOfMonth.endOf('isoWeek')
// 遍历并收集所有日期
const days = []
const current = startOfCalendar.clone() // 使用 clone() 避免修改原始日期
while (current.isSameOrBefore(endOfCalendar)) {
days.push(current.format('YYYY-MM-DD'))
current.add(1, 'days')
}
return days
}
}
}
</script>