我司一个公众号项目，突然有用户反馈注册时日期选择器被遮挡选择不了时间，反馈如下图 1，无法左右滑动也无法切换年月。

我的第一反应是，好家伙，iOS 的日期选择啥时候变成这样的了，我印象中还一直停留在图 2。

因为当时直接使用的 <input type="date">, 所以很确定就是兼容问题，对比了多个微信版本、iOS 版本，发现日期选择器的系统样式可能不只两种。

上图依次为 iOS13、iOS14、iOS14.2 版本上微信 H5 调用date的选择器样式。但只有 iOS14.2 上有选择问题。
因此我写了以下 4 种情况的选择器分别在 iOS14.2 上的微信 7.0.17、Safari、Chrome 中进行测试：

<div class="div">
  <span>1. 有label 无placeholder</span>
  <div>
    <label for="date">生日</label>
    <input ref="date" type="date" id="date" value="2020-11-11" />
  </div>
</div>

<div class="div">
  <span>2. 无label 有placeholder</span>
  <div>
    <input ref="date" type="date" id="date" value="2020-11-11" placeholder="请输入你的生日" />
  </div>
</div>

<div class="div">
  <span>3. 有label 有placeholder</span>
  <div>
    <label for="date">生日</label>
    <input ref="date" type="date" id="date" value="2020-11-11" placeholder="请输入你的生日" />
  </div>
</div>

<div class="div">
  <span>4. 无label 无placeholder</span>
  <div>
    <input ref="date" type="date" id="date" value="2020-11-11" />
  </div>
</div>

测试视频如下：

结论

微信内置浏览器在 iOS14.2 的兼容有问题，所以如果使用<input type="date">而且添加了label或placeholder属性，选择器就会无法正常切换。

I’m fine。