覆写layui laydate css,时间显示小时和分钟

问题引入:

在使用layui laydate时间控件,显示时间,时分秒都会显示,然而目前暂未提供只显示 小时 和 分钟 的类型。怎么办呢?

当时我换了一种思维,在不修改源代码的情况下,看是否能覆盖laydate ,将显示“秒”的那列给隐藏掉。经过测试,果然,这是可以的。如下:

(1)在我们页面里面加入下面css:

/********start 覆盖laydate默认样式,用于显示小时和分钟********/
        .layui-laydate-content>.layui-laydate-list {
            padding-bottom: 0px;
            overflow: hidden;
        }
        .layui-laydate-content>.layui-laydate-list>li{
            width:50%
        }
        /********end 覆盖laydate默认样式,用于显示小时和分钟********/

虽然可以把 秒 那列隐藏掉,但还需要注意一点:

在laydate 渲染js代码里,把其format修改成HH:mm,这样才能最终效果,完美O(∩_∩)O~

laydate.render({
                elem:'#startTime',
                type:'time' ,
                format:'HH:mm',//显示格式:小时:分钟
                min:'08:00:00',
                max: '23:30:00',
            });

最终效果如下:

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值