element el-date-picker日期选择器转年周(或年周周)并显示年周(或年周周)

效果图

• 选时间界面

  
  

• 回填展示

  
  
  
  

  1.转换

/*
    a = d = 当前日期
    b = 6 - w = 当前周的还有几天过完(不算今天)
    a + b 的和在除以7 就是当天是当前月份的第几周
*/
export function getYearWeek (date, dayFlag) {
    if (!date) return ''
    /*
        date1是当前日期
        date2是当年第一天
        d是当前日期是今年第多少天
        用d + 当前年的第一天的周差距的和在除以7就是本年第几周
    */
    const today = new Date(date); // 获取当前时间
    const year = today.getFullYear();
    const a = today.getYear();
    const b = today.getMonth() + 1;
    const c = today.getDate();
    const day = today.getDay();
    const date1 = new Date(a, parseInt(b) - 1, c)
    const date2 = new Date(a, 0, 1)
    const d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
    const week = Math.ceil(
        (d + ((date2.getDay() + 1) - 1)) / 7
    );
    const text = year + '' + (week < 10 ? '0' + week : week)
    return dayFlag ? text + '' + day : text
}

2. 使用

<!-- 年周  -->
<el-date-picker
    v-model="searchForm.structureWeek" type="week"
    :placeholder="$t('page.structureWeek')"
    :format="`${structureWeek}`"></el-date-picker>
<!-- 年周周  -->
<el-date-picker
    v-model="searchForm.factoryCompleteDate" type="date"
    :placeholder="$t('page.factoryCompete')"
    :format="`${factoryCompleteDate}`"></el-date-picker>

computed: {
    structureWeek () { // 年周
        return getYearWeek(this.searchForm.structureWeek)
    },
    factoryCompleteDate () { // 年周周
        return getYearWeek(this.searchForm.factoryCompleteDate, 'week')
    }
}