欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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(vue)日期选择器日期控制问题--范围时间选不到最后一天
原因: 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')
      )
    },

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