用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天)


猜你喜欢
- Flutter Tab 切换时保留tab的状态 2022-09-08
- JS获取鼠标坐标位置实例分析 2023-12-24
- 利用js动态添加删除table行的示例代码 2023-12-26
- js结合json实现ajax简单实例 2023-02-01
- 原生JS实现非常好看的计数器 2023-08-08
- layui数据表格-通过点击按钮使数据表格中的字段值增加 2022-12-13
- HTML5学习笔记之html5与传统html区别 2024-03-11
- gps定位坐标获取的几种方式 2024-11-22
- 灵活掌握asp.net中gridview控件的多种使用方法(上) 2023-12-02
- ul+li及css制作韩国风格菜单代码 2023-12-15