基于element ui实现一个按周选择时间范围的功能

背景

公司有个用vue + element ui 开发的项目需要实现这样一个需求:以周为周期选择一个时间范围,并显示为日期的格式,可以快捷选择近1周,近四周……

antd中是有周范围选择器的,悲催的是element ui没有,并且也没找到类似的,只好自己封一个

下图为antd
image.png

下图为element ui,只有日期范围和月范围,偏偏没有周范围……
image.png

思路

有两种思路

  1. 控制两个单独的周选择器实现联动
    image.png
  2. 改造日期选择器,选中某个日期时对应的整行变色
    image.png

这里最终选用了第一种思路,用到了moment库,使用安装很简单,可自行安装


实现效果:
image.png

template部分,这里的value1,value2的值为我们所选周的星期一,为格林尼治时间的格式; date1, date2为周选择器的value对应的日期,date1取当周的星期一(起始日期),date2取当周的星期日(结束日期),weekNum为周数

实现代码

  1. template结构:

     <div class="block">
       <span style="margin-right:10px">周期选择: </span>
       <el-date-picker
         v-model="value1"
         type="week"
         format="yyyy 第 WW 周"
         placeholder="选择周"
         :picker-options="pickerOptions"
         style="width: 180px"
       >
       </el-date-picker>
       至
       <el-date-picker
         v-model="value2"
         type="week"
         format="yyyy 第 WW 周"
         placeholder="选择周"
         :picker-options="pickerOptions"
         style="width: 180px"
       >
       </el-date-picker>
       <span v-if="value1&&value2" style="margin-left: 10px">
         {{ date1 }} 至 {{ date2 }}, 共 {{ weekNum }} 周
       </span>
      </div>

    weekNum的计算:

computed: {
    weekNum() {
      return Math.round((this.value2 - this.value1) / (24 * 60 * 60 * 1000 * 7)) + 1
    },
  },
  1. data:
  data() {
    return {
      value1: null,
      value2: null,
      date1: '',
      date2: '',

      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate: (time) => this.getDisabledDate(time, 'start'),
        shortcuts: [{
          text: '近1周',
          onClick: (picker) => {
            this.onWeekChange(picker, 1)
          }
        }, {
          text: '近4周',
          onClick: (picker) => {
            this.onWeekChange(picker, 4)
          }
        }, {
          text: '近12周',
          onClick: (picker) => {
            this.onWeekChange(picker, 12)
          }
        }]
      }
    }
  },
  1. created里面来设置一个起始日期,这里将value设为了最近一周的周一,
    image.png
  created() {
    this.value1 = this.value2 = moment().isoWeekday(-5).toDate()
  },
  1. 侦听value1, value2,当它们变化时更新日期
watch: {
   value1() {
      if (!this.value1) return
      if (this.value1 >= this.value2) {   // 保证value2大于value1
        this.value2 = this.value1
      }
      this.date1 = moment(this.value1.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
      this.onValueChange()   // 这里为我们希望value改变时触发的方法
    },
    value2() {
      if (!this.value2) return
      this.date2 = moment(this.value2.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
      this.onValueChange()
    },

}
  1. 选中近k周的后触发的操作
methods: {
    onWeekChange(picker, k) { // 选中近k周后触发的操作
      this.value1 = moment().isoWeekday(-(5 + (k - 1) * 7)).toDate()
      this.value2 = moment().isoWeekday(-5).toDate()  //value2与k值无关,因为它总是为最近一周的周一
      this.$forceUpdate()   // 这里如果不强制更新视图,会出现value值改变而视图中的第几周和日期无变化的情况
    },
}

补充

之前的做法在选择快捷选项时,会导致请求两次接口,因此把 this.onValueChange() 拿出来,放到控件的 @change 方法中,便可以避免这个问题

     <el-date-picker
        v-model="value1"
        type="week"
        format="yyyy 第 WW 周"
        placeholder="选择周"
        :picker-options="pickerOptions"
        style="width: 180px"
        @change="onValueChang"
      >
      </el-date-picker>
      至
      <el-date-picker
        v-model="value2"
        type="week"
        format="yyyy 第 WW 周"
        placeholder="选择周"
        :picker-options="pickerOptions2"
        style="width: 180px"
        @change="onValueChange"
      >
      </el-date-picker>

一起成长~

536 声望
43 粉丝
0 条评论
推荐阅读
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs40阅读 4.8k评论 5

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -&gt; Preference-&gt; Settings(如果装了中文插件包应该是 文件 -&gt; 选项 -&gt; 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.8k评论 9

vue UI框架比较
最好基于vue2.0PC端:因为用过的是饿了么UI,所以比较以饿了么UI为基础element UI 饿了么UI支持vue2.x80分优点:组件的API方法、属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观N3 N3支持vue2.x70分优点:...

chinawzc22阅读 39.9k评论 17

Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20.1k评论 9

用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.6k评论 2

封面图
嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用&lt;keep-alive&gt;缓存起来。但是如果将所有对话都缓存,未...

wuwhs12阅读 2.6k

封面图
你可能需要的多文档页面交互方案
在日常工作中,面对不同的需求场景,你可能会遇到需要进行多文档页面间交互的实现,例如在 A 页面跳转到 B 页面进行某些操作后,A 页面需要针对该操作做出一定的反馈等等,这个看似简单的功能,却也需要根据不同...

熊的猫8阅读 1.3k

封面图

一起成长~

536 声望
43 粉丝
宣传栏