Antd的DatePicker组件限制时间的选择

751 阅读1分钟

在使用Ant Design的 日期选择组件(DatePicker)时,有时需要限制今天以前的日期不可选中,官方也给出了对应参数,用disabledDate 传入不可选择的日期

微信截图_20231017161133.png

!!前提确保安装了moment

npm i moment

使用 DatePicker 组件

<DatePicker disabledDate={disabledDate}/>

disabledDate 根据以下情境选择,如今天是2023.10.17

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

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

明天及之后的日期(今天不可选中).png

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

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

明天及之后的日期(今天可选中).png

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

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

昨天及之前的日期(今天不可选中).png

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

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

今天及之前的日期(今天可选中).png