替换 Moment.js
第一种方法是使用 (或 generateCalendar
)辅助创建 Picker 组件。
我们先初始化一个 create-react-app
的 antd demo,你可以参考 进行构建,也可以直接从这里开始init antd
新建 src/components/DatePicker.tsx
。
编写如下代码:
新建 src/components/TimePicker.tsx
。
import { Dayjs } from 'dayjs';
import DatePicker from './DatePicker';
import { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
import { Omit } from 'antd/es/_util/type';
export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'> {}
const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => {
return <DatePicker {...props} picker="time" mode={undefined} ref={ref} />;
});
export default TimePicker;
新建 src/components/Calendar.tsx
。
编写如下代码:
导出自定义组件
新建 src/components/index.tsx
。
编写如下代码:
export { default as DatePicker } from './DatePicker';
export { default as Calendar } from './Calendar';
修改 src/App.tsx
,引入 dayjs
和自定义的组件。
如果你需要 JavaScript 代码,你可以参考 。
如果你熟悉 umi,你可以参考 。
我们还提供另一种实现方式。使用 antd-dayjs-webpack-plugin
插件,无需对现有代码做任何修改直接替换成 Day.js
。请参考 antd-dayjs-webpack-plugin。
// webpack-config.js
import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';
module.exports = {
// ...
};
目前支持和 dayjs 类似的自定义组件方法,区别在于使用的参数类型不同,在 antd 4.5.0 以上版本提供支持。
做一个简单的例子:
编写如下代码: