vue利用elementUI组件实现日期时间选择器带快捷选项且自定义时间选择
使用element日期时间选择器带快捷选项自定义时间:需要picker-options和格式化value-format<el-form-item label="关闭时间:" prop="date"><el-date-pickerv-model="date"type="datetimerange":picker-options="pickerOptions"ra
·
使用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'
)
更多推荐
已为社区贡献5条内容
所有评论(0)