laydate 时间控件去掉秒以及解决在移动端不能滑动的问题
生活随笔
收集整理的這篇文章主要介紹了
laydate 时间控件去掉秒以及解决在移动端不能滑动的问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、時間控件去掉秒,保留時分
二、時間控件在移動端不能滾動
一、時間控件去掉秒,保留時分
方法一:使用 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;,效果出現了。
總結
以上是生活随笔為你收集整理的laydate 时间控件去掉秒以及解决在移动端不能滑动的问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: layui 关于layDate设置时间限
- 下一篇: 使用echarts时,鼠标首次移入屏幕会