CODEWITHSUNDEEP
reactjsdatepickercomponentsantddaterangepicker
Anjan Talatam
Anjan Talatam

Reputation: 3996

How to align Calendar Icon to left in antd DatePicker or RangePicker

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/

enter image description here

Upvotes: 2

Views: 3991

Answers (3)

Areej Aljeraiwi
Areej Aljeraiwi

Reputation: 9

add

flex-direction: row-reverse

to input css class

Upvotes: 0

Anjan Talatam
Anjan Talatam

Reputation: 3996

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 enter image description here

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: enter image description here

Upvotes: 4

Nouman Rafique
Nouman Rafique

Reputation: 849

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

Upvotes: 3

Related Questions