一、时间控件去掉秒,保留时分
二、时间控件在移动端不能滚动
一、时间控件去掉秒,保留时分
方法一:使用 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>