1

我们在使用antd-vue的日期选择组件时,有时需要限制今天以前的日期不可选中,要怎么实现呢?

官方给出的参数,用 disabledDate 传入不可选择的日期
在这里插入图片描述
在这里插入图片描述
前提确保安装了moment

npm i moment

废话不多说,直接上代码:

<a-date-picker
  :disabledDate="disabledDate"
>
</a-date-picker>
methods: {
    moment,
}

methods 中 的disabledDate 根据以下情境选择,今天是2021.03.25

一、限制只能选明天及之后的日期(今天不可选中)

disabledDate (current) {
  return current && current < moment().endOf('day')
},

在这里插入图片描述

二、限制只能选今天及之后的日期(今天可选中)

disabledDate (current) {
  return current && current < moment().subtract(1, 'days').endOf('day')
},

在这里插入图片描述

三、限制只能选昨天及之前的日期(今天不可选中)

disabledDate (current) {
  return current && current > moment().subtract(1, 'days').endOf('day')
},

在这里插入图片描述

四、限制只能选今天及之前的日期(今天可选中)

disabledDate (current) {
  return current && current > moment().endOf('day')
},

在这里插入图片描述


smile1213
207 声望17 粉丝

程序媛一枚