laydate 时间控件去掉秒以及解决在移动端不能滑动的问题

本文介绍了如何使用layui库定制时间控件，以去除秒显示并解决移动端滚动问题。方法一是通过ready回调函数结合JavaScript操作DOM实现，但可能影响用户体验。方法二是利用CSS隐藏秒选项并调整样式。对于移动端滚动问题，通过修改.laydate-time-listol样式的overflow属性，实现了滚动功能。

一、时间控件去掉秒，保留时分
 二、时间控件在移动端不能滚动

一、时间控件去掉秒，保留时分

方法一：使用 `ready` 回调函数

ready 控件在打开时触发。打开控件时让秒消失。

<script>
laydate.render({
  elem: '#endTime', //指定元素
  trigger: "click",
  type: 'time',
  format:'HH:mm',
  ready: noSecond(date)
});
function noSecond(date){
  $(".layui-laydate-list>li:last").css("overflow","hidden");
  $(".layui-laydate-list>li").css("width", "50%")
}
</script>

在这里插入图片描述
因为控件内置的样式中含有动画效果，所以这样写完用户体验不是很好。

方法二：使用css

参考-一粒小米-博客

<style>
  .laydate-time-list{padding-bottom:0;overflow:hidden}
  .laydate-time-list>li{width:50%!important;}
  .laydate-time-list>li:last-child { display: none;}
  .laydate-time-list ol>li:last-child{margin-bottom:.26rem;} 
  /*这里0.26rem大概13像素，添加这个的原因是最后一个选项会被遮挡住，要把它显示出来*/
</style>

在这里插入图片描述

二、时间控件在移动端不能滚动

在这里插入图片描述

当我打开时间控件时，鼠标放在时分上不能滚动，但是我点击选中可见区域的时分后，滚动条就能出现。。。打开控制台选择元素发现有这样一条样式：
在这里插入图片描述
于是改了 overflow:hidden; 为 overflow-x: hidden !important;overflow-y:auto !important;，效果出现了。

<style>
  .laydate-time-list ol{overflow-x: hidden !important;overflow-y:auto !important;}
</style>