Element-ui DatePicker显示周数的方法示例


Posted in Javascript onJuly 19, 2019

1.场景描述

我们公司是做电商的,运营的工作指标都是按周来定的,所以他们对周特别敏感,希望我们能在日期选择器上显示周数。刚接到这个需求时,心中很不乐意,因为Element-ui的日期选择器根本不支持显示周数。我只能看看源码来看看能否有解决的办法

具体代码大家可以在github中看到https://github.com/ElemeFE/element/pull/16415/commits/2b810cf73d1127645054265469bbb353d036cb21

2.查看源码

我们很轻松就能找到DatePicker相关的代码,在packages > date-picker 整个目录都是date-picker的代码,在date-picker > src > basic > date-table.vue中就是显示日期的代码,在这里竟然发现了一个属性showWeekNumber,在date-table.vue的第83行。

showWeekNumber: {
  type: Boolean,
  default: false
 },

为了验证这个参数对我们是否有帮助,我们把showWeekNumber默认设置为true试试,然后把第11行的

<th v-if="showWeekNumber">{{ t('el.datepicker.week') }}</th>

改为

<th v-if="showWeekNumber">周数</th>

设置用来设置国际化的,国际化文件中没有这个对应的翻译,我们暂时先这么写,不然会报错。当我们完成这个之后神奇的事情发生了

Element-ui DatePicker显示周数的方法示例

周数展示出来了,而且好像展示的事正确的,7.1-7.6就是2019年的第27周。既然能够展示周数,那么为什么element不开放出来这个参数了,是否是有什么问题呢。我们自己来简单的测试下

3. 发现并解决问题

Element-ui DatePicker显示周数的方法示例

Element-ui DatePicker显示周数的方法示例

Element-ui DatePicker显示周数的方法示例

问题

(1)切换月时,周数并不会发生变化

(2)选中的是29周,输入框中确展示的是28周

(3)hover选中时,周数不应该展示高亮的样式

(4)日期区间选中的样式也不正确

解决问题

(1)解决周数不变化的问题,我们找到date-table.vue中第149行到152行

if (this.showWeekNumber) {
 if (!row[0]) {
  row[0] = { type: 'week', text: getWeekNumber(nextDate(startDate, i * 7 + 1)) };
 }
}

当showWeekNumber为true时,row[0]就是用来展示周数的,当row[0],存在时,就不在去获取新的值,显然不正确,我们把if判断去掉就行,这样就会更新周数

(2)解决选中后周数展示不正确的问题,我们找到date-table.vue中第14行到18行

<tr
 class="el-date-table__row"
 v-for="(row, key) in rows"
 :class="{ current: isWeekActive(row[1]) }"
 :key="key">

isWeekActive就是用来获得当前展示的周数的,当展示周数之后我们要做适当的修改

<tr
 class="el-date-table__row"
 v-for="(row, key) in rows"
 :class="{ current: isWeekActive(row[showWeekNumber ? 2 : 1]) }"
 :key="key">

至于第三个问题和第三个问题都是样式的问题,我们修改下date-table对应的样式即可

最后看下展示效果

Element-ui DatePicker显示周数的方法示例

Element-ui DatePicker显示周数的方法示例

Element-ui DatePicker显示周数的方法示例

Element-ui DatePicker显示周数的方法示例

4. 最后

我已经向element-ui提了pr,但是还没有merge,具体的代码大家可以在github中看到https://github.com/ElemeFE/element/pull/16415/commits/2b810cf73d1127645054265469bbb353d036cb21,解决了国际化的问题和增加了参数展示周数

5. 问题

代码是已经改好了,但是我们引入饿了么的代码是直接通过npm下载的,线上环境也是npm下载的,我们是无法来更改npm的代码的。那么我们怎么来解决这个问题呢,请看我的下一篇文章,我最近会更新。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
js的对象与函数详解
Jan 21 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 #Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 #Javascript
bootstrap table插件动态加载表头
Jul 19 #Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 #Javascript
VueJS 取得 URL 参数值的方法
Jul 19 #Javascript
vue自定义表单生成器form-create使用详解
Jul 19 #Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 #Javascript
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
ADODB类使用
2006/11/25 PHP
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
JavaScript中Math对象使用说明
2008/01/16 Javascript
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
python对于requests的封装方法详解
2019/01/03 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
python 爬取小说并下载的示例
2020/12/07 Python
仓库管理员岗位职责
2014/03/19 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
环保倡议书400字
2014/05/15 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
离婚协议书范文2014
2014/10/16 职场文书
先进个人申报材料
2014/12/30 职场文书
教学反思怎么写
2016/02/24 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers