实现效果:
这里我使用的是uview2.0的DatetimePicker 选择器,实现开始时间与结束时间相互限制的效果,接下来简单看下实现的代码吧,首先看下选择器组件以及相关参数值的初始化
javascript
<!-- 时间选择-开始 -->
<u-datetime-picker :show="showStartTime" v-model="transStartTime" mode="time"
:maxHour="maxHour" :maxMinute="maxMin" @change="transStartChange"
@confirm="confirmTransStart" @cancel="cancelTransStart">
</u-datetime-picker>
<!-- 时间选择-结束 -->
<u-datetime-picker :show="showEndTime" v-model="transEndTime" mode="time"
:minHour="minHour" :minMinute="minMin" @change="transEndChange"
@confirm="confirmTransEnd" @cancel="cancelTransEnd">
</u-datetime-picker>
maxHour: 23,
minHour: 0,
maxMin: 59,
minMin: 0,
首先就是在确认选择开始时间或结束时间的时候,分别对小时做出限制,因为不能确认开始、结束时间所选择的小时数是否一致,所以目前不能直接去对分钟数进行限制
javascript
confirmTransStart(val) {
this.pageData.startTime = val.value
this.minHour = val.value.split(':')[0]
this.showStartTime = false
}
confirmTransEnd(val) {
this.pageData.endTime = val.value
this.maxHour = val.value.split(':')[0]
this.showEndTime = false
}
到这里已经成功对小时进行了相关限制,这里我们需要使用到组件的change事件,接下来看下具体怎么实现吧
javascript
transStartChange(val) {
if (val.value.split(':')[0] == this.pageData.endTime.split(':')[0]) {
this.maxMin = this.pageData.endTime.split(':')[1]
} else {
this.maxMin = 59
}
}
transEndChange(val) {
if (val.value.split(':')[0] == this.pageData.startTime.split(':')[0]) {
this.minMin = this.pageData.startTime.split(':')[1]
} else {
this.minMin = 0
}
}
现在已经成功完成了要实现的功能,感觉对自己有帮助的小伙伴,留个star吧...