通过时间组件data-picker展示特定时间

最近做了一个新样式,样式如下图:

功能很简单,就是通过选择不同的时间button,对应的时间组件展示相对应的时间,时间组件用的el-date-picker这个组件.

样式文件就不放出来了,反正也很简单,就是el-radio-button和el-date-picker,主要展示一下获取时间的方式吧

1. 获取时间方式

var handleTime = (val)=>{
    
    
// handleTime调用的时机是button发生change的时候
// val对应的值为'year','month'等,对应按钮的名称
  const today = new Date()  //获取现在时间
  const year = today.getFullYear() //获取年
  const month = today.getMonth() //获取月,0-11
  const quarter = Math.floor(month / 3) + 1 //获取季度
  const oneDay = 24 * 60 * 60 * 1000 //一天时间以ms为单位

  let startTime = ''
  let endTime = ''

  // 今年
  if (val === 'year') {
    
    
    startTime = new Date(year, 0, 1)
    endTime = new Date(year, 11, 1)
  }
  // 本月
  else if (val === 'month') {
    
    
    startTime = new Date(year, month, 1)
    // 获取下个月第一天然后减去1天,拿到上个月的最后一天
    endTime = new Date(new Date(year, month + 1, 1).getTime() - oneDay)
  }
  // 上月
  else if (val === 'lastMonth') {
    
    
    startTime = new Date(year, month - 1, 1)
    endTime = new Date(new Date(year, month, 1).getTime() - oneDay)
  }
  // 本季度
  else if (val === 'quarter') {
    
    
   // 4月份是第2个季度,但是获取时间时候是 new Date(year, 3, 1)
    const newMonth = (quarter - 1) * 3 
    startTime = new Date(year, newMonth, 1)
    endTime = new Date(new Date(year, newMonth + 3, 1).getTime() - oneDay)
  }
  // 上季度
  else if (val === 'lastQuarter') {
    
    
  // 考虑是否跨年
    const newYear = quarter > 1 ? year : year - 1
    const newMonth = quarter > 1 ? (quarter - 2) * 3 : 9
    startTime = new Date(newYear, newMonth, 1)
    endTime = new Date(new Date(newYear, newMonth + 3, 1).getTime() - oneDay)
  }
  value = [startTime, endTime] // value就是date-picker的值
 }

其实处理的方法有很多,但是我这个方法是通过element中el-date-picker组件里获取时间的方式想到的,看着感觉还算清晰明了.

2.计算不同年份之间的总共月份

另外,我这个需求还要计算不同年份之间的一共有几个月,直接放上公式,免的再算了

 totalMonth = (endYear - startYear) * 12 - startMonth + 1 + endMonth