功能:1.结束时间必须大于开始时间
2.时间格式必须要yyyy-MM-dd HH:mm:ss
3.添加默认当前时间起始时间默认00:00:00 结束时间默认23:59:59
如下图所示
时间type datetime
<el-date-picker v-model="searchParams.startTime" type="datetime" class="dateItem" value-format="yyyy-MM-dd HH:mm:ss"placeholder="选择起始时间" @change="determine" />
<el-date-picker v-model="searchParams.endTime" type="datetime" class="dateItem" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间" :picker-options="pickerOptions" />
第一步首先添加默认时间(注意时间必须和value-format的格式一样,要不时间默认不上)
data中添加属性
startTime: this.getTime(1, 1), endTime: this.getTime(1, 2),
getTime(day, type) {
const today = new Date()
const targetday = today.getTime() + 1000 * 60 * 60 * 24 * day
today.setTime(targetday) // 关键代码
const tYear = today.getFullYear()
let tMonth = today.getMonth()
let tDate = today.getDate()
tMonth = this.doHandleMonth(tMonth + 1)
tDate = this.doHandleMonth(tDate)
if (type === 1) {
return tYear + '-' + tMonth + '-' + tDate + ' ' + '00:00:00'
} else { return tYear + '-' + tMonth + '-' + tDate + ' ' + '23:59:59' }}
第二步就是控制开始时间如果选择时间,结束时间就不可以选择比开始时间小的时间
1.开始时间添加@change回调赋值给startTime
startTime = new Date(this.searchParams.startTime)
2.结束时间添加pickerOptions开进行判断设置禁用状态
pickerOptions: {disabledDate(time) {return time.getTime() < startTime}},