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

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>

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

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

3. 发现并解决问题

问题

(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对应的样式即可

最后看下展示效果

4. 最后

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

5. 问题

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

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

(0)

相关推荐

  • element-ui 限制日期选择的方法(datepicker)

    Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI . 需求场景如下: 指定起止日期,后选的将会受到先选的限制 不同的日期选择器,不过也存在关联关系 实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDate 即可. 查看Demo Template <script src="//unpkg.com/vue/dist/vue.js"></scri

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

    1.场景描述 我们公司是做电商的,运营的工作指标都是按周来定的,所以他们对周特别敏感,希望我们能在日期选择器上显示周数.刚接到这个需求时,心中很不乐意,因为Element-ui的日期选择器根本不支持显示周数.我只能看看源码来看看能否有解决的办法 具体代码大家可以在github中看到https://github.com/ElemeFE/element/pull/16415/commits/2b810cf73d1127645054265469bbb353d036cb21 2.查看源码 我们很轻松就能

  • JS获取月份最后天数、最大天数与某日周数的方法

    本文实例讲述了JS获取月份最后天数.最大天数与某日周数的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>标题页</title> <script language="javascript"> function getLastDay(year,month) { var new_year = year; /

  • 在pycharm中设置显示行数的方法

    下面是具体的步骤,试用于pycharm2016(亲测) 1.  File-->settings-->editor-->general-->appearance 2.  在show  line numbers   前面打上√就可以. 以上这篇在pycharm中设置显示行数的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

    这是一个示例: <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").cl

  • Node.js发送HTTP客户端请求并显示响应结果的方法示例

    本文实例讲述了Node.js发送HTTP客户端请求并显示响应结果的方法.分享给大家供大家参考,具体如下: wget.js:发送HTTP客户端请求并显示响应的各种结果 options对象描述了将要发出的请求. data事件在数据到达时被触发,error事件在发生错误时被触发. HTTP请求中的数据格式通过MIME协议来声明,例如,提交HTML表单时它的Content-Type会被设置成multipart/form-data. 要在HTTP客户端请求中发送数据,只需调用.write方法并写入符合规范

  • C++基于蔡基姆拉尔森计算公式实现由年月日确定周几的方法示例

    本文实例讲述了C++基于蔡基姆拉尔森计算公式实现由年月日确定周几的方法.分享给大家供大家参考,具体如下: #include <iostream> #include <string> using namespace std; int whatday(int y, int m, int d) { // 返回正确的星期.用 0 - 6 表示 星期 1 - 7 if(m==1||m==2) { y--; m+=12; } return(d+2*m+3*(m+1)/5+y+y/4-y/100

  • Java计算黑洞数的方法示例

    本文实例讲述了Java计算黑洞数的方法.分享给大家供大家参考,具体如下: 任意一个5位数,比如:34256,把它的各位数字打乱,重新排列,可以得到一个最大的数:65432,一个最小的数23456.求这两个数字的差,得:41976,把这个数字再次重复上述过程(如果不足5位,则前边补0).如此往复,数字会落入某个循环圈(称为数字黑洞). 比如,刚才的数字会落入:[82962,75933, 63954, 61974]这个循环圈. 请编写程序,找到5位数所有可能的循环圈,并输出,每个循环圈占1行.其中5

  • Python简单获取二维数组行列数的方法示例

    本文实例讲述了Python简单获取二维数组行列数的方法.分享给大家供大家参考,具体如下: import numpy as np x = np.array([[1,2,5],[2,3,5],[3,4,5],[2,3,6]]) # 输出数组的行和列数 print x.shape # (4, 3) # 只输出行数 print x.shape[0] # 4 # 只输出列数 print x.shape[1] # 3 本机测试运行结果如下图所示: 或者: >>> arr = [[1,4,7,10,1

  • js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结

    本文实例讲述了js找出5个数中最大的一个数和倒数第二大的数实现方法.分享给大家供大家参考,具体如下: 最大的一个数 : 方法1: <script> var max=Math.max(1,2,3,4,5,2,8); console.log(max) //5 //如果这5个数是数组 可以用apply方法 var max1=Math.max.apply(this,[1,2,3,4,5,2,8]); console.log(max1); </script> 方法2: <script&

  • vue读取本地的excel文件并显示在网页上方法示例

    我想实现读取一个本地的xlsx文件(task_list.xlsx)然后显示在网页上, 一开始选择的方法是建个express server, 通过发送axios请求来实现, 但是觉得只是读取一个本地文件还要搞个server太复杂了, 最终还是通过"xlsx"模块 + axios实现了读取本地文件, 无需后端, 步骤如下: 1.通过vue-cli新建项目: 2.编写分析excel workbook的脚本 /src/scripts/read_xlsx.js const XLSX = requ

随机推荐