按周的日期下拉组件

效果图

代码：

// 下拉列表的数组，并预先存入当前周信息
let arr = ref([])
if (nowMonth > 9) {
if (nowDay > 9) {
arr.value = [
{
label: ${nowYear}年${nowMonth}月第${Week}周,
value: ${nowYear}${nowMonth}${Week},
date: ${nowYear}${nowMonth}${mondayDay},
nextWeekYear: ${initialNextWeekYear},
nextWeekMonth: ${initialNextWeekMonth},
nextWeek: ${initialNextWeek},
nextDay: ${initialNextDay},
},
]
} else {
arr.value = [
{
label: ${nowYear}年${nowMonth}月第${Week}周,
value: ${nowYear}${nowMonth}${Week},
date: ${nowYear}${nowMonth}0${mondayDay},
nextWeekYear: ${initialNextWeekYear},
nextWeekMonth: ${initialNextWeekMonth},
nextWeek: ${initialNextWeek},
nextDay: ${initialNextDay},
},
]
}
} else {
if (nowDay > 9) {
arr.value = [
{
label: ${nowYear}年${nowMonth}月第${Week}周,
value: ${nowYear}0${nowMonth}${Week},
date: ${nowYear}0${nowMonth}${mondayDay},
nextWeekYear: ${initialNextWeekYear},
nextWeekMonth: ${initialNextWeekMonth},
nextWeek: ${initialNextWeek},
nextDay: ${initialNextDay},
},
]
} else {
arr.value = [
{
label: ${nowYear}年${nowMonth}月第${Week}周,
value: ${nowYear}0${nowMonth}${Week},
date: ${nowYear}0${nowMonth}0${mondayDay},
nextWeekYear: ${initialNextWeekYear},
nextWeekMonth: ${initialNextWeekMonth},
nextWeek: ${initialNextWeek},
nextDay: ${initialNextDay},
},
]
}
}

for (let i = 0; i < 27; i++) {
let nextWeekYear // 下一周的年份
let nextWeekMonth // 下一周的月份
let nextWeek // 下一周的周期数
let nextDay // 下周一的号数
// 从上一周中取出这一周的数据
let thisYear = arr.value[arr.value.length - 1].nextWeekYear
let thisMonth = arr.value[arr.value.length - 1].nextWeekMonth
let thisWeek = arr.value[arr.value.length - 1].nextWeek
let thisDay = arr.value[arr.value.length - 1].nextDay
// let lastWeek = arr.value[arr.value.length - 1].value.substring(6, 7) // 上周是第几周
// let lastYear = arr.value[arr.value.length - 1].date.substring(0, 4) // 上周一年份
// let lastMonth = arr.value[arr.value.length - 1].date.substring(4, 6) // 上周一月份
// let lastDay = arr.value[arr.value.length - 1].date.substring(6, 8) // 上周一日期
const maxDay = new Date(parseInt(thisYear), thisMonth, 0).getDate() //上周月的天数
let whetherNewMonth = parseInt(thisDay) + 7 > maxDay // 当前周是否会跨月
if (whetherNewMonth) {
// 跨月
let whetherNewYear = parseInt(thisMonth) + 1 > 12 // 跨月后是否会跨年
if (whetherNewYear) {
// 跨年
nextWeekYear = parseInt(thisYear) + 1
nextWeekMonth = ‘01’
nextWeek = ‘1’
nextDay = ‘0’ + (parseInt(thisDay) + 7 - maxDay)
} else {
//不跨年
nextWeekYear = thisYear
nextWeekMonth =
parseInt(thisMonth) + 1 > 9
? parseInt(thisMonth) + 1
: ‘0’ + (parseInt(thisMonth) + 1)
nextWeek = ‘1’
nextDay = ‘0’ + (parseInt(thisDay) + 7 - maxDay)
}
} else {
// 不跨月
nextWeekYear = thisYear
nextWeekMonth = thisMonth
nextWeek = parseInt(thisWeek) + 1
nextDay =
parseInt(thisDay) + 7 > 9
? parseInt(thisDay) + 7
: ‘0’ + parseInt(thisDay) + 7
}

arr.value.push({
  label: `${thisYear}年${parseInt(thisMonth)}月第${thisWeek}周`,
  value: `${thisYear}${thisMonth}${thisWeek}`,
  date: `${thisYear}${thisMonth}${thisDay}`,
  nextWeekYear: nextWeekYear,
  nextWeekMonth: nextWeekMonth,
  nextWeek: nextWeek,
  nextDay: nextDay,
})
1
2
3
4
5
6
7
8
9

}

// 当前周所对应的七天日期数组
const sevenDay = (value) => {
// 传入组件选中的value
const date =
arr.value[
arr.value.findIndex((item) => item.value == value)
].date.toString()
let year = date.substring(0, 4)
let month = date.substring(4, 6)
let day = date.substring(6, 8)
// f分别传入当前周第一天的年月日
let oneWeek
const maxDay = new Date(year, month, 0).getDate() //获取当前月的天数
for (let i = 0; i < 7; i++) {
if (parseInt(day) + i > maxDay) {
// 跨月
let newMonth = parseInt(month) + 1
if (newMonth > 12) {
// 跨年
let newYear = parseInt(year) + 1
oneWeek.push(${newYear}010${parseInt(day) + i - maxDay})
} else if (newMonth > 9) {
// 跨月后月份为两位数
oneWeek.push(${year}${newMonth}0${parseInt(day) + i - maxDay})
} else {
// 跨越后月份为一位数
oneWeek.push(${year}0${newMonth}0${parseInt(day) + i - maxDay})
}
} else {
// 不跨月
if (month > 9) {
if (parseInt(day) + i > 9) {
//当前天的号数大于九
oneWeek.push(${year}${month}${parseInt(day) + i})
} else {
// 当前天的号数不大于九
oneWeek.push(${year}${month}0${parseInt(day) + i})
}
} else {
if (parseInt(day) + i > 9) {
oneWeek.push(${year}0${month}${parseInt(day) + i})
} else {
oneWeek.push(${year}0${month}0${parseInt(day) + i})
}
}
}
}
return oneWeek
}
const emit = defineEmits([‘selectWeek’])
const value = ref()
const changeWeek = (value) => {
emit(‘selectWeek’, { value: value.value, oneWeek: sevenDay(value) })
}
// 使用的时候可以把sevenDay函数放在父组件里，根据需要给一周每天的数据绑定所需要的属性

// sevenDay 为使用方法，当选中某周后，计算出相对应七天的date,格式为YYYYMMDD