需求:
若选择了开始时间,结束时间不能早于开始时间
若选择了结束时间,开始时间不能晚于结束时间
HTML
<div class="col-6">
<div class="form-group">
<label for="lesson-start-date">開始時間</label>
<vuejs-datepicker
input-class="bg-white"
:clear-button="true"
:bootstrap-styling="true"
:format="dateFormatter"
:highlighted="highlighted"
:disabled-dates="disabledStartDates"
v-model="articleInfo.startDate"
></vuejs-datepicker>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="lesson-end-date">結束時間</label>
<vuejs-datepicker
input-class="bg-white"
:clear-button="true"
:bootstrap-styling="true"
:format="dateFormatter"
:highlighted="highlighted"
:disabled-dates="disabledEndDates"
v-model="articleInfo.endDate"
></vuejs-datepicker>
</div>
</div>
使用
disabled-dates
属性实现
JS
methods: {
// 时间格式化 moment.js 组件
dateFormatter(date) {
return moment(date).format('YYYY-MM-DD')
}
},
computed: {
// 开始时间范围
disabledStartDates() {
if (this.articleInfo.endDate) {
// 此四行代码是为了使日期加一天
let date = this.dateFormatter(this.articleInfo.endDate)
date = date.split('-')
date[2] = Number(date[2]) + 1
date = date.join('-')
return {
from: new Date(this.articleInfo.endDate)
}
} else {
return
}
},
// 结束时间范围
disabledEndDates() {
return {
to: new Date(this.articleInfo.startDate)
}
},
}
效果图:
当开始时间为15号时,结束时间不能早于15号。
当结束时间是18号时,开始时间不能超过18号