需要下moment包
<template><div><el-button type="primary" @click="getDailyAllocation()">自定义日历</el-button><el-dialog title="选择跳过日期" :visible.sync="dialogVisible" :close-on-click-modal="false" width="700px"><div class="date-list"><div class="date-items" v-for="(item) in week" :key="item">{{item}}</div><div class="date-item" v-for="(item,index) in timeData" :key="index" :class="item.flag ? 'on' : '' "><el-link @click="selectDay(item)" :underline="false" :disabled='array.includes(item.allocationDate)'><div v-if="item.allocationDate"><div>{{item.allocationDate}}</div></div></el-link></div></div><span slot="footer" class="dialog-footer"><div><el-button @click="dialogVisible = false">取 消</el-button><el-button @click="submit()">提 交</el-button></div></span></el-dialog></div>
</template><script>
import moment from 'moment'
export default {data () {return {time: [], // 用来高亮日期week: ['一', '二', '三', '四', '五', '六', '日'],array: [], // 补日历的数据dialogVisible: false,startDate: '2023-12-28', // 开始日期endDate: '2024-1-26', // 结束日期timeData: [] // 日历}},mounted () {this.generateDates()},methods: {// 根据开始日期和结束日期 生成日历数据generateDates () {const start = new Date(this.startDate);const end = new Date(this.endDate);const dates = [];while (start <= end) {const year = start.getFullYear();const month = String(start.getMonth() + 1).padStart(2, '0');const day = String(start.getDate()).padStart(2, '0');const shortDate = `${month}-${day}`;const weekDay = this.getWeekDay(start.getDay());dates.push({allocationDate: `${year}-${month}-${day}`,shortDate: shortDate,weekDay: weekDay,flag: false})start.setDate(start.getDate() + 1);}this.timeData = dates;},getWeekDay (dayIndex) {const daysOfWeek = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY']return daysOfWeek[dayIndex]},// 数据处理展示成日历async getDailyAllocation () {let startDate = moment(this.timeData[0].allocationDate)let endDate = nulllet week = moment(startDate).weekday()// week 为0 说明是周日if (week === 0) {week = 7}if (week > 1) {week = week - 1startDate = moment(startDate).subtract(week, 'days')endDate = moment(this.timeData[0].allocationDate)// 大于周一的数据都存储const arr = []// arr.push({ allocationDate: startDate.format('YYYY-MM-DD') })arr.push({ allocationDate: '' })while (startDate.add(1, 'days').isBefore(endDate)) {// 注意这里add方法处理后SDate对象已经改变。arr.push({ allocationDate: '' })}this.timeData = [...arr, ...this.timeData]// 拿到补的数据this.array = arr.map(item => item.allocationDate)}this.dialogVisible = true},// 选择日期async selectDay (item) {if (!this.timeData || !Array.isArray(this.timeData)) {console.error('timeData is not an array or undefined')return}if (!this.time || !Array.isArray(this.time)) {console.error('time is not an array or undefined')return}const tempSet = new Set(this.time)for (const item2 of this.timeData) {if (item.allocationDate === item2.allocationDate) {item.flag = !item.flag}if (item.flag) {tempSet.add(item.allocationDate)} else {tempSet.delete(item.allocationDate)}}this.time = Array.from(tempSet)},// 提交submit () {// 数据排列console.log(this.time.sort((item1, item2) => new Date(item1) - new Date(item2)))}}
}
</script><style lang="less" scoped>
.date-list {width: 100%;display: flex;align-items: center;flex-wrap: wrap;.date-item,.date-items {width: calc(100% / 7);text-align: center;}.date-items {line-height: 40px;height: 40px;background: #f5f7fa;}.date-item {height: 60px;cursor: pointer;border: 1px solid #e4e7ed;box-sizing: border-box;.el-link {width: 100%;height: 100%;}}
}
.on {background: #409eff;.el-link.el-link--default {color: #ffff;}
}
</style>