修改antd Date/Rangepicker

Question

如何修改AntD的Datepicker组件？我希望它看起来像这样。只需单击日期选择器输入就可以吗？还是有其他解决方法？

谢谢

Answer 1

您可以玩转道具 renderExtraFooter 并添加样式以将其放在顶部

示例：

代码：

<Space direction="vertical" size={12}>
    <RangePicker
        renderExtraFooter={
            () => {
                return <Radio.Group name="radiogroup" defaultValue={1}>
                            <Radio value={1}>Start of Evaluation</Radio>
                            <Radio value={2}>End of Evaluation</Radio>
                       </Radio.Group>
                }
        }
    />
</Space>

风格：

.ant-picker-panels {
  margin-top: 50px;
}

.ant-picker-footer {
  position: absolute;
  top: 10px;
  border-bottom: 1px solid #303030 !important;
}

结果：

修改antd Date/Rangepicker

Modify Antd Date/Rangepicker

datepicker

reactjs

antd

示例：