用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天)
基础教程推荐
猜你喜欢
- PJBLOG使用技巧 2024-01-22
- 使用Ajax、json实现京东购物车结算界面的数据交互实例 2023-01-31
- linux – 在电子邮件正文中发送html文件的输出 2023-10-25
- JavaScript解构赋值详解 2023-08-12
- React 悬浮框内容懒加载实例详解 2024-03-11
- 经典的20道AJAX面试题(必知必会) 2023-01-21
- JavaScript动态生成二维码图片 2024-01-08
- 纯HTML5+CSS3制作生日蛋糕代码 2024-01-23
- 实例讲解如何使用CSS保持页面内容宽高比 2024-03-31
- 用ajax传递json到前台中文出现问号乱码问题的解决办法 2023-01-26