需求是:后端返回一个时间段,需要限制只能选择在时间段内的时间,可以选择返回的开始日期和结束日期
比如: 返回的时间是/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'))},