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文件來顯示不同的時間方式。