Search code examples
reactjsdatepickercomponentsantddaterangepicker

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

Solution

  • 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