从chrome中的日期类型输入中删除占位符[重复]答案

【问题标题】：Remove placeholder from date type input in chrome [duplicate]从chrome中的日期类型输入中删除占位符[重复]
【发布时间】：2014-09-21 00:32:18
【问题描述】：

我有以下输入：

<input class="AccordionLeft" id="operationDate" name="OperationDate" type="date" value="">

这会将日期格式显示为默认占位符。我想删除这个占位符，只留下一个空的输入字段。

如果我这样做：

`$('#operationDate').val('@DateTime.Now.ToString("yyyy-MM-dd")');`

我得到今天的日期作为占位符，但如果我使用这个：

$('#operationDate').val('');

我得到了像dd-mm-yyyy 这样的占位符。占位符可以完全删除吗？我看过几篇关于更改日期格式的帖子，但没有发现任何关于删除占位符的帖子。

【问题讨论】：

您要找的不是更改input 类型吗？从date 到text？或者我没有得到你的问题。
@MelanciaUK - 我希望删除 mm-dd-yyyy 占位符。在选择任何值之前默认显示在输入中的文本。
也许这可以帮助你：stackoverflow.com/questions/11387655/…
@MelanciaUK - 感谢您的回复。我以前看过这个问题。我认为这与显示的日期格式有关。
@Maks3w 也许，但由于我的问题较老，从技术上讲，这是一个重复，而不是相反......

标签： jquery asp.net-mvc html google-chrome date

【解决方案1】：

您可以使用以下样式规则隐藏格式占位符：

<style>
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}
</style>
<input type=date>

【讨论】：

这根本没有效果，而且您还缺少实际的选择器和左大括号。
哦，很抱歉丢失了“{”。但是如果你添加 {. jsfiddle.net/int32_t/DA3Nn
抱歉，youre right. I had something I tried overriding the placeholder. Can you add the missing {` 为了完整起见，我将撤消反对票。谢谢。
只是想补充一下斜线分隔符的选择器是::-webkit-datetime-edit-text:not([aria-valuenow])
这不再有效。

【解决方案2】：

您可以使用onfocus 和onfocusout 以及一些CSS 来实现很好的效果。

&lt;input name="date" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')"&gt;

【讨论】：

这是个好技巧！
完美运行非常原始的解决方案:) gz
应该是<input name="date" type="text" onfocus="(this.type='date')" onblur="if(!this.value)this.type='text'">
人很好，赞！
不幸的是，截至 2016 年 12 月，这不适用于 iOS。它在加载时将输入字段呈现为文本，并且在使用 JS 动态更改输入类型时不会重新呈现