输入类型=日期在Android上出现空白

Question

i有一个输入类型=日期，当我在智能手机上打开页面（带Google Chrome的Android）时，输入显示为空白，我没有时钟图标。你知道为什么吗？

<input type="date">

Answer 1

，这意味着它使用nojavascript

，它使其清洁，并消除了在动态创建元素时通常会出现的任何实现问题。 CSS-仅：

.date-picker {
  display: inline-block;
  background: rgba(40, 40, 250, .1);
  min-width: 10rem;
  min-height: 2rem;
  padding: .5rem;
  border-radius: .35rem;
  position: relative;
  isolation: isolate;
}

.date-picker,
.date-picker>* {
  cursor: text;
  font-size: 1.2rem;
}

.date-picker:hover {
  background: rgba(40, 40, 250, .28);
}

.date-picker:active {
  background: rgba(40, 40, 250, .2);
}

.date-picker:focus>input[type="date"],
.date-picker:focus-within>input[type="date"] {
  color: #00f;
}

.date-picker:focus,
.date-picker:focus-within {
  box-shadow: 0 0 0 .1rem #00f;
}

.date-picker>.placeholder::after {
  content: "Click for calender";
  pointer-events: none;
  position: absolute;
  inset: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  color: #222;
}

.date-picker:focus>.placeholder,
.date-picker:focus-within>.placeholder,
.date-picker>input[type="date"]:valid+.placeholder {
  display: none;
}

.date-picker>input[type="date"] {
  background: none;
  border: none;
  outline: none;
  color: transparent;
  font-family: serif;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.date-picker>input[type="date"]:valid {
  color: #00f !important;
}

<div class="date-picker" tabindex="0">
    <input type="date" required>
    <div class="placeholder"></div> 
</div>

替代方案是将当前时间设置为JavaScript的“占位符”，就像这样：

<input type=date id=e>
<script>
  document.getElementById('e').value = new Date().toISOString().substring(0, 10);
</script>

Answer 2