一.需求
需要一进页面时,把日期选择器,默认展示为2012-01-01至当前日期-1天
即图:
二.代码和注释如下:
2.1
<el-form-item label="时间周期:" prop="timeCycle" >
<el-date-picker
v-model="createForm.timeCycle"
type="datetimerange"
:picker-options="pickerOptions" //快捷时间选择的函数
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd" //默认值为这种格式
>
</el-date-picker>
</el-form-item>
2.2
由于开始时间是固定的,所以需要在定义数据时定义好,结束时间不能不填,也不能是" ",也不能是不符合时间格式的,否则整个时间选择器都不会展示了
data(){
return {
createForm: {
timeCycle:["2012-01-01","2012-01-01"]
}
}
}
2.3
在页面一加载时,在created函数里把结束时间算好,然后赋值到定义的timeCycle数组的第二项
created(){
const end = new Date();//获取当前的日期
end.setTime(end.getTime() - 3600 * 1000 * 24 )
//计算,将当期日期-1天
//此时得到的是中国标准时间,格式不是yyyy-MM-dd,需要用dateFormat这个函数转换下
this.createForm.timeCycle[1]=this.dateFormat(end)
//将转换完的正确格式的结束时间赋值到timeCycle数组的第二项
}
2.4
时间格式的转换函数
中国标准时间,即,例如:Wed Oct 24 2018 20:00:00 GMT+0800
转换为:yyyy-MM-dd格式,即:2018-10-24
methods:{
dateFormat(dateData) {
var date = new Date(dateData)
var y = date.getFullYear()
var m = date.getMonth() + 1
m = m < 10 ? ('0' + m) : m
var d = date.getDate()
d = d < 10 ? ('0' + d) : d
const time = y + '-' + m + '-' + d
return time
}
}