日期选择联动切换el-date-picker

通过点击下面的时间轴聯動上面的日期變化

根據時間跨度需要進行封裝,引入moment參與計算

import moment from "moment";
// 今天
export function getToday() {
    const start = moment(new Date()).format('YYYY-MM-DD') + ' 00:00:00'; 
    const end = moment(new Date()).add(1,'days').format('YYYY-MM-DD') + ' 00:00:00';   
    return [start,end];
}
// 昨天
export function getYesterday() {
    const start = moment(new Date()).add(-1,'days').format('YYYY-MM-DD') + ' 00:00:00';  
    const end = moment(new Date()).format('YYYY-MM-DD') + ' 00:00:00';  
    return [start,end];
}

// 本周
export function getWeek() {
    const start = moment().startOf('week') .add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
    const end = moment().endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
    return [start,end];
}

// 本月
export function getMonth() {
    const start = moment().startOf('month') .add(0, 'day').format('YYYY-MM-DD') + ' 00:00:00'
    const end = moment().endOf('month').add(1, 'day').format('YYYY-MM-DD') + ' 00:00:00'
    return [start,end];
}
// 上月
export function getPrevMonth() {
    const start = moment(new Date()).subtract(1,'months').startOf('month').format('YYYY-MM-DD') + ' 00:00:00'
    const end = moment(new Date()).subtract(1,'months').endOf('month').add(1,'days').format('YYYY-MM-DD') + ' 00:00:00'
    return [start,end];
}
// 獲取最近七天的开始結束時間
export function getLast7Days() {
    const start = moment().subtract('days', 7).format('YYYY-MM-DD') + ' 00:00:00'
    const end = moment().subtract('days', 1).format('YYYY-MM-DD') + ' 23:59:59'
    return [start,end];
  }
// 獲取最近30天的开始結束時間
export function getLast30Days() {
    const start =  moment().subtract('days', 30).format('YYYY-MM-DD') + ' 00:00:00'
    const end =  moment().subtract('days', 1).format('YYYY-MM-DD') + ' 23:59:59'
    return [start,end];
}

// 10天
export function get10Days() {
    const start = moment().subtract('days', 10).format('YYYY-MM-DD') + ' 00:00:00'
    const end = moment().subtract('days', 0).format('YYYY-MM-DD') + ' 23:59:59'
    return [start,end];
}

// 1个月
export function get1Month() {
    const start = moment().subtract('months', 1).format('YYYY-MM-DD') + ' 00:00:00'
    const end = moment().subtract('days', 0).format('YYYY-MM-DD') + ' 23:59:59'
    return [start,end];
}

// 3个月
export function get3Month() {
    const start = moment().subtract('months',3).format('YYYY-MM-DD') + ' 00:00:00'
    const end = moment().subtract('days', 0).format('YYYY-MM-DD') + ' 23:59:59'
    return [start,end];
}

// 只到年月日
// 今天
export function getToday1() {
    const today = moment(new Date()).format('YYYY-MM-DD')
    return [today,today];
}
// 昨天
export function getYesterday1() {
    const yesterday = moment(new Date()).add(-1,'days').format('YYYY-MM-DD');  
    return [yesterday,yesterday];
}

// 本月
export function getMonth1() {
    const start = moment().startOf('month').format('YYYY-MM-DD')
    const end = moment().endOf('month').format('YYYY-MM-DD') 
    return [start,end];
}
// 上月
export function getPrevMonth1() {
    const start = moment(new Date()).subtract(1,'months').startOf('month').format('YYYY-MM-DD')
    const end = moment(new Date()).subtract(1,'months').endOf('month').format('YYYY-MM-DD')
    return [start,end];
}

export function getCurWeek1() {
    const start = parseInt(moment().week(moment().week()).startOf('week').valueOf())
    const end = parseInt(moment().week(moment().week()).endOf('week').valueOf())
    return [moment(new Date(start)).add(1,'days').format('YYYY-MM-DD'), moment(new Date(end)).add(1,'days').format('YYYY-MM-DD')]
}
export function getPrevWeek1() {
    const start = parseInt(moment().week(moment().week() - 1).startOf('week').valueOf()) + 86400000;
    const end = parseInt(moment().week(moment().week() - 1).endOf('week').valueOf()) + 86400000;
    return [moment(new Date(start)).format('YYYY-MM-DD'), moment(new Date(end)).format('YYYY-MM-DD')]
}
export function getCurWeek() {
    const start = parseInt(moment().week(moment().week()).startOf('week').valueOf())
    const end = parseInt(moment().week(moment().week()).endOf('week').valueOf())
    return [moment(new Date(start)).add(1,'days').format('YYYY-MM-DD') + " 00:00:00", moment(new Date(end)).add(2,'days').format('YYYY-MM-DD') + " 00:00:00"]
}
export function getPrevWeek() {
    const start = parseInt(moment().week(moment().week() - 1).startOf('week').valueOf()) + 86400000;
    const end = parseInt(moment().week(moment().week() - 1).endOf('week').valueOf()) + 86400000;
    return [moment(new Date(start)).format('YYYY-MM-DD') + " 00:00:00", moment(new Date(end)).add(1,'days').format('YYYY-MM-DD') + " 00:00:00"]
}

// 前5天
export function getPrev5Days(date) {
    const day = moment(new Date(date)).add(-5,'days').format('YYYY-MM-DD') + ' 00:00:00';  
    return day;
}

export function get5Days(date) {
    const day = moment(new Date(date)).add(5,'days').format('YYYY-MM-DD') + ' 23:59:59';  
    return day;
}

定义好后直接调用

const action = type == 2
  ? getYesterday
  : type == 3
  ? getMonth
  : type == 4
  ? getPrevMonth
  : type == 5
  ? getCurWeek
  : type == 6
  ? getPrevWeek
  : getToday;
const time = action();
this.formInline.selectTime = time;