datepicker 时间快捷键、禁用日期

一、封装方法 

/**
 * 默认开始和结束时间
 * @type {string[]}
 */
import dayjs from 'dayjs'
export const defaultTime = ['00:00:00', '23:59:59']
/**
 * 设置日期组件 快捷方式
 * @type {({onClick(*): void, text: string}|{onClick(*): void, text: string}|{onClick(*): void, text: string}|{onClick(*): void, text: string})[]}
 */
export const shortcuts = [
  {
    text: '明天',
    onClick(picker) {
      const date = new Date()
      date.setTime(date.getTime() + 3600 * 1000 * 24)
      picker.$emit('pick', date)
    },
  },
  {
    text: '今天',
    onClick(picker) {
      picker.$emit('pick', new Date())
    },
  },
  {
    text: '昨天',
    onClick(picker) {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      picker.$emit('pick', date)
    },
  },
  {
    text: '一周前',
    onClick(picker) {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      picker.$emit('pick', date)
    },
  },
]

/**
 * 日期 区间组件 快捷方式
 * @type {{shortcuts: [{onClick(*): void, text: string}, {onClick(*): void, text: string}, {onClick(*): void, text: string}]}}
 */
export const shortcutsRange = [
  {
    text: '今天',
    onClick(picker) {
      let dayStart = new Date(
        new Date(new Date().toLocaleDateString()).getTime()
      )
      let dayEnd = new Date(
        new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1
      )
      picker.$emit('pick', [dayStart, dayEnd])
    },
  },
  {
    text: '昨天',
    onClick(picker) {
      let dayStart = new Date(
        new Date(new Date().toLocaleDateString()).getTime() - 1 * 86400000
      )
      let dayEnd = new Date(
        new Date(new Date().toLocaleDateString()).getTime() - 1
      )
      picker.$emit('pick', [dayStart, dayEnd])
    },
  },
  {
    text: '本周',
    onClick(picker) {
      const dataValue = new Date()
      const year = dataValue.getFullYear()
      const month = dataValue.getMonth() + 1
      const day = dataValue.getDate()
      var thisWeekStart //本周周一的时间
      if (dataValue.getDay() == 0) {
        //周天的情况；
        thisWeekStart =
          new Date(year + '/' + month + '/' + day).getTime() -
          (dataValue.getDay() + 6) * 86400000
      } else {
        thisWeekStart =
          new Date(year + '/' + month + '/' + day).getTime() -
          (dataValue.getDay() - 1) * 86400000
      }
      const prevWeekStart = thisWeekStart //本周周一的时间
      const prevWeekEnd = thisWeekStart + 7 * 86400000 - 1 //本周周日的时间
      const start = new Date(prevWeekStart) //开始时间
      const end = new Date(prevWeekEnd) //结束时间
      picker.$emit('pick', [start, end])
    },
  },
  {
    text: '上周',
    onClick(picker) {
      const dataValue = new Date()
      const year = dataValue.getFullYear()
      const month = dataValue.getMonth() + 1
      const day = dataValue.getDate()
      var thisWeekStart //本周周一的时间
      if (dataValue.getDay() == 0) {
        //周天的情况；
        thisWeekStart =
          new Date(year + '/' + month + '/' + day).getTime() -
          (dataValue.getDay() + 6) * 86400000
      } else {
        thisWeekStart =
          new Date(year + '/' + month + '/' + day).getTime() -
          (dataValue.getDay() - 1) * 86400000
      }
      const prevWeekStart = thisWeekStart - 7 * 86400000 //上周周一的时间
      const prevWeekEnd = thisWeekStart - 1 //上周周日的时间
      const start = new Date(prevWeekStart) //开始时间
      const end = new Date(prevWeekEnd) //结束时间
      picker.$emit('pick', [start, end])
    },
  },
  {
    text: '本月',
    onClick(picker) {
      const end = getCurrentMonthLast()
      const start = getCurrentMonthFirst()
      picker.$emit('pick', [start, end])

      function getCurrentMonthFirst() {
        let date = new Date(
          new Date(new Date().toLocaleDateString()).getTime() - 1 * 86400000
        )
        date.setDate(1)
        return date
      }

      // 获取当前月的最后一天
      function getCurrentMonthLast() {
        var date = new Date()
        var currentMonth = date.getMonth()
        var nextMonth = ++currentMonth
        var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
        return new Date(nextMonthFirstDay - 1)
      }
    },
  },
  {
    text: '上月',
    onClick(picker) {
      const end = gettimeEnd()
      const start = gettimeStart()
      picker.$emit('pick', [start, end])

      function gettimeStart() {
        const nowdays = new Date()
        let year = nowdays.getFullYear()
        let month = nowdays.getMonth()
        if (month === 0) {
          month = 12
          year = year - 1
        }
        if (month < 10) {
          month = '0' + month
        }
        let firstDayOfPreMonth = year + '-' + month + '-' + '01' + ' 00:00:00'
        firstDayOfPreMonth = firstDayOfPreMonth.toString()
        return new Date(firstDayOfPreMonth)
      }

      function gettimeEnd() {
        const nowdays = new Date()
        let year = nowdays.getFullYear()
        let month = nowdays.getMonth()
        if (month === 0) {
          month = 12
          year = year - 1
        }
        if (month < 10) {
          month = '0' + month
        }
        const lastDay = new Date(year, month, 0)
        let lastDayOfPreMonth =
          year + '-' + month + '-' + lastDay.getDate() + ' 23:59:59'
        lastDayOfPreMonth = lastDayOfPreMonth.toString()
        return new Date(lastDayOfPreMonth)
      }
    },
  },
  {
    text: '最近7天',
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      picker.$emit('pick', [start, end])
    },
  },
  {
    text: '最近一个月',
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      picker.$emit('pick', [start, end])
    },
  },
  {
    text: '最近三个月',
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      picker.$emit('pick', [start, end])
    },
  },
  {
    text: '最近半年',
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 6)
      picker.$emit('pick', [start, end])
    },
  },
  {
    text: '最近一年',
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      start.setFullYear(start.getFullYear() - 1)
      picker.$emit('pick', [start, end])
    },
  },
]

