Antd DatePicker组件扩展，支持刷新当前最新时间

实现下面的功能，日期选择器，可以自定义刷新icon，点击刷新icon的时候可以刷新当前时间。

看了一下官方文档目前不提供这样子的入口，suffixIcon只是切换后面的图标，但是不可以点击，官方的时间选择器的input框只可以聚焦，但不能点击。

所以考虑手动加一个刷新icon，并把icon和DatePicker放在一起，重新定义边框样式。

antd 版本：DatePicker v5.15

RefreshDatePicker/index.tsx:

import { ReloadOutlined } from '@ant-design/icons';
import { Button, Col, DatePicker, Row } from 'antd';
import dayjs from 'dayjs';

import './index.less';

interface Props {
  timestamp: number; // ms时间戳
  onChangeTime: (date: dayjs.Dayjs) => void;
}

export default function RefreshDatePicker(props: Props) {
  const { onChangeTime, timestamp } = props;

  return (
    <Row justify="space-between" align="middle" className="datepicker-with-refresh-view">
      <Col>
        <DatePicker
          onChange={onChangeTime}
          showTime
          allowClear={false}
          suffixIcon={null} // 不显示icon
          value={dayjs(timestamp)}
          variant="borderless" // 无边框形式，包括hover在输入框的时候，不存在蓝色边框变化
        />
      </Col>
      <Col>
       // 刷新当前的时间
        <Button type="link" onClick={() => onChangeTime(dayjs())} className="datepicker-with-refresh-button">
          <ReloadOutlined />
        </Button>
      </Col>
    </Row>
  );
}

RefreshDatePicker/index.less:

.datepicker-with-refresh-view {
  background: #ffffff; // 重新设置外层box的边框
  border-width: 1px;
  border-style: solid;
  border-color: #d9d9d9;
  border-radius: 8px;
  .ant-picker-borderless {
    padding-right: 0;
  }
  .datepicker-with-refresh-button {
    height: 24px;
    padding: 0;
    margin-right: 11px;
  }
}