Ant Design DatePicker 二次开发实战：使用 TypeScript 和 JSX 构建自定义日期选择器

以下是基于 ant design 的 DatePicker 组件进行二次开发的例子，使用 TypeScript 和 JSX：

import React from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';

interface CustomDatePickerProps {
  format?: string;
  value?: Date;
  onChange?: (date: Date) => void;
}

// 继承 ant design 的 DatePicker 组件，并添加自定义的 props 和默认值
const CustomDatePicker = ({
  format = 'YYYY-MM-DD',
  value,
  onChange,
}: CustomDatePickerProps) => {
  // 将 Date 类型的 value 转换为 moment 类型，以便在 ant design 的 DatePicker 组件中使用
  const momentValue = value ? moment(value) : undefined;

  // 将 moment 类型的 date 转换为 Date 类型，以便在 onChange 回调中返回
  const handleOnChange = (date: moment.Moment | null) => {
    if (onChange) {
      onChange(date ? date.toDate() : undefined);
    }
  };

  return (
    <DatePicker
      format={format}
      value={momentValue}
      onChange={handleOnChange}
    />
  );
};

export default CustomDatePicker;

在这个例子中，我们创建了一个名为 'CustomDatePicker' 的组件，它继承了 ant design 的 'DatePicker' 组件，并添加了一些自定义的 props 和默认值。我们还在组件内部处理了从 'Date' 类型到 'moment' 类型和从 'moment' 类型到 'Date' 类型的转换。这样，我们就可以在使用 'CustomDatePicker' 组件时，直接传递 'Date' 类型的值，而不需要手动进行转换。

使用 'CustomDatePicker' 组件的示例：

import React, { useState } from 'react';
import CustomDatePicker from './CustomDatePicker';

const Example = () => {
  const [value, setValue] = useState<Date>();

  const handleOnChange = (date: Date) => {
    setValue(date);
  };

  return (
    <div>
      <CustomDatePicker value={value} onChange={handleOnChange} />
      <p>Selected date: {value ? value.toISOString() : 'None'}</p>
    </div>
  );
};

export default Example;

在这个示例中，我们使用 'useState' hook 来管理 'CustomDatePicker' 组件的值。当用户选择日期时，'CustomDatePicker' 组件会调用 'handleOnChange' 回调函数，将选中的日期转换为 'Date' 类型，并将其更新到状态中。我们还在页面上显示了选中的日期，以便进行验证。