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

需求是:后端返回一个时间段,需要限制只能选择在时间段内的时间,可以选择返回的开始日期和结束日期
比如: 返回的时间是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)日期选择器日期控制问题--范围时间选不到最后一天_第1张图片
原因: 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)日期选择器日期控制问题--范围时间选不到最后一天_第2张图片

你可能感兴趣的:(antdv,antd,vue,日期选择器,rangePicker)