Layui时间选择器使用总结

    最近在开发中用到了Layui，现在来整理下使用过程中遇到的问题和实现方法。

一、用Layui编写时间范围，时间范围只显示时和分钟。

      Layui的开发文档中介绍的时间范围是包含时、分、秒的，但是现在只想要时和分。实现方法如下：

     1、在html文件中添加如下代码：

<label class="layui-form-label">时间范围</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="test0" id="test0" placeholder=" - ">
 </div>

     2、在css文件中添加如下代码：

<style>
    .layui-laydate-content > .layui-laydate-list {
      padding-bottom: 0px;
      overflow: hidden;
    }
    .layui-laydate-content > .layui-laydate-list > li {
       width: 50%
     }
 </style>

  3、在js文件中添加如下代码：

layui.use(['element', 'form','laydate'], function () {

var laydate = layui.laydate;

//时间范围
    laydate.render({
        elem: '#test0'
        , type: 'time'
        , range: true
        , format: 'H:mm'
    });

}

显示效果如下：

 

4、如果只要显示时，可以修改css文件，其他与时间有关的与以上类似，主要是通过修改css文件来显示不同的时间方式。