Ant Design 日期选择组件DatePicker 面板默认是英文

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ant Design 日期选择组件DatePicker 面板默认是英文相关的知识,希望对你有一定的参考价值。

参考技术A

在入口文件去添加ConfigProvider解决

ReactJS Ant Design - 在 DatePicker 中禁用小于任何默认日期的日期

【中文标题】ReactJS Ant Design - 在 DatePicker 中禁用小于任何默认日期的日期【英文标题】:ReactJS Ant Design - Disable dates less than any default date in 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 并执行任何逻辑更多、更少或相等,但我看到组件显示今天日期 【参考方案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)) />

希望对你有帮助。

【讨论】:

以上是关于Ant Design 日期选择组件DatePicker 面板默认是英文的主要内容,如果未能解决你的问题,请参考以下文章

ant-design-vue datePicker日期组件中文格式月份与星期显示英文

React & Ant-Design 应用 —— DatePicker 日期选择框 及 特定日期禁用 Moment.JS

React & Ant-Design 应用 —— DatePicker 日期选择框 及 特定日期禁用 Moment.JS

十九React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件

Ant Design Vue 中 DatePicker 日期选择框 使用

ant design datepicker处理日期范围操作