Vue + Element UI 实现了一个周选择器

Posted 2022-01-27 lee576

如上图，下面贴代码

<template>
  <div>
    <el-date-picker size="large"
      style ="width:120px"
      v-model="selectYear"
      format="yyyy 年"
      value-format="yyyy"
      type="year"
      :clearable = "false"
      placeholder="选择年">
    </el-date-picker>
    <el-date-picker size="large"
      style ="width:120px"
      v-model="selectMonth"
      format="MM 月"
      value-format="MM"
      type="month"
      :clearable = "false"
      placeholder="选择月">
    </el-date-picker>
    <el-button type="success" @click="setToday">本周</el-button>
    <el-button type="info" @click="lastWeek">&lt;&lt;</el-button>
    <el-button type="info" @click="nextWeek">&gt;&gt;</el-button>
    <span>weekStart</span>
    <span>~</span>
    <span>weekEnd</span>
  </div>
</template>
<script>
import _ from 'lodash'
export default 
  data () 
    return 
      currentDate: new Date()
    
  ,
  mounted () 
    this.currentDate = new Date()
    this.setCallback()
  ,
  computed: 
    selectYear: 
      get: function () 
        return this.$moment(this.currentDate).format('YYYY')
      ,
      set: function (newValue) 
        let _date = newValue + '-' + this.selectMonth + '-' + '01'
        this.currentDate = this.$moment(_date).toDate()
        this.setCallback()
      
    ,
    selectMonth: 
      get: function () 
        return this.$moment(this.currentDate).format('MM')
      ,
      set: function (newValue) 
        let _date = this.selectYear + '-' + newValue + '-' + '01'
        this.currentDate = this.$moment(_date).toDate()
        this.setCallback()
      
    ,
    weekStart () 
      return this.getTime(this.currentDate, 0)
    ,
    weekEnd () 
      return this.getTime(this.currentDate, -6)
    
  ,
  methods: 
    lastWeek () 
      this.currentDate = this.$moment(this.currentDate).subtract(7, 'days').toDate()
      this.setCallback()
    ,
    nextWeek () 
      this.currentDate = this.$moment(this.currentDate).add(7, 'days').toDate()
      this.setCallback()
    ,
    setToday () 
      this.currentDate = new Date()
      this.setCallback()
    ,
    setCallback () 
      if (this.weekStart && this.weekEnd) 
        // 把开始天和结束天相隔的所有日期天放入一个数组保存
        let diffDate = []
        let days = this.$moment(this.weekEnd).diff(this.weekStart, 'days')
        for (let i = 0; i <= days; i++) 
          diffDate.push(this.$moment(this.weekStart).add(i, 'days').format('YYYY-MM-DD'))
        
        this.$emit('callback', this.weekStart, this.weekEnd, diffDate)
      
    ,
    // 上周的开始时间
    // console.log(getTime(7));
    // 上周的结束时间
    // console.log(getTime(1));
    // 本周的开始时间
    // console.log(getTime(0));
    // 本周的结束时间
    // console.log(getTime(-6));
    // 下周的开始时间
    // console.log(getTime(-7));
    // 下周结束时间
    // console.log(getTime(-13));
    getTime (selectDate, n) 
      let coloneSelectDate = _.cloneDeep(selectDate)
      let year = selectDate.getFullYear()
      // 因为月份是从0开始的,所以获取这个月的月份数要加1才行
      let month = coloneSelectDate.getMonth() + 1
      let date = coloneSelectDate.getDate()
      let day = coloneSelectDate.getDay()
      // 判断是否为周日,如果不是的话,就让今天的day-1(例如星期二就是2-1)
      if (day !== 0) 
        n = n + (day - 1)
       else 
        n = n + day
      
      if (day) 
        // 这个判断是为了解决跨年的问题,月份是从0开始的
        if (month <= 1) 
          year = year - 1
          month = 12
        
      
      coloneSelectDate.setDate(coloneSelectDate.getDate() - n)
      year = coloneSelectDate.getFullYear()
      month = coloneSelectDate.getMonth() + 1
      date = coloneSelectDate.getDate()
      let s = year + '-' + (month < 10 ? ('0' + month) : month) + '-' + (date < 10 ? ('0' + date) : date)
      return s
    
  

</script>

 用了一下lodash库的深度拷贝函数，不喜欢自己去掉实现自己的函数也可以，反正我是拿来主义

使用代码

<template>
  <week-selector @callback="afterSelectWeek"></week-selector>
<template>
<script>
import WeekSelector from '@/components/WeekSelector.vue'
import _ from 'lodash'
export default 
  data () 
    return 
      innerWeekStart: null,
      innerWeekEnd: null,
      innerDiffDate: [],
    
  ,
  methods: 
    afterSelectWeek (weekStart, weekEnd, diffDate) 
      if (weekStart && weekEnd && diffDate) 
        this.innerWeekStart = this.$moment(weekStart + ' ' + '00:00:00').toDate()
        this.innerWeekEnd = this.$moment(weekEnd + ' ' + '23:59:59').toDate()
        this.innerDiffDate = diffDate
      
    ,
  

</script>

选择周以后，通过callback回调函数获得选择周的开始日期，结束日期，以及这一周的每一天(结果放到了diffDate数组里面)