禁用或修改输入[日期]默认按钮/控件和日期选择器

Question

我有input类型的date字段（使用ngMessages进行验证）：

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

我正在使用自己的Bootstrap datepicker。

我想摆脱默认的datepicker日历以及input[date]所拥有的默认按钮/控件：

我如何摆脱这些？

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

Answer 1

要禁用您可以使用的微调器和选择器（在Chrome中）：

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

您可以通过检查阴影DOM来找到这些伪元素：

Demo