elementui时间选择器时间范围选择限制
<div class="date">
<el-form-item prop="customTime">
<el-date-picker
v-model="ruleForm.customTime"
size="small"
type="datetime"
:placeholder="$t('seckill.startTime')"
default-time="00:00:00"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="startDatePicker"
@change="dateTimeChange('start')"
:disabled="status===1"
></el-date-picker>
</el-form-item>
<div style="margin-left: 30px;margin-right: 8px;">{{$t('seckill.to')}}</div>
<el-form-item prop="customTimeEnd">
<el-date-picker
v-model="ruleForm.customTimeEnd"
size="small"
type="datetime"
:placeholder="$t('seckill.endTime')"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="23:59:59"
:picker-options="endDatePicker"
@change="dateTimeChange('end')"
></el-date-picker>
</el-form-item>
</div>
// data 中
startDatePicker: this.beginDate(),
endDatePicker: this.processDate(),
// methods中
// 有效期时间限制
beginDate () {
var that = this
return {
disabledDate (time) {
if (that.ruleForm.customTimeEnd) {
return new Date(that.fruleForm.customTimeEnd).getTime() < time.getTime() || time.getTime() > new Date('2037-12-31 23:59:59').getTime() // 如果结束时间不为空,则小于结束时间
} else {
return time.getTime() > new Date('2037-12-31 23:59:59').getTime()
}
}
}
},
processDate () {
var that = this
return {
disabledDate (time) {
if (that.ruleForm.customTime) {
return new Date(that.ruleForm.customTime).getTime() > time.getTime() || time.getTime() > new Date('2037-12-31 23:59:59').getTime() // 如果开始时间不为空,则结束时间大于开始时间
} else {
return time.getTime() > new Date('2037-12-31 23:59:59').getTime() // 开始时间不选时,结束时间最大值小于2038年
}
}
}
},
博主掘金技术社区地址——https://juejin.cn/user/1908407918660871/posts