Calendar Icon is aligned to the right of DatePicker and RangePicker by default.
How to change its position to the left.
Refer to the image below to understand the expected behavior.
I have tried all the props nextIcon prevIcon suffixIcon superNextIcon superPrevIcon but didn't achieve the expected behavior.
Docs: https://ant.design/components/date-picker/
You can use the following styles to align icon to from right to left.
.ant-picker .ant-picker-input,
.ant-picker.ant-picker-range {
display: flex;
flex-direction: row-reverse;
}
.ant-picker .ant-picker-input span.ant-picker-suffix,
.ant-picker.ant-picker-range span.ant-picker-suffix {
margin-left: 0;
margin-right: 5px;
}
Working code for both DatePicker and RangePicker
This answer is an update on the previous answer which works fine with the date picker but not with the range picker.
The current issue with flex-direction: row-reverse for RangePicker is with the order ( Icon, End Date, Start Date ). Refer image below
We can solve this issue by assigning order:-1 to the icon.
.ant-picker .ant-picker-input span.ant-picker-suffix,
.ant-picker.ant-picker-range span.ant-picker-suffix {
margin-left: 1px;
margin-right: 10px;
order: -1;
}
Final UI:
