实例

默认

<div class="input-group clockpicker"> 
  <input type="text" class="form-control" value="09:30"> 
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-time"></i> 
  </span> 
</div> 
<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>

显示在左侧，箭头自动对齐在顶部，并自动关闭。

<div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true"> 
  <input type="text" class="form-control" value="13:14"> 
    <span class="input-group-addon"> 
      <i class="glyphicon glyphicon-time"></i> 
    </span> 
</div> 
<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>

通过 JavaScript 设置配置项，代替 data-*

<div class="input-group clockpicker"> 
  <input type="text" class="form-control" value="18:00"> 
  <span class="input-group-addon"> 
    <i class="glyphicon glyphicon-time"></i> 
  </span> 
</div> 
<script type="text/javascript">
$('.clockpicker').clockpicker({
    placement: 'top',
    align: 'left',
    donetext: 'Done'
});
</script>

设置默认值，不使用输入框组，自定义操作：

<input class="form-control" id="single-input" value="" placeholder="Now">
<button type="button" id="check-minutes">Check the minutes</button>

<script type="text/javascript">
var input = $('#single-input').clockpicker({
    placement: 'bottom',
    align: 'left',
    autoclose: true,
    'default': 'now'
});

// Manually toggle to the minutes view
$('#check-minutes').click(function(e){
    // Have to stop propagation here
    e.stopPropagation();
    input.clockpicker('show')
          .clockpicker('toggleView', 'minutes');
});
</script>

事件回调

<div class="input-group clockpicker-with-callbacks">
  <input class="form-control" value="10:10" type="text">
  <span class="input-group-addon">
    <i class="glyphicon glyphicon-time"></i>
  </span>
</div>
<script type="text/javascript">
var input = $('.clockpicker-with-callbacks').clockpicker({
    donetext: 'Done',
    init: function() { 
        console.log("colorpicker initiated");
    },
    beforeShow: function() {
        console.log("before show");
    },
    afterShow: function() {
        console.log("after show");
    },
    beforeHide: function() {
        console.log("before hide");
    },
    afterHide: function() {
        console.log("after hide");
    },
    beforeHourSelect: function() {
        console.log("before hour selected");
    },
    afterHourSelect: function() {
        console.log("after hour selected");
    },
    beforeDone: function() {
        console.log("before done");
    },
    afterDone: function() {
        console.log("after done");
    }
});
</script>