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

日常小bug集合
BUG

layDate 日期与时间组件

问题描述

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

1
2
3
4
5
6
7
8
9
10
<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'

1
2
3
4
5
6
7
8
9
10
11
<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>