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 相关文章推荐
列表内容的选择
Jun 30 Javascript
JS 自动安装exe程序
Nov 30 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
详细分析Node.js 多进程
Jun 22 Javascript
Vue多选列表组件深入详解
Mar 02 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
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
php远程下载类分享
2016/04/13 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
python实现文件的备份流程详解
2019/06/18 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
传媒专业推荐信范文
2013/11/23 职场文书
社会发展项目建议书
2014/08/25 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
部队2014年终工作总结
2014/11/27 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
2015年药店工作总结
2015/04/20 职场文书
2015年材料员工作总结
2015/04/30 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python