正文
vue element-ui 设置时间组件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
备注：设置开始时间小于结束时间
<!-- 开始时间 -->
<div class="block">
<!-- <span class="demonstration">开始时间</span> -->
<el-date-picker
v-model="startTime"
type="date"
placeholder="选择开始日期"
:picker-options="pickerOptionsStart">
</el-date-picker>
</div>
<span style="color: #333333;font-size: 14px;">至</span>
<!-- 结束时间 -->
<div class="block">
<!-- <span class="demonstration">结束时间</span> -->
<el-date-picker
v-model="endTime"
type="date"
placeholder="选择结束日期"
:picker-options="pickerOptionsEnd">
</el-date-picker>
</div>
data() {
return {
startTime: '',
endTime: '',
pickerOptionsStart: {
disabledDate: (time) => {
if (this.endTime !== '') {
// return time.getTime() < Date.now() - 8.64e7 || time.getTime() > this.endTime
return time.getTime() > this.endTime
} else {
// return time.getTime() < Date.now() - 8.64e7
}
}
},
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.startTime !== '') {
return time.getTime() < this.startTime
} else {
// return time.getTime() < Date.now()
// return time.getTime() < Date.now() - 8.64e7
}
}
},
}
},
