vue中日,周,月,年时间选择器(基于elementui)

 

通过选择上面的选项展示选择不同的日期,周,月份,年份

 因为项目中点击切换时需要传递不同的日期,

例如:日,即选择日期的00:00分-23:59

周:即选择当月的第三周,截取第三周的周一和第三周的周日为开始时间和截止时间传值

月,即选择月的第一天---选择月得最后一天传值

此处为上面时间格式化的方法,按需使用

/**
 * 日期格式化
 */
export function dateFormat(date, format = 'yyyy-MM-dd hh:mm:ss') {
  if (date !== 'Invalid Date') {
    var o = {
      'M+': date.getMonth() + 1, // month
      'd+': date.getDate(), // day
      'h+': date.getHours(), // hour
      'm+': date.getMinutes(), // minute
      's+': date.getSeconds(), // second
      'q+': Math.floor((date.getMonth() + 3) / 3), // quarter
      'S': date.getMilliseconds() // millisecond
    }
    if (/(y+)/.test(format)) {
      format = format.replace(RegExp.$1,
        (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    for (var k in o) {
      if (new RegExp('(' + k + ')').test(format)) {
        format = format.replace(RegExp.$1,
          RegExp.$1.length === 1 ? o[k]
            : ('00' + o[k]).substr(('' + o[k]).length))
      }
    }
    return format
  }
  return ''
}

父组件中使用方法

data() {
    retrun {
        value: new Date(),
        groupType: "week",
    
    }
}

methods:{
  handleChangeTime(type, timeObj){
    console.log(timeObj)
    // TODO
  }
}