DatePicker2

输入或选择日期的控件。当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。

开发指南 #

从 DatePicker 升级到 DatePicker2 #

1.22版本增加当前组件

功能变化：

• 交互重构，面板和输入框分离，优化底部扩展等
• 使用 dayjs 日期库替换了 moment
• 新增WeekPicker 和 QuarterPicker 选择器
• 新增了 preset 属性，支持预设日期

API变化：

• 移除了 defaultVisibleMonth 属性，请使用 defaultPanelValue 替代（仅名字替换）
• 移除了 footerRender 属性，请使用 extraFooterRender 替代
• showTime 之前属性类型既支持 Boolean 也支持 Object；现升级为仅支持 Boolean 类型，使用 timePanelProps 来传入时分秒的时间选择属性
• onChange 和 onOk 等事件返回日期对象为 Dayjs 类型

国际化 #

日期的国际化包括组件的国际化跟日期库dayjs的国际化两部分。

import { DatePicker2, ConfigProvider } from '@alifd/next';
import 'dayjs/locale/en'; // 组件库国际化
import en from '@alifd/next/lib/locale/en-us'; // 组件国际化

function App() {
    return (
        <ConfigProvider locale={en}>
          <DatePicker2 />
        </ConfigProvider>
    );
}
ReactDOM.render(<App />, mountNode);

代码演示 #