时间选择插件ClockPicker

ClockPicker官网：http://weareoutman.github.io/clockpicker/

使用上手

• 引入css,js

  基于jquery的ColorPicker要先引入jquery的js

  基于bootstrap的ColorPicker要先引入bootstrap的css,js

    <link th:href="@{/attend/clockpicker/jquery-clockpicker.min.css}" rel="stylesheet">
    <script th:src="@{/attend/clockpicker/jquery-clockpicker.min.js}"></script>
复制代码

• 使用

<div class="input-group clockpicker">
    <input type="text" class="form-control" value="09:30">
    <span class="input-group-addon">
       <span class="glyphicon glyphicon-time"></span>
    </span>
</div>
<script type="text/javascript">
    $('.clockpicker').clockpicker({
        autoclose: true,
        'default': 'now'
    });
</script>
复制代码

• 问题

  在模态框中使用时，会被模态框覆盖

  解决方法： .popover{ z-index:99999; }

• 实现选择多个时间

var clocks1 = "";
$('#clockpicker1').clockpicker({
    placement: 'top',
    align: 'left',
    afterDone: function() {
         clocks1 = clocks1 + $("#periodAdd").val()+";";
         $("#periodAdd").val(clocks1); 
    }
});
复制代码