1. 因为elementui 自带的周选择器,只能选择一个时间点, 所以我input 来装这个时间区间

结构如下:

 <div class="time-select">

        <co-date-picker

          type="week"

          v-model="valueTime1"

          format="yyyy年 第 WW 周 MM月 dd日"

          placeholder="选择周"

          @change="changeDate1"

        >

        </co-date-picker>

        <co-input class="input" suffix-icon="el-icon-date" v-model="inputTime1" placeholder="请选择周"></co-input>

      </div>

3. 获取当前选中时间点的 周时间和 第几周

getWeek(val) {

      let firstDay = new Date(val.getFullYear(), 0, 1)

      let dayOfWeek = firstDay.getDay() // 2020-01-01是周三  dayOfWeek==3

      let spendDay = 1

      if (dayOfWeek != 0) {

        spendDay = 7 - dayOfWeek + 1 // 5 离下周一还有5天

      }

      firstDay = new Date(val.getFullYear(), 0, 1 + spendDay) // 2020-01-06是2020年第一个周一,是2020年第二个周

      let d = Math.ceil((val.valueOf() - firstDay.valueOf()) / 86400000) // 当前时间距离2020-01-06有几天

      let result = Math.ceil(d / 7) // 换算成周为单位 2020-01-06result是0,但其实是第二个周,所以默认加2

      let week = result + 2 //如果使用的是默认为加2(如果将自然周设置为周一到周日则是加1)

      return (

        this.dataFomat(val.valueOf() - 86400000) +

        '~' +

        this.dataFomat(val.valueOf() + 5 * 86400000) +

        ' 第' +

        week +

        '周 '

      )

    },

4. 将传入的时间格式化

dataFomat(time) {

      const date = new Date(time)

      const H = date.getFullYear()

      const M = (date.getMonth() + 1).toString().padStart(2, 0)

      const D = date.getDate().toString().padStart(2, 0)

      return `${H}年${M}月${D}日`

    },

5. 然后赋值给input 输入框

 changeDate1(val) {

      this.valueTime1 = val.getTime()

      this.inputTime1 = this.getWeek(val)

    },

    changeDate2(val) {

      this.valueTime2 = val.getTime()

      if (this.valueTime2 < this.valueTime1) {

        this.$message.error('结束时间不能小于开始时间')

      }

      this.inputTime2 = this.getWeek(val)

    },

6. 当前有个需求是 进入默认选中 最近6周

因为选择时间选择框时每次选中的是周一,那么我 需要拿到当前周一 和 6周前的周一

  // 获取每周周一

    getMondayDay(time) {

      let dd = ''

      if (time) {

        dd = new Date(time)

      } else {

        dd = new Date()

      }

      var week = dd.getDay() // 获取时间的星期数

      var minus = week ? week - 1 : 6

      dd.setDate(dd.getDate() - minus) // 获取minus天前的日期

      var y = dd.getFullYear()

      var m = dd.getMonth() + 1 // 获取月份

      var d = dd.getDate()

      return new Date(y + '-' + m + '-' + d).getTime() / 1000

    },

7. 赋值给input 输入框即可

let laseSixWeek = new Date().getTime() - 1000 * 60 * 60 * 24 * 42

    // console.log(new Date().getTime(), laseSixWeek)

    // console.log(this.getWeek(new Date(+(this.getWeeklyDay(laseSixWeek) + '000'))))

    this.valueTime1 = laseSixWeek

    this.inputTime1 = this.getWeek(new Date(+(this.getMondayDay(laseSixWeek) + '000'))) // 上6周

    this.inputTime2 = this.getWeek(new Date(+(this.getMondayDay() + '000'))) // 当前周

// 获取周的另一种方法

   // 获取周

    getYearWeek(year, month, date) {

      let dateNow = new Date(year, parseInt(month) - 1, date) //当前日期

      let dateFirst = new Date(year, 0, 1) //当年第一天

      let dataNumber = Math.round((dateNow.valueOf() - dateFirst.valueOf()) / 86400000) //当前日期是今年第多少天

      return Math.ceil((dataNumber + (dateFirst.getDay() + 1 - 1)) / 7) //dataNumber + 当前年的第一天的周差距的和 在 除以7 就是本年第几周

    },

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