【问题标题】:ReactJS Ant Design - Disable dates less than any default date in DatePickerReactJS Ant Design - 在 DatePicker 中禁用小于任何默认日期的日期
【发布时间】:2019-04-25 22:28:52
【问题描述】:

antd framework 上工作,我正在尝试禁用小于给定 defaultDate 的 DatePicker 日期,我无法以任何方式正确设置。情况是说日期选择器的 defaultDate 是 2028-12-20 所有日期都应在此以下禁用..

执行此操作的回调如下

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

其中 current = defaultDate 已提供它不会改变,我不知道如何做到这一点..

我已经创建了一个沙盒here

任何帮助将不胜感激。

谢谢。

【问题讨论】:

  • 请检查这个codesandbox.io/s/p34o4v7wlj,这是你要找的吗?
  • 我更新了一个例子codesandbox.io/s/p34o4v7wlj
  • @EugeneDzhevadov 它现在已禁用所有日期..
  • 所以,current 是从组件传递的,我的猜测是它总是今天,但是您可以定义一个 default 值而不是 current 并执行任何逻辑更多、更少或相等,但我看到组件显示今天日期

标签: javascript reactjs antd ant-design-pro


【解决方案1】:

可以通过以下方式完成:

disabledDate(current) {
  let customDate = "2018-11-25";
  return current && current < moment(customDate, "YYYY-MM-DD");
}

这里是working demo

【讨论】:

  • 太棒了,这似乎工作正常,我当时叫错了方式.. 非常感谢。
  • 比你,但我需要在日历日期应该只在当前日期前 7 天启用
  • current && current > moment() 禁用未来日期 ;)
【解决方案2】:

此外,您可以通过启用可用的日期范围/时段来禁用日期。

npm install date-fns

添加或子天的包裹。

import {subDays, addDays } from 'date-fns'

最终代码

<DatePicker 
disabledDate={d => !d || d.isAfter(addDays( new Date(), 7)) || d.isSameOrBefore(subDays( new Date(), 1)) }/>

希望对你有帮助。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-07-16
    • 1970-01-01
    • 1970-01-01
    • 2010-12-11
    • 1970-01-01
    • 2023-01-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多