/**
 * 日期 区间组件 快捷方式
 * @type {{shortcuts: [{onClick(*): void, text: string}, {onClick(*): void, text: string}, {onClick(*): void, text: string}]}}
 */
export const shortcutsMonthRange = [
  {
    text: '本月',
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      picker.$emit('pick', [start, end])
    },
  },
  {
    text: '今年至今',
    onClick(picker) {
      const end = new Date()
      const start = new Date(new Date().getFullYear(), 0)
      picker.$emit('pick', [start, end])
    },
  },
  {
    text: '最近六个月',
    onClick(picker) {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 6)
      picker.$emit('pick', [start, end])
    },
  },
]

/**
 * 控制 只显示 今天之前的日期
 * @param time
 * @returns {boolean}
 */
export const disabledTomorrowAfter = (time) => {
  return (
    time.getTime() >=
    new Date(
      new Date(new Date().toLocaleDateString()).getTime() +
        24 * 60 * 60 * 1000 -
        1
    ).getTime()
  )
}

export const disabledBeforeMonth = function (time) {
  return dayjs().subtract(3, 'month') >= time || time >= dayjs()
}
export const disabledBefore12Month = function (time) {
  return dayjs().subtract(12, 'month') >= time || time >= dayjs()
}

export const disabledTodayBefore = (time) => {
  return (
    time.getTime() <=
    new Date(
      new Date(new Date().toLocaleDateString()).getTime() +
        24 * 60 * 60 * 1000 -
        1
    ).getTime()
  )
}

export const disabledMonthAfter = (time) => {
  return (
    time.getFullYear() > new Date().getFullYear() ||
    (time.getFullYear() === new Date().getFullYear() &&
      time.getMonth() > new Date().getMonth())
  )
}

export const getLastDayOfMonth = (time) => {
  return time.get
}

// 禁用今天及今天以后的日期
export const disabledTodayAfter = (time) => {
  return time.getTime() > Date.now() - 24 * 3600 * 1000
}

// 禁用本月以及本月以后的月份
export const disabledMonthAndAfter = (time) => {
  return time.getTime() > Date.now() - dayjs().daysInMonth() * 24 * 3600 * 1000
}

// 只显示今天以及今天以前一周的日期
export const displayTodayBeforeWeek = (time) => {
  // 当前时间是否在8点前,默认昨天，8点后，默认今天
  let isBeforeEight = dayjs(dayjs().format('YYYY-MM-DD HH:mm:ss')).isBefore(
    dayjs().format('YYYY-MM-DD 08:00:00')
  )
  let lessThanEight =
    time.getTime() > Date.now() ||
    time.getTime() < Date.now() - 7 * 24 * 3600 * 1000
  let moreThanEight =
    time.getTime() > Date.now() - 24 * 3600 * 1000 ||
    time.getTime() < Date.now() - 8 * 24 * 3600 * 1000
  return isBeforeEight ? moreThanEight : lessThanEight
}

二、使用

<template>       
 <el-date-picker
          size="small"
          v-model="date2"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
          :picker-options="datepickerOptions"
          @change="date2Change"
        >
        </el-date-picker>
</template>

<script>
import { displayTodayBeforeWeek,shortcuts } from '@/utilbiz/datepicker.js'

export default {
  data() {
    return {
         datepickerOptions: {
           // 禁用日期
           disabledDate(time) {
           return displayTodayBeforeWeek(time)
   
           // 时间快捷键
           shortcuts：shortcuts
        },
       },
    }
  }
}
</script>