##vue element日期选择器上来获取默认时间
<el-form-item label="开单日期:">
<el-date-picker
v-model="seachForm.timeValue"
:editable="false"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
computed: {
// 默认时间
timeDefault() {
let date = new Date();
// 通过时间戳计算
let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000; // 转化为时间戳
let defalutEndTime = date.getTime();
let startDateNs = new Date(defalutStartTime);
let endDateNs = new Date(defalutEndTime);
// 月,日 不够10补0
defalutStartTime =
startDateNs.getFullYear() +
"-" +
(startDateNs.getMonth() + 1 >= 10
? startDateNs.getMonth() + 1
: "0" + (startDateNs.getMonth() + 1)) +
"-" +
(startDateNs.getDate() >= 10
? startDateNs.getDate()
: "0" + startDateNs.getDate());
defalutEndTime =
endDateNs.getFullYear() +
"-" +
(endDateNs.getMonth() + 1 >= 10
? endDateNs.getMonth() + 1
: "0" + (endDateNs.getMonth() + 1)) +
"-" +
(endDateNs.getDate() >= 10
? endDateNs.getDate()
: "0" + endDateNs.getDate());
return [defalutStartTime, defalutEndTime];
},
},
初始化
created() {
// 默认7天日期
this.seachForm.timeValue = this.timeDefault;
},


这篇博客介绍了如何在 Vue Element 中使用日期选择器组件设置默认的7天时间范围。通过JavaScript计算当前时间并减去7天作为起始日期,然后将结果格式化为日期字符串。在组件创建时,将计算出的日期范围赋值给搜索表单的时间值,实现了日期选择器的默认显示效果。
9233

被折叠的 条评论
为什么被折叠?



