javascript - 禁用或修改 input[date] 默认按钮/控件和日期选择器

Question

我有一个类型为 date 的 input 字段(用于使用 ngMessages 进行验证):

<input type="date" ng-model="info.date" id="datefield" class="input-field datepicker">

我正在使用自己的 Bootstrap 日期选择器。

我想摆脱默认的日期选择器日历以及 input[date] 具有的默认按钮/控件:

我如何摆脱这些？

如果我无法摆脱这些，我可以使用来自 AngularJS 的默认日历日期选择器，但我该如何设置这些元素(日历和按钮/控件)的样式？

Answer 1

要禁用微调器和选择器，您可以使用(在 Chrome 中):

input::-webkit-calendar-picker-indicator,
input::-webkit-inner-spin-button {
    display: none;
}

您可以通过检查影子 DOM 找到这些伪元素:

Demo