如何将日历图标与antd datepicker或rangepicker中的剩余时间对齐

发布于 2025-01-22 13:21:27 字数 481 浏览 0 评论 0原文

日历图标默认为datepicker和rangepicker的权利。

如何将其位置更改为左侧。

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

我已经尝试了所有Props nexticon previcon suffixicon supernexticon superprevicon没有达到预期的行为。

docs：

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

油饼 2025-01-29 13:21:27

datePicker和rangepicker的工作代码

此答案是对先前答案答案使用日期选择器，但没有范围选择器。

flex方向的当前问题：rangepicker的行反向与订单（图标，结束日期，开始日期）。请参阅下图

我们可以通过将顺序分配给图标来解决此问题。

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

最终UI：

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:

回复收藏 0 原文

余生共白头 2025-01-29 13:21:27

您可以使用以下样式将图标从右到左对齐。

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

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

回复收藏 0 原文