没有日期选择器的html日期输入

Question

我有一个简单的日期输入

<input type="date" id="sign-up-dob" class="sign-inputs" max="2999-12-31"></input>

它看起来像这样：

我将如何摆脱打开日期选择器右侧的箭头和东西。我只是想要它，以便您可以输入带有验证的日期，谢谢。

Answer 1

只需pattern在文本输入上使用该属性：

input:invalid {
    color: red;
}

[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

<label>Input Date (YYYY-MM-DD):
<input type="text" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
</label>

<input type="date" />