如何更改引导程序表单中日期选择器/日历图标的位置？答案

【问题标题】：How do I change the position of the datepicker/calendar icon in my bootstrap form?如何更改引导程序表单中日期选择器/日历图标的位置？
【发布时间】：2020-07-27 18:42:16
【问题描述】：

我使用 react-bootstrap

并且日历图标或日期选择器自动设置到表单字段的右侧/末尾。我想将日历图标/日期选择器移动到表单字段的左侧/开头，或者它立即跟随日期。我试图找到合适的 node_module 来更改日历图标位置的 CSS 代码，但我找不到它。

那么有谁知道我应该在哪里更改 CSS，或者有更好的解决方法吗？

现在的表单如下所示：

【问题讨论】：

你能把代码贴出来让我们看看你到目前为止做了什么吗？
事件日期
@Olasunkanmi 我想通了，谢谢！

标签： css datepicker react-bootstrap html5-input-date react-bootstrap-form

【解决方案1】：

Are there any style options for the HTML5 Date picker?

我看到了这个帖子，他们的解决方案/建议对我有用。我的具体解决方案如下：

我用以下代码创建了一个新的 css 文件 --

input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 0;
}

input::-webkit-datetime-edit {
  position: relative;
  left: 15px;
}

input::-webkit-datetime-edit-fields-wrapper {
  position: relative;
  left: 15px;
}

然后我将它导入到我的表单文件中并且它起作用了。

【讨论】：

【解决方案2】：

按照@Cody 的回答，它起作用了，但是输入框的日期值向右浮动，像这样开箱即用：

在left 中为edit 做了一个小改动，效果很好：

input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; left: 0; }
input::-webkit-datetime-edit { position: relative; left: 0; }
input::-webkit-datetime-edit-fields-wrapper { position: relative; left: 0; }

这是更改后的外观：

【讨论】：

【解决方案3】：

我还使用了此处的样式选项： Are there any style options for the HTML5 Date picker?

发现这是将日历定位到左侧的最简单方法：

input[type="date"] {
   display: flex;
   flex-flow: row-reverse;
   padding: 8px;
   height: auto;
}

【讨论】：