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

Posted 2023-02-25

【中文标题】从chrome中的日期类型输入中删除占位符[重复]

【英文标题】：Remove placeholder from date type input in chrome [duplicate]

【发布时间】：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 占位符。在选择任何值之前默认显示在输入中的文本。

也许这可以帮助你：***.com/questions/11387655/…

@MelanciaUK - 感谢您的回复。我以前看过这个问题。我认为这与显示的日期格式有关。

@Maks3w 也许，但由于我的问题较老，从技术上讲，这是一个重复，而不是相反......

【参考方案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 来实现很好的效果。

<input name="date" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')">

【讨论】：

这是个好技巧！

完美运行非常原始的解决方案:) gz

应该是<input name="date" type="text" onfocus="(this.type='date')" onblur="if(!this.value)this.type='text'">

人很好，赞！

不幸的是，截至 2016 年 12 月，这不适用于 ios。它在加载时将输入字段呈现为文本，并且在使用 JS 动态更改输入类型时不会重新呈现