Uniapp小程序 时间段选择限制(开始日期 结束日期相互限制)

效果图:

1.  在这里我使用的是uview中的日期时间选择器,初始话的时候将可选的最小时间设置为当前时间的时间戳,并将开始时间的可选的最大时间初始化为10年后(方便之后做限制操作)

<!-- 日期选择-开始 -->
<u-datetime-picker ref="refStart" :show="showStrTimePic" :minDate="minStartTime" :maxDate="maxStartTime" v-model="startPicDate" @confirm="confirmStart" @cancel="cancelStart">
</u-datetime-picker>

<!-- 日期选择-结束 -->
<u-datetime-picker ref="refEnd" :show="showEndTimePic" :minDate="minEndTime" v-model="endPicDate" @confirm="confirmEnd" @cancel="cancelEnd">
</u-datetime-picker>

2. 在确定选择开始时间的时候 将结束时间可选的最小时间设置为所选开始时间的时间戳

// 确认选择开始日期
confirmStart(val) {
	this.startDate = this.DateFormatNumG(val.value, 'Y-M-D H:I')
	this.showStrTimePic = false
	this.minEndTime = val.value
}

3. 在确定选择结束时间的时候 将开始时间可选的最小时间设置为所选结束时间的时间戳

// 确认选择结束日期
confirmEnd(val) {
	this.endDate = this.DateFormatNumG(val.value, 'Y-M-D H:I')
	this.showEndTimePic = false
	this.maxStartTime = val.value
}

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值