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 相关文章推荐
ie下动态加态js文件的方法
Sep 13 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 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中文转拼音的实现代码
2014/02/11 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
Vue面试题及Vue知识点整理
2018/10/07 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
pandas参数设置的实用小技巧
2020/08/23 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
shell的种类有哪些
2015/04/15 面试题
工业学校毕业生自荐信范文
2014/01/03 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
体育教师个人工作总结
2015/02/09 职场文书
公司开业主持词
2015/07/02 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis