layui时间选择器只选择时和分，不显示秒

最新推荐文章于 2024-01-17 13:26:51 发布

原创最新推荐文章于 2024-01-17 13:26:51 发布 · 796 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端

本文介绍了如何使用CSS和JavaScript方式修改layui时间选择器，使其只显示小时和分钟，隐藏秒数。通过添加特定的CSS类和调整元素样式，以及在laydate渲染时使用ready回调函数实现这一功能。

layui时间选择器只选择时和分，不显示秒；

css 方式

<style>
.laydate-theme-hhmm .laydate-time-list>li {
    width: 50%;
}
.laydate-theme-hhmm .laydate-time-list>li:last-child {
    display: none;
}


</style>

laydate.render({
    elem: '#id'
    ,type: 'time'
    ,theme: 'hhmm' //关键地方
    ,format: 'HH:mm' 
  });

我的页面是php混写的 theme: ‘hhmm’ 这种不太好用，就用了下面js的只需要把 ready: function(date)方法复制到自己想要放的地方就可以了

js方式

laydate.render({
    elem: '#id'
    ,type: 'time'
    ,format: 'HH:mm'  
    ,ready: function(date){
    var layKey = layui.$(this.elem).attr('lay-key');
    layui.$('#layui-laydate' + layKey).find('.layui-laydate-list>li').width('50%').last('li').hide();
  }
  });