reactjs - antd DatePicker 或 RangePicker 如何让日历图标左对齐

Question

日历图标默认对齐到 DatePicker 和 RangePicker 的右侧。

如何向左改变它的位置。

请参阅下图以了解预期行为。

我已经尝试了所有的 Prop nextIcon prevIcon suffixIcon superNextIcon superPrevIcon 但是没有达到预期的行为。

文档:https://ant.design/components/date-picker/

Answer 1

DatePicker 和 RangePicker 的工作代码

此答案是对之前 answer 的更新这适用于日期选择器，但不适用于范围选择器。

RangePicker 的 flex-direction: row-reverse 当前的问题是顺序(图标、结束日期、开始日期)。引用下图

我们可以通过将 order:-1 分配给图标来解决这个问题。

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

最终用户界面: