antd(vue)日期选择器日期控制问题--范围时间选不到最后一天
程序员文章站
2022-06-07 09:57:19
...
需求是:后端返回一个时间段,需要限制只能选择在时间段内的时间,可以选择返回的开始日期和结束日期
比如: 返回的时间是2021/02/03-2021/02/27,可以选择他们之间的时间、2021/02/03和2021/02/27的时间
部分代码如下:
<template slot-scope="text, record">
<a-range-picker
v-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')
)
},
上一篇: 笑爆,这波老婆可不是盖的