1. 问题描述
在使用Ant Design Vue实现设置日期禁用范围需求时，规定好日期选择范围后，首次选择日期时所规定的结束日期为禁用状态不可选，而第二次选择日期时所规定的结束日期又可选了。
原代码如下：
<template>
<a-date-picker
class="date-picker"
:value="BEGIN_DATE"
:disabledDate="(date) => disabledStartDate"
placeholder=""
:allowClear="false"
/>
</template>
<script>
import $moment from 'moment'
export default {
data () {
return {
BEGIN_DATE: null,
startDate: '20210203',
endDate: '20220319'
}
},
methods: {
disabledStartDate (date, record, index) {
const begin = $moment(this.startDate, 'YYYYMMDD')
const end = $moment(this.endDate, 'YYYYMMDD')
return date.valueOf() < begin || date.valueOf() > end
}
}
}
</script>
可以看到我在这里限制的可选日期范围是20210203-20220319，包括当日，而首次打开日期选择框时20220319是禁用的
当我选择了一个日期后再次打开日期选择框时20230319又变为了可选状态
经过多番查找终于在网上找到了问题原因：disabledStartDate方法中使用了moment.js库来处理日期。在比较日期时使用了valueOf()方法，这会返回日期的毫秒数，而此时打印出来的end结果如下：Sat Mar 19 2022 00:00:00 GMT+0800 (中国标准时间)。
2. 修改后的代码
在获取end的值时使用.endOf（'day'）对日期规范化处理一下：
<template>
<a-date-picker
class="date-picker"
:value="BEGIN_DATE"
:disabledDate="(date) => disabledStartDate"
placeholder=""
:allowClear="false"
/>
</template>
<script>
import $moment from 'moment'
export default {
data () {
return {
BEGIN_DATE: null,
startDate: '20210203',
endDate: '20220319'
}
},
methods: {
disabledStartDate (date, record, index) {
const begin = $moment(this.startDate, 'YYYYMMDD')
const end = $moment(this.endDate, 'YYYYMMDD').endOf('day') // 使用.endOf('day')来规范化日期，以便忽略时间部分，确保日期的比较是按照日期的开始和结束来进行
return date.valueOf() < begin || date.valueOf() > end
}
}
}
</script>
至此，问题解决~
附：
moment常用方法:
moment().endOf('day') // 今天的23:59:59.999
moment().endOf('year') // 今年的 12 月 31 日 23:59:59.999,还可以填month,week,hour等
moment().add(1, 'months') // 当前月份加一月,如今天2021-05-25,得到就是2021-06-25
moment().add(1, 'year') // 当前年加一年,如今天2021-05-25,得到就是2022-05-25
moment().subtract(1, 'months') // 当前月份减一月,如今天2021-05-25,得到就是2021-04-25
moment().subtract(1, 'year') // 当前年减一年,如今天2021-05-25,得到就是2020-05-25
var a = moment('2021-05-18');
var b = moment('2020-04-16');
a.diff(b, 'years') // b-a的年份
a.diff(b, 'days') // b-a的日期
moment().date() // 今天的日期
moment().day() // 今天是星期几
moment().year() // 今年的年份
moment().year(2022) // 设置年份为2022
moment.js官方文档 momentjs.cn/docs/#/mani…
