HTML原生日期插件增加周次显示

<div id="app" class="box box-info" style="border-top-color:white;">
    <!-- // 日期部分 -->
    <div class="date-picker-container" style="position: relative; max-width: 200px;">
        <!-- 日期输入框 -->
        <div class="el-input">
            <input type="text" class="el-input__inner" style="cursor: pointer;" id="dateInput" readonly placeholder="选择日期">
        </div>
        <!-- 自定义日历面板 -->
        <div class="custom-calendar" style="position: absolute;background: #fff;border: 1px solid #ebeef5;border-radius: 4px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);padding: 10px;width: 100%;margin-top: 8px;display: none;" id="calendarPanel">
            <div class="calendar-header" style="display: flex;justify-content: space-between;align-items: center;padding: 8px 12px;border-bottom: 1px solid #ebeef5;">
                <span @click="prevMonth" class="el-icon-arrow-left"></span>
                <div id="currentMonth"></div>
                <span @click="nextMonth" class="el-icon-arrow-right"></span>
            </div>
            <div class="calendar-body" style="padding: 8px;" id="calendarBody"></div>
        </div>
    </div>
    <!-- // 日期部分 -->
 
</div>

<!-- // 日期部分 -->
<script src="{
   { \Illuminate\Support\Facades\URL::asset('js/date_week/date_week.js') }}"></script>
<script src="{
   { \Illuminate\Support\Facades\URL::asset('js/date_week/date_year.js') }}"></script>
<script>
    dayjs.extend(dayjs_plugin_weekOfYear);
    var Main = {
   
        delimiters:['${', '}'],
        data() {
   
            return {
   
                loading           : false,
                // 日期部分
                currentDate       : dayjs(),
                selectedDate      : null,
                calendarVisible   : false,
                week : [
                    '周一', '周二','周三', '周四','周五', '周六', '周日'
                ],
                // 日期部分
            }
        },
        methods: {
   
            // 日期部分
            bindEvents() {
   
                // 点击输入框显示日历
                document.getElementById('dateInput').addEventListener('click', () => {
   
                    this.calendarVisible = !this.calendarVisible;
                    this.$nextTick(() => {
   
                        this.renderCalendar();
                    });
                });
            },

            // 渲染日历
            renderCalendar() {
   
                const calendarBody = document.getElementById('calendarBody');
                const currentMonth = document.getElementById('currentMonth');
                currentMonth.textContent = this.currentDate.format('YYYY年MM月');
                let s_month = this.currentDate.format('MM');
                calendarBody.innerHTML = '';

                // 获取当月信息
                const firstDay = this.currentDate.startOf('month');
                const lastDay = this.currentDate.endOf('month');
                const firstWeekDay = firstDay.day(); // 0=周日, 6=周六

                // 计算前后月份天数
                const prevDays = firstWeekDay === 0 ? 6 : firstWeekDay - 1;
                const nextDays = 42 - (lastDay.date() + prevDays);
                let day = 1;
                let weekNum = firstDay.week() - 1;
                let oo = 0
                // 展示周几
                const firstRow  = document.createElement('div');
                firstRow.style  = 'display: grid;grid-template-columns: 40px repeat(7, 1fr);gap: 4px;margin-bottom: 4px;padding: 4px;border-radius: 4px;';
                for (let h = 0; h < 8; h++) {
   
                    if (h == 0) {
   
                        const firstCell = document.createElement('div');
                        firstCell.style = 'font-size: 12px;color: #606266;display: flex;justify-content: center;align-items: center;';
                        firstCell.textContent = '';
                        firstRow.appendChild(firstCell);
                    }else{
   
                        const firstCell = document.createElement('div');
                        firstCell.style = 'font-size: 12px;color: #606266;display: flex;justify-content: center;align-items: center;';
                        firstCell.textContent = this.week[h-1];
                        firstRow.appendChild(firstCell);
                    }
                }
                calendarBody.appendChild(firstRow);
                // 展示周几

                for (let i = 0; i < 6; i++) {
   
                    const weekRow = document.createElement('div');
                    weekRow.style = 'display: grid;grid-template-columns: 40px repeat(7, 1fr);gap: 4px;margin-bottom: 4px;padding: 4px;border-radius: 4px;';

                    // 周数单元格
                    const weekCell = document.createElement('div');
                    weekCell.style = 'font-size: 12px;color: #606266;display: flex;justify-content: center;align-items: center;';
                    weekCell.textContent = `第${
     weekNum}周`;
                    weekRow.appendChild(weekCell);

                    for (let j = 0; j < 7; j++) {
   
                        const dateCell = document.createElement('div');
                        dateCell.style = 'height: 32px;display: flex;justify-content: center;align-items: center;font-size: 12px;color: #303133;border-radius: 4px;cursor: pointer;';

                        // 前一个月
                        if (i === 0 && j < prevDays) {
   
                            const prevDate = firstDay.subtract(1, 'month').date(firstDay.subtract(1, 'month').endOf('month').date() - (prevDays - j - 1));
                            const dated    = prevDate.$d;
                            const date     = new Date(dated);
                            const s_date   = date.getDate();
                            dateCell.textContent = s_date;
                            dateCell.style = 'height: 32px;display: flex;justify-content: center;align-items: center;font-size: 12px;color: #303133;border-radius: 4px;cursor: pointer;color: #c0c4cc;cursor: not-allowed;';
                        }
                        // 后一个月
                        else if (day > lastDay.date()) {
   
                            const nextDate = day - lastDay.date() + oo;
                            dateCell.textContent = nextDate;
                            dateCell.style = 'height: 32px;display: flex;justify-content: center;align-items: center;font-size: 12px;color: #303133;border-radius: 4px;cursor: pointer;color: #c0c4cc;cursor: not-allowed;';
                            oo++
                        }
                        // 当月