博客

目前

element UI

上的周控件只有单选周

前段时间 由于需要 本人仿照element单选周的风格写了一个单选周和多选周控件

最近整理了一下代码 分享给大家 希望大家可以相互交流

呼呼呼呼~

组件介绍：

• 以每年的1月1号所在的周数为第一周
• 日历中增加了周数的展示
• 可设置禁选的周数(可配置)
• 多选周组件可以设置一开始周为原点的周范围(可配置)

单选周

用法

    <p>单选周：<week-pick v-model="dateNow" @change="changeDate" :weekOptions="weekOptions"></week-pick></p>
复制代码

单选周相关Api

     // 默认值 [开始值,结算值] 或者 []
     dateNow:["2019-02-25", "2019-03-03"],
     // 配置禁选周
      weekOptions: {
        disabledWeeks: {
          '2019':[10,11,12]   //禁用 2019年 第10,11,12 周  
        },
      }
复制代码

要点一 当月所在的日历生成

单选周的主要突破点在于6排8列的日历数组的实现 要绘制出一个月的日历表 我们需要知道：

• 当月第一天是星期几
• 上个月有多少天
• 本月有多少天

以上可以推算出当前月中上月和下月的日期

主要实现代码：

  rows() {
      const date = new Date(this.year, this.month, 1)  // 本月一号日期
      let day = this.getFirstDayOfMonth(date)  // 本月第一天的星期
      day = (day === 0 ? 7 : day)
      const dateCountOfMonth = this.getDayCountOfMonth(date.getFullYear(), date.getMonth()) // 本月的天数
      const dateCountOfLastMonth = this.getDayCountOfPreMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1))  // 上个月的天数
      const datesArry = this.tableRows
      let count = 1
      // 获取当前月需要渲染的每个单元格的日期
      for (let i = 0; i < 6; i++) {
        const row = datesArry[i]
        for (let j = 0; j < 7; j++) {
          let cell = row[j]
          if (!cell) {
            //初始化cell
            cell = { row: i, column: j, type: 'normal', isToday: false, dateString: null, limit: false, week: null,year:null }
          }
          cell.type = 'normal'
          // 获取每个cell对应的日期
          if (i >= 0 && i <= 1) {
            if (j + i * 7 >= (day - 1)) {
              cell.text =