1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > antd(vue)日期选择器日期控制问题--范围时间选不到最后一天

antd(vue)日期选择器日期控制问题--范围时间选不到最后一天

时间:2022-10-14 21:03:42

相关推荐

antd(vue)日期选择器日期控制问题--范围时间选不到最后一天

需求是:后端返回一个时间段,需要限制只能选择在时间段内的时间,可以选择返回的开始日期和结束日期

比如: 返回的时间是/02/03-/02/27,可以选择他们之间的时间、/02/03和/02/27的时间

部分代码如下:

<template slot-scope="text, record"><a-range-pickerv-if="record.cate"v-model="record.sprintDate":disabled-date="(current) => disabledDate(record, current)" // 选择日期控制:shoe-today="false"style="width: 220px"format="YYYY/MM/DD"value-format="YYYY/MM/DD"@change="(date) => handleStartDate(record, date)"/></template>// 限制日期不让选的方法disabledDate(record, current) {// this.currentExpandRow 后端返回时间const startDate = this.currentExpandRow.startDate || ''const endDate = this.currentExpandRow.endDate || ''return ((current && current < moment(startDate)) ||current > moment(endDate))},

但是发现27号被禁用了

原因: antd使用的是moment库

当声明 moment 对象的时候,如果只声明日期,没有声明时间,时间就是当前时间(日期当然是声明的日期)。

而当前时间一定是在今天之内的,也就是说当判断的时候,当前时间点可能会大于临界值,所以最后一天就不能选择了。

解决: 这时候就需要用到endOf()方法

endOf() 通过将原始的 moment 设置为时间单位的末尾来对其进行更改。

比如:

moment().endOf(“year”) // 将 moment 设置为今年的 12 月 31 日 23:59:59.999

这时候我们就需要添加moment().endOf(“day”),就是设置为当天的23:59:59.999

代码如下

disabledDate(record, current) {// this.currentExpandRow 后端返回时间const startDate = this.currentExpandRow.startDate || ''const endDate = this.currentExpandRow.endDate || ''return ((current && current < moment(startDate)) ||current > moment(endDate).endOf('day'))},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。