時間選擇外掛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); 
    }
});
複製程式碼