移除iOS Safari日期输入框上的“清除”按钮

Question

在iOS Safari中，是否有可能删除<input type="date">输入字段的"清除"按钮（图示）？ 我已经尝试使用required属性，但在iOS6或iOS7上不起作用。

- Rob Fox

Answer 1

实际上，通过为所有最新的浏览器指定“伪类”，这是非常容易实现的。

如果将输入设置为“required”以消除清除按钮无法起作用...

<input type="date" required="required" />

那么尝试使用-webkit-clear-button伪类来专门为基于Webkit的浏览器进行样式设置：

/* Hide the clear button from date input */

input[type="date"]::-webkit-clear-button {
 -webkit-appearance: none;
  display: none;
}

你还可以探索其他有趣的伪元素来样式化日期输入框。

例如：（隐藏日期输入框中的微调器）

/* Hide the spin button from date input */

input[type="date"]::-webkit-inner-spin-button { 
  -webkit-appearance: none;
  display: none;
}

在IE浏览器上，可以通过针对Internet Explorer 10+指定::-ms-clear伪元素来实现此功能：

input[type="date"]::-ms-clear {
 display: none;
}

我已经在JSFiddle上建立了一个示例，使用特定的伪元素来设置输入日期控件的样式。

此外，您会发现这两个链接非常有用：禁用 time 输入框的清除按钮 和 如何去除日期输入控件中的 x 和上下箭头元素 以下是一篇有关伪元素及其如何用于样式化表单控件的有趣文章：http://goo.gl/Y69VN6。

- Adriano Monecchi

---

是的，确实，“Limpar”在葡萄牙语中的意思是“清除”（to Clear）英语，至少在我们谈论的上下文中是这样。顺便问一下，你有任何进展吗？ - Adriano Monecchi

嘿@Rob Fox，非常抱歉，我完全错过了你的问题的要点...现在仔细查看你提供的图像后，我明白你所说的“删除清除按钮”的意思 - 你是指iPad和iPhone上弹出窗口中的按钮，对吗？我以为你是指日期输入框中的清除按钮，就像这样见图。好的，那我们来研究一下吧！你是在开发Web应用程序还是混合/本地应用程序？ - Adriano Monecchi

啊哈！是的，我正在开发一个混合应用程序，但不知道如何删除这个细节。 - Rob Fox

嘿@RobFox-目前来看，我已经尽力寻找解决此问题的方案，因为我相信除了实现一个javascript/库/框架或甚至是单个JS/jQuery插件来重新创建iOS上与本机体验相似的日期选择器之外，没有其他解决方法。 - Adriano Monecchi

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/49206/discussion-between-rob-fox-and-monecchi - Rob Fox

Answer 2

清除按钮可以通过设置必填属性来禁用 - 这似乎很合理，因为必填输入不应该被清除。

<input type="date" name="foo" value="2018-06-08" required />

已在最新版本的Firefox、Chrome和Edge中进行了测试

- AliBimbali

Answer 3

我尝试了上面提到的所有方法，但都没有成功。

但是您可以通过提及更改事件来处理清除按钮事件。

HTML文件：

<input type="date" (change)="dateChanged($event)" />

当用户点击“清除”时，它会将空字符串作为值发送到此事件中，因此您可以通过检查值是否为空字符串来执行任何想要的操作。以下是代码：

.ts文件代码：

dateChanged(event){
if(event.target.value='' || event.target.value.length==0){
//your code , whatever you want to do when user hit clear in Date control. 
}
}

在我的情况下，当用户点击清除时，我想将今天的日期设置为默认日期。这对我起作用了。

- VyasKuldeep