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 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 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 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
jQuery创建插件的代码分析
2011/04/14 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
Python导入模块时遇到的错误分析
2017/08/30 Python
Python切片工具pillow用法示例
2018/03/30 Python
Python随机函数random()使用方法小结
2018/04/29 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
学生个人自我鉴定范文
2014/03/28 职场文书
企业宣传策划方案
2014/05/29 职场文书
机械专业求职信范文
2014/07/15 职场文书
销售目标责任书
2014/07/23 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python