用element
框架中的el-date-picker
做了一个时间选择器,默认显示的是当天~前7天(或15)的时间差,下面编程教程网小编给大家介绍一下代码。
el-date-picker组件
<el-date-picker
:editable="false"
:clearable="false"
v-model="dateTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd">
</el-date-picker>
方法介绍:
data(){
return {
dateTime:[],
//不能选择当前日期之后的时间
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
}
}
created() {
if (process.client) {
const that = this;
that.getTimeFn();
}
},
methods: {
//设置默认时间
getTimeFn() {
const that = this;
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); //15天把7改掉
that.deviceFormData.time[0] = that.formatDate(start);
that.deviceFormData.time[1] = that.formatDate(end);
},
//格式化时间
formatDate(date) {
var myyear = date.getFullYear();
var mymonth = date.getMonth() + 1;
var myweekday = date.getDate();
if (mymonth < 10) {
mymonth = "0" + mymonth;
}
if (myweekday < 10) {
myweekday = "0" + myweekday;
}
return myyear + "-" + mymonth + "-" + myweekday;
},
}
以上是编程学习网小编为您介绍的“el-date-picker时间选择器默认时间为前7天(15天)”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
织梦狗教程
本文标题为:el-date-picker时间选择器默认时间为前7天(15天)


基础教程推荐
猜你喜欢
- 详解javascript获取url信息的常见方法 2024-01-07
- vue项目开发引入百度echarts报"export 'default' (imported as 'echarts') was not found in 'echarts'错误解决方法 2025-01-13
- Vue指令之v-if和v-show 2023-10-08
- 关于Javascript中值得学习的特性总结 2023-08-08
- vue3如何实现做一个有水印背景效果 2025-01-14
- js代码实现点击按钮出现60秒倒计时 2024-03-09
- Ajax入门学习教程(一) 2023-01-26
- 如何利用Vuejs代码实现搜索匹配功能 2025-01-13
- Ajax原理与应用案例快速入门教程 2023-02-22
- 16、laravel8 + inertia + vue3 2023-10-08