功能展示如下:
根据需求要求,要求选择日期范围为一个月:在选择了起始时间后,结束时间之内选择之后的一个月时间,到下个月17日
具体代码如下:
<Form-item label="决策时间" style="margin-bottom: 2px;">
<Date-picker :editable="false" type="datetime" confirm :transfer="true" v-model="qualityCheck.decisionStartTime" placeholder="选择开始日期" format="yyyy-MM-dd HH:mm:ss"
style="width: 47%" size="small" @on-change="changeEndTime" :options="decisionStartTime">
</Date-picker>
-
<Date-picker :editable="false" type="datetime" confirm :transfer="true" v-model="qualityCheck.decisionEndTime" placeholder="选择结束日期" format="yyyy-MM-dd HH:mm:ss"
style="width: 47%" size="small" @on-change="changeStartTime" :options="decisionEndTime">
</Date-picker>
</Form-item>复制代码
此处主要重点在两个地方:
①@on-change=""
②:options=""
on-change调用change方法后,修改option中保存的值:
changeStartTime: function (e) {
var time = e
var that = this
var days = new Date(new Date().getFullYear(), (new Date().getMonth() + 1), 0).getDate() - 1
var startEndTime = time ? new Date(time).valueOf() - days * 24 * 60 * 60 * 1000 : ''
var endEndTime = time ? new Date(time).valueOf() : ''
if (time === '') {
this.decisionStartTime = {
disabledDate (data) {
return data.valueOf() < 0
}
}
} else {
this.decisionStartTime = {
disabledDate (data) {
if (that.qualityCheck.decisionEndTime === '') {
return new Date()
}
return data.valueOf() < startEndTime || data.valueOf() > endEndTime
}
}
}
}复制代码
此处处理this.decisionStartTime 返回的disableDate即可。
注:记得点击X,删去时间时,需要将disableDate清空,不然会出现日期不能选择的情况