用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天)
基础教程推荐
猜你喜欢
- css float浮动属性的深入研究及详解拓展(一) 2023-12-20
- 纯css实现的下拉导航栏附html结构及css样式 2023-12-09
- ajaxFileupload实现多文件上传功能 2023-02-14
- 详解HTML5之pushstate、popstate操作history,无刷新改变当前url 2024-01-12
- 利用ajax+php实现商品价格计算 2023-02-23
- jQuery Ajax显示对号和错号用于验证输入验证码是否正确 2023-02-01
- cocos微信小游戏如何加入游戏圈功能 2022-10-30
- JavaScript获取浏览器信息的方法 2023-12-14
- javascript跳转与返回和刷新页面的实例代码 2023-12-13
- Javascript 跨域访问解决方案 2023-12-26
