Modify Antd Date/Rangepicker

user_1699768 0
Viewed 575

How can I modify the Datepicker component of AntD? I want it to look like this. Is this possible by just clicking the datepicker input? or is there other workaround for this?

Thank you

enter image description here

antd reactjs datepicker
1 Answers

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

user_74163770
Related