Ant Design Vue 周选择控件，自定义开发(适合国内项目)

首先，我们来看下antd-vue的官方日期控件，

<template>
	<a-week-picker placeholder="Select week" @change="onChange" />
</template>	
<script>
  export default { 
    methods: { 
      onChange(date, dateString) { 
        console.log(date, dateString); 
      }, 
    }, 
  }; 
</script>

以下是效果图

现在项目中的需求有以下几点：

1、选择周，且一周从周一到周日为一个跨度；

2、选择一周后，输入框内显示时间范围（一周）；例如“2021-07-05 - 2021-07-11”；

3、当选择周正好是跨年的时候，如果当前点击的是2020-12-28，按理说这一周是从2020-12-28至2021-01-03，这里有跨年，业务需要是，一年的第一周从一月一日开始算，所以这里做如下操作（例 2020年-2021年正好跨年的那一周）：

1. 当选择周，点击的时间是12月份时，则把时间范围改为2020-12-28 - 2020-12-31；
2. 当选择周，点击的时间是下一年1月份时，则把时间范围改为2021-01-01 - 2021-01-03；

具体实现代码如下：

// main.js 项目全局引入文件里  对moment的自定义参数设置
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn', {
  weekday: {dow: 1, doy: 1},
  week: {dow: 1, doy: 1},
  defaultLocaleWeek: {dow: 1, doy: 1}
});

//untils.js
import moment from 'moment';
// 周选择组件-跨年处理
export function setWeekDate(weekDate) {
  // debugger;
  const formatValue = 'YYYY-MM-DD'
  // 当前月份
  const nowDate_month = new Date(weekDate).getMonth() + 1
  const date_first = moment(weekDate).startOf('month')
  const date_last = moment(weekDate).endOf('month')
  const start_date = new Date(moment(weekDate).weekday(0)).getDate()
  const end_date = new Date(moment(weekDate).weekday(6)).getDate()
  let startTime = ""
  let endTime = ""
  if (end_date < 7 && nowDate_month == 1) {
    startTime = moment(date_first).format(formatValue)
    endTime =  moment(weekDate).weekday(6).format(formatValue)
  } else if(end_date < 7 && nowDate_month == 12) {
    startTime = moment(weekDate).weekday(0).format(formatValue)
    endTime = moment(date_last).format(formatValue)
  } else {
    startTime = moment(weekDate).weekday(0).format(formatValue)
    endTime =  moment(weekDate).weekday(6).format(formatValue)
  }
  return {startTime, endTime}
}

// demo.vue
<template>
  	<a-week-picker style="width: 220px;" placeholder="请选择周" :allowClear="false" :value="weekData" :format="weekformat" @change="onChange" />
 </template>
<script> 
import { setWeekDate } from './utils/formatData'
export default {
  data() {
  	return {
      	weekData: moment(new Date()),
        startTime: "",
        endTime: "",
        weekformat: "",
    }
	},
  methods: {
    onChange(weekData) {
       this.weekData = weekData
       let date = setWeekDate(weekData)
       this.startTime = date.startTime
       this.endTime = date.endTime
       this.weekformat = `${this.startTime} - ${this.endTime}`
     },
  }
}
 </script>

处理完之后的效果图：

这样我们就对官方组件对应的业务需求，做了相关的改造，有什么意见、问题可以在评论区提出来。小编不易，多点赞、关注哈~