首先，我们来看下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年正好跨年的那一周）：
- 当选择周，点击的时间是12月份时，则把时间范围改为2020-12-28 - 2020-12-31；
- 当选择周，点击的时间是下一年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>处理完之后的效果图：
这样我们就对官方组件对应的业务需求，做了相关的改造，有什么意见、问题可以在评论区提出来。小编不易，多点赞、关注哈~