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 相关文章推荐
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
Javascript模块化编程详解
Dec 01 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
jquery实现全屏滚动
Dec 28 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
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
php中cookie的作用域
2008/03/27 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
纯php生成随机密码
2015/10/30 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
javascript新手语法小结
2008/06/15 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python内置模块logging用法实例分析
2018/02/12 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
前台文员岗位职责
2013/12/28 职场文书
校园网站的创业计划书范文
2013/12/30 职场文书
奉献演讲稿范文
2014/05/21 职场文书
入股合作协议书
2014/10/12 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书