vue el-date-picker 设置默认时间

最新推荐文章于 2025-10-18 16:01:58 发布

原创最新推荐文章于 2025-10-18 16:01:58 发布 · 8.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了如何在Vue应用中使用ElementUI的el-date-picker组件创建日期范围选择器，包括设置默认时间和提供自定义的快捷选择功能，如最近一周、本月等。

注意时间一定是Data型的.

created(){

// 初始化默认时间
this.defaultDate()

}

methods(){

defaultDate(){

const end = new Date()
const start = new Date()
const dayOfThisMon = end.getDate(); // 获取当前日（1-31）
start.setTime(start.getTime() - (3600 * 1000 * 24 * (dayOfThisMon-1)))
this.daterangeBizOccurDate = [start, end] //将值设置给插件绑定的数据

}

<el-date-picker
v-model="daterangeBizOccurDate"
style="width: 240px"
value-format="yyyy-MM-dd HH:mm:ss"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
:picker-options="pickerOptions"
></el-date-picker>

data() {
return {
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '本月',
onClick(picker) {
const end = new Date()
const start = new Date()
const dayOfThisMon = end.getDate(); // 获取当前日（1-31）
start.setTime(start.getTime() - (3600 * 1000 * 24 * (dayOfThisMon-1)))
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}}