layDate 组件闪退（在苹果电脑上表现为点击无效）

2020.11.12

layDate 日期与时间组件 (opens new window)

问题描述

layDate 组件在计算组件出现的位置的时候，如果 input 元素距离网站底部的高度不够高的话，layDate 组件会出现在 input 上方，出现在上方的时候由于动画transform: translate3d(0,20px,0),使得组件出现的时候，点击输入框会点到组件本身，Windows 上的表现为闪退，在苹果电脑上表现为点击无效

<input
  type="text"
  class="session-picker"
  autocomplete="off"
  id="sessionPicker"
  placeholder="请选择时间段"
/>
<script>
  laydate.render({
    elem: "#sessionPicker", //指定元素
    type: "time",
    range: true,
    theme: "#6fb3e0",
    format: "H:mm",
  });
</script>

解决方式

增加一个属性trigger: 'click'

<input
  type="text"
  class="session-picker"
  autocomplete="off"
  id="sessionPicker"
  placeholder="请选择时间段"
/>
<script>
  laydate.render({
    elem: "#sessionPicker", //指定元素
    type: "time",
    range: true,
    trigger: "click",
    theme: "#6fb3e0",
    format: "H:mm",
  });
</script>