组件属性
<el-date-picker v-model="date" value-format="yyyy-MM-dd" @change="changeDate" size="small" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
data () {
return {
pickerOptions: {// 限制时间的可选范围
disabledDate: (time) => {
return this.dealDisabledDate(time)
}
}
}
},
mounted () {
// 时间默认值
this.date = this.timeDefault
},
computed: {
// 默认时间
timeDefault () {
let date = new Date()
// 通过时间戳计算
let defalutStartTime = date.getTime() - 7 * 24 * 3600 * 1000 // 转化为时间戳
let defalutEndTime = date.getTime()
let startDateNs = new Date(defalutStartTime)
let endDateNs = new Date(defalutEndTime)
// 月，日 不够10补0
defalutStartTime = startDateNs.getFullYear() + '-' + ((startDateNs.getMonth() + 1) >= 10 ? (startDateNs.getMonth() + 1) : '0' + (startDateNs.getMonth() + 1)) + '-' + (startDateNs.getDate() >= 10 ? startDateNs.getDate() : '0' + startDateNs.getDate())
defalutEndTime = endDateNs.getFullYear() + '-' + ((endDateNs.getMonth() + 1) >= 10 ? (endDateNs.getMonth() + 1) : '0' + (endDateNs.getMonth() + 1)) + '-' + (endDateNs.getDate() >= 10 ? endDateNs.getDate() : '0' + endDateNs.getDate())
return [defalutStartTime, defalutEndTime]
}
},
methods: {
// 限制时间控件的可选范围 今天之前的一个月可选
dealDisabledDate (time) {
if (new Date(time).getTime() > new Date().getTime()) { // 所选时间大于当前时间
return time.getTime() > Date.now()
} else {
return time.getTime() < Date.now() - 30 * 24 * 3600 * 1000
}
}
}
时间控件设置默认值，通过时间戳去计算
- date获取时间戳new Date().getTime()
- 时间戳转化为date类型 new Date(defalutStartTime)
- date类型获取年月日 date.getFullYear()
- 月，日不够10补0操作还阔以使用
date.getFullYear()+'-'+(date.getMonth()+1).toString().padStart(2,'0')
