输入点击时打开 html5 日期选择器

Question

默认情况下，单击图标时会打开日期选择器。

现在，我希望单击输入字段时出现日期选择器。 我可以通过将图标放大到 100% 宽度来实现此目的，但我无法使其透明，因此根本没有图标，只有文本可见......

我想前几天我已经看到了这个问题的解决方案，但现在我什么也没找到。

如何才能达到想要的效果？ PS：onFocus 解决方案会比 onClick 更好。

input#modified::-webkit-calendar-picker-indicator {
  width: 100%;
  margin: 0;
  border: 1px solid red;
  background: none;
}

Normal: only icon-click shows datepicker 
<input type="datetime-local" ><br>
Modified: click red outline for datepicker
<input type="datetime-local" id="modified">

Answer 1

这对我有用。 这是我以前看到过但没有找到的答案。

Answer 2

这是我在 React 中的做法（是的，我确实使用了 showPicker()，但它的使用方式类似于 e.currentTarget.showPicker()）：

<input
    type="date"
    className="form-control"
    onClick={(e) => e.currentTarget.showPicker() }
/>