时间管理进阶：Element UI日期选择器周起始轻松定制！

Z_Y
1,318 阅读2分钟

前段时间写项目时，用到Element UI日期选择器el-date-picker，之前经常使用都是选择日，或者年月日时分秒这样子，这次用的周期的设置，看原文档默认周期起止是周日-周六，只是简单例子，我的需求周期的起止日期是周五到周四，下面是我具体实现过程。

日期选择器

参考Element官网：element.eleme.cn/#/zh-CN/com…

<el-date-picker 
    v-model="startWeek"
    type="week"
    :format="param.format"
    placeholder="请选择开始周"
    :picker-options="{firstDayOfWeek: 5}">
</el-date-picker>
image.png image.png

左图是默认周的起止范围，右图是通过设置picker-options -->firstDayOfWeek来更改起始时间的，可设置1 到 7，默认是7，如图官方文档：

image.png

以上周期的起止展示就设置好了

如何设置默认展示当前第几周

开始我传入的是当前时间new Date()，选中后展示是不一样的，因为周期的计算范围变了，如图：

image.png image.png

当时查了很多文档，最后我选用了moment.js来计算，大家也可以用别的方式，我这个仅做参考 moment.js官网:moment.nodejs.cn/

moment.js安装使用，我用的npm(其它方式可直接查看官网)

npm install moment --save
import moment from 'moment';

1、首先使用moment.updateLocale设置时区开始日（0-6 / 日-六） moment.updateLocale(moment.locale(), { week: { dow: 5 } });

2、获取当前周的开始时间
moment().startOf('week').toString()

3、如果想获取第几周的开始日期，如下：（我获取的前七周，所以7*7） moment().weekday(-49).format('YYYY-MM-DD')

以上就设置好了默认显示的周期

在日历上选择好需要的周期提交

此时获取到的时间格式为：

image.png

需要进行转化成后端需要的格式，例：年-周（2023-24）
moment(选择后的时间).utcOffset(480).format('yyyy-WW')

以上为我本次使用日期周选择的记录，如有问题欢迎大家留言指正。如对大家有帮助，可以点赞收藏噢~感谢阅读！

avatar
文章
阅读
粉丝