vue利用elementUI组件实现日期时间选择器带快捷选项且自定义时间选择

使用element日期时间选择器带快捷选项自定义时间：
需要picker-options
和格式化value-format

首先定义想要的时间 formatDate是格式化时间的封装，这个可以自己写，不难，也可以自行百度！！

import { formatDate } from '@/utils/index'

// 获取当前日期时间
const todayStart = formatDate(
  new Date(new Date()), // 当前时间
  'yyyy-MM-dd hh:mm:ss'
)

// 获取15分钟后的日期时间
const todayEnd = formatDate(
  new Date(new Date().getTime() + 1000 * 15 * 60), // 15分钟后
  'yyyy-MM-dd hh:mm:ss'
)

实现快捷选择日期时间 近15分钟（后）/近1小时（后）/后一天的凌晨日期时间，三种快捷选项

pickerOptions: {
        shortcuts: [{
          text: '近15分钟',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(end.getTime() + 1000 * 15 * 60)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '近1小时',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(end.getTime() + 3600 * 1000 * 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '今日',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(end.getTime() + 86400000 - (new Date().getHours() * 60 * 60 + new Date().getMinutes() * 60 + new Date().getSeconds()) * 1000)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      date: [todayStart, todayEnd]

下面是按当前时间往前推算的日期时间，分别有 近1小时/近3小时/今日凌晨/当前日期时间这几种

const todayStart = formatDate(
  new Date(new Date().getTime() - 1 * 60 * 60 * 1000), // 近一小时
  'yyyy-MM-dd hh:mm:ss'
)
const todayTree = formatDate(
  new Date(new Date().getTime() - 3 * 60 * 60 * 1000), // 近三小时
  'yyyy-MM-dd hh:mm:ss'
)
const today = formatDate(
  new Date(new Date().setHours(0, 0, 0, 0)), // 今日凌晨
  'yyyy-MM-dd hh:mm:ss'
)
const todayEnd = formatDate(
  new Date(new Date()), // 当前时间
  'yyyy-MM-dd hh:mm:ss'
)

---