vue使用element中的el-date-picker实现每月的第几周

最近写的项目里面有一个功能是实现选择周的（如图 1），第一反应是使用element里面的el-date-picker组件，但是有一个问题，就是el-date-picker的周选择组件是一整年的第几周(如图 2)，而不是每个月的第几周，然后就去查了一下，发现element里面也没有实现选择每个月的第几周的，那么只能自己改了。

图 1：

图 2

首先我们要把el-date-picker里面显示改为图1所示的样子
结构有了就要实现功能了，简单点想就是点击选择日期的时候根据选中的日期来判断是这个月的第几周，然后修改选择框的内容。
加上默认显示值，需要获取当天的年月日以及对应月的第几周来实现

实现如下代码所示：

<template><div class="test-box"><span>每周</span><el-date-picker:clearable="false"v-model="queryParam.value":format="'yyyy-MM 第' + queryParam.week + '周'"@change="weekChange"value-format="yyyy-M-d"class="inp"size="medium"type="week"placeholder="请选择":picker-options="{'firstDayOfWeek': 1}"></el-date-picker></div>
</template><script>
export default {data() {return {queryParam: {value: '',week: ''}};},created() {this.getDay();},methods: {// 初始化日期getDay() {var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate();if (month < 10) {month = '0' + month;}if (day < 10) {day = '0' + day;}let nowDay = year + '-' + month + '-' + day;this.queryParam.week = this.getWeekInMonth(new Date(nowDay));this.queryParam.value = year + '-' + month + '-' + day;},weekChange(val) {if (val) {let arr = val.split('-');this.queryParam.week = this.getWeekInMonth(new Date(val));}},// 根据日期判断是月的第几周getWeekInMonth(t) {if (t == undefined || t == '' || t == null) {t = new Date();} else {var _t = new Date();_t.setYear(t.getFullYear());_t.setMonth(t.getMonth());_t.setDate(t.getDate());var date = _t.getDate(); //给定的日期是几号_t.setDate(1);var d = _t.getDay(); //1. 得到当前的1号是星期几。var fisrtWeekend = d;if (d == 0) {fisrtWeekend = 1;//1号就是星期天} else {fisrtWeekend = 7 - d + 1; //第一周的周未是几号}if (date <= fisrtWeekend) {return 1;} else {return 1 + Math.ceil((date - fisrtWeekend) / 7);}}}}
};
</script><style lang="less" scoped="scoped">
.test-box {background: #ffffff;height: 31.25rem;padding: 1.875rem 0 0 1.875rem;.inp {margin: 0 0 0 0.625rem;}
}
</style>

最终效果如下图所示：

好了，今天就分享到这里，我们下次见，see you…

vue使用element中的el-date-picker实现每月的第几周相关推荐

vue.js + element中el-select实现拼音匹配，分词、缩写、多音字匹配能力
1.既然要用到拼音搜索,我们就需要一个拼音库,在这里我推荐一个第三方包:https://github.com/xmflswood/pinyin-match,在这里首先对这个包的开发者表示万分的感谢. ...
vue自定义插件封装一个类似 element 中 message 消息提示框的插件
vue自定义插件封装一个类似 element 中 message 消息提示框的插件一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
Vue：Vue的element组件中的el-row的属性gutter什么意思？
Vue:Vue的element组件中的el-row的属性gutter什么意思? 资源 gutter elementui中gutter和offset的区别
element中根据条件判断按钮是否禁用_从零动手封装一个通用的vue按钮组件
我们在使用目前最主流的前端框架vue在开发过程中,组件是一个非常重要的组成部分,可以这么说,所有的vue应用,都是由一个一个的小组件拼装而成的. 正是由于vue组件如此重要,所以vue的生态中,也非常 ...
Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
渣渣枫初识Vue与Element
渣渣初学Vue与Element 一.Vue 1.初识Vue 2.Vue的入门 3.Vue入门升级 4.小结二.Vue常用指令 1.常用指令 2.文本插值 3.绑定属性 4.条件渲染 5.列表渲染 6 ...
Vue和Element
1.Vue 快速入门 1.1.Vue的介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的API来实现响应数据的绑 ...
JAVA—— Vue和Element
文章目录 1.Vue 快速入门 1.1.Vue的介绍 1.2.Vue的快速入门 1.3.Vue快速入门详解 1.4.Vue快速入门的升级 1.5.Vue小结 2.Vue 常用指令 2.1.指令介绍 2 ...
Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...

vue使用element中的el-date-picker实现每月的第几周

vue使用element中的el-date-picker实现每月的第几周

vue使用element中的el-date-picker实现每月的第几周相关推荐

最新文章

热门文章