Angular：如何更改输入类型 =“日期”占位符值

Posted 2023-03-05

【中文标题】Angular：如何更改输入类型 =“日期”占位符值

【英文标题】：How do I change the input type="date" placeholder value in Angular?

【发布时间】：2019-08-22 15:58:43

【问题描述】：

我遇到过这个问题并找到了很多解决方案，但没有一个适合我的问题。

<input type="date" #evtDate required name="evtDate" placeholder="Select Event Date" id="evtDate" formControlName="eventDate">

在浏览器上显示为：

我想在这里显示一个字符串占位符，例如：

我使用 CSS 实现了这一点，

input[type="date"]::before 
  content: attr(placeholder);
  width: 100%;

input[type="date"]:focus::before,
input[type="date"]:valid::before  display: none 

这部分有问题，当我点击它的日期图标时，日期输入再次变为正常格式，如：

如果我不使用此 CSS 部分，它仍会显示自定义占位符值，但不会更新输入中的任何内容。

// input[type="date"]:focus::before,
   // input[type="date"]:valid::before  display: none 

我还检查了是否为此输入 type="data" 创建了一些动态 html，并且需要保留这些动态 HTML 以将数据设置为该格式。

谁能建议如何做到这一点？提前致谢！

【问题讨论】：

你试过this one吗？

@Gaspar 是的，它起作用了。在我重置表单的一种情况下，我只是从输入控件中删除附加的“has-value”类，然后它也会正确重置。谢谢:)

很高兴知道 :)，现在尝试 Firefox，因为“不适用于 Firefox。- 2018 年 2 月 2 日 17:29 的 Patronaut”

【参考方案1】：

你可以试试这些代码

<input type="text" placeholder="Date" onfocus="(this.type='date')"/>

【参考方案2】：

onfocus="(this.type='date')" onblur="(this.type='text')"

HTML<------>
  <div">
    <label for="date">Date : </label>
    <input placeholder="Your Date" class="form-control" type="text" onfocus=" . 
    (this.type='date')" onblur="(this.type='text')" id="date">
  </div>

【讨论】：

这不起作用。在焦点上，首先将视图更改为 input type="date"，然后将占位符从“Select Event Date”替换为“mm/dd/yyyy”，然后我可以执行任何操作。

第一次看到占位符“YOUR TEXT”时，当您单击输入类型已更改并且视图更改为日期格式时，当您清除输入时会返回文本