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);
}
});
复制代码