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日期组件