vue elemnt-ui自定义时间日期选择

如图

先写个日期组件 DateRangePicker/index.vue

复制代码

<script>
import { DatePicker, DatePickerOptions } from 'element-ui'
import { calendarShortcuts } from '@/utils/shortcuts'

export default {
  name: 'DateRangePicker',
  mixins: [DatePicker],
  props: {
    type: {
      type: String,
      default: 'datetimerange'
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    },
    defaultTime: {
      type: Array,
      default: _ => ['00:00:00', '23:59:59']
    },
    pickerOptions: {
      type: DatePickerOptions,
      default: _ => {
        return { shortcuts: calendarShortcuts }
      }
    },
    size: {
      type: String,
      default: 'small'
    },
    rangeSeparator: {
      type: String,
      default: ':'
    },
    startPlaceholder: {
      type: String,
      default: '开始日期'
    },
    endPlaceholder: {
      type: String,
      default: '结束日期'
    }
  }
}
</script>

核心代码 shortcuts.js

复制代码

import Date from './datetime.js'

export const calendarBaseShortcuts = [{
  text: '今天',
  onClick(picker) {
    const startTime = new Date(new Date().setHours(0, 0, 0))
    const endTime = new Date(new Date().setHours(23, 59, 59))
    picker.$emit('pick', [startTime, endTime])
  }
}, {
  text: '昨天',
  onClick(picker) {
    const startTime = new Date(new Date().daysAgo(1).setHours(0, 0, 0))
    const endTime = new Date(new Date().daysAgo(1).setHours(23, 59, 59))
    picker.$emit('pick', [startTime, endTime])
  }
}, {
  text: '最近一周',
  onClick(picker) { 
    const startTime = new Date(new Date().daysAgo(7).setHours(0, 0, 0))
    const endTime = new Date(new Date().setHours(23, 59, 59))
    picker.$emit('pick', [startTime, endTime])
  }
}, {
  text: '最近30天',
  onClick(picker) {
    const startTime = new Date(new Date().daysAgo(30).setHours(0, 0, 0))
    const endTime = new Date(new Date().setHours(23, 59, 59))
    picker.$emit('pick', [startTime, endTime])
  }
}, {
  text: '这个月',
  onClick(picker) {
    const startTime = new Date(new Date().monthBegin().setHours(0, 0, 0))
    const endTime = new Date(new Date().setHours(23, 59, 59))
    picker.$emit('pick', [startTime, endTime])
  }
}, {
  text: '本季度',
  onClick(picker) {
    const startTime = new Date(new Date().quarterBegin().setHours(0, 0, 0))
    const endTime = new Date(new Date().setHours(23, 59, 59))
    picker.$emit('pick', [startTime, endTime])
  }
}]

export const calendarMoveShortcuts = [{
  text: '‹ 往前一天 ',
  onClick(picker) {
    let startTime = new Date(new Date().daysAgo(1).setHours(0, 0, 0))
    let endTime = new Date(new Date().daysAgo(1).setHours(23, 59, 59))
    if (!picker.value) {
      picker.value = [startTime, endTime]
    }
    startTime = picker.value[0].daysAgo(1)
    endTime = picker.value[1].daysAgo(1)
    picker.$emit('pick', [startTime, endTime])
  }
}, {
  text: ' 往后一天 ›',
  onClick(picker) {
    let startTime = new Date(new Date().setHours(0, 0, 0))
    let endTime = new Date(new Date().setHours(23, 59, 59))
    if (!picker.value) {
      picker.value = [startTime, endTime]
    }
    startTime = picker.value[0].daysAgo(-1)
    endTime = picker.value[1].daysAgo(-1)
    picker.$emit('pick', [startTime, endTime])
  }
}, {
  text: '<< 往前一周 ',
  onClick(picker) {
    let startTime = new Date(new Date().setHours(0, 0, 0))
    let endTime = new Date(new Date().setHours(23, 59, 59))
    if (!picker.value) {
      picker.value = [startTime.daysAgo(new Date().getDay()),
        endTime.daysAgo(new Date().getDay() + 1)]
    } else {
      picker.value = [picker.value[0].daysAgo(picker.value[0].getDay()),
        picker.value[1].daysAgo(picker.value[1].getDay() + 1)]
    }
    startTime = picker.value[0].daysAgo(7)
    endTime = picker.value[1]
    picker.$emit('pick', [startTime, endTime])
  }
}, {
  text: ' 往后一周 >>',
  onClick(picker) {
    let startTime = new Date(new Date().setHours(0, 0, 0))
    let endTime = new Date(new Date().setHours(23, 59, 59))
    if (!picker.value) {
      picker.value = [startTime.daysAgo(new Date().getDay() - 7),
        endTime.daysAgo(new Date().getDay() - 6)]
    } else {
      picker.value = [picker.value[0].daysAgo(picker.value[0].getDay() - 7),
        picker.value[1].daysAgo(picker.value[1].getDay() - 6)]
    }
    startTime = picker.value[0]
    endTime = picker.value[1].daysAgo(-7)
    picker.$emit('pick', [startTime, endTime])
  }
}]

export const calendarShortcuts = [
  ...calendarBaseShortcuts,
  ...calendarMoveShortcuts
]

组件的使用

main.js中引入

复制代码

// 时间组件
import DateRangePicker from '@/components/DateRangePicker'

Vue.component('DateRangePicker', DateRangePicker)

<date-range-picker   v-model="acceptTime" :clearable="false" :pickerOptions="pickerOptions"  style="width: 350px !important;margin-right: 10px;" class="date-item" />

好了