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

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

<el-form-item label="关闭时间：" prop="date"> <el-date-picker v-model="date" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" value-format="yyyy-MM-dd HH:mm:ss" clearable /> </el-form-item>

首先定义想要的时间 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' )

---