如何在输入日期字段上模拟占位符功能？

Question

在日期字段上使用占位符是不可能的，但我确实需要它。

我想要两个日期输入，每个日期输入都有文本“From”和“To”作为占位符。

原文由 Shkarik 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我只使用以下 CSS 技巧：

   input[type="date"]:before {
    content: attr(placeholder) !important;
    color: #aaa;
    margin-right: 0.5em;
  }
  input[type="date"]:focus:before,
  input[type="date"]:valid:before {
    content: "";
  }

 <input type="date" placeholder="Choose a Date" />

原文由 Roman 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用此输入属性事件

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

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container mt-3">
  <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>

原文由 Abdo-Host 发布，翻译遵循 CC BY-SA 4.0 许可协议