Modify Antd Date/Rangepicker

You can play around with the prop renderExtraFooter and add styles to place it on top

Example:

Code:

<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>

Style:

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

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

Result:

Example

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top