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" />

好了