ClockPicker website: http://weareoutman.github.io/clockpicker/

Used to fit

  • The introduction of CSS, js

    Jquery-based ColorPicker starts with jquery js

    Bootstrap-based ColorPicker will first import bootstrap CSS, JS

    <link th:href="@{/attend/clockpicker/jquery-clockpicker.min.css}" rel="stylesheet">
    <script th:src="@{/attend/clockpicker/jquery-clockpicker.min.js}"></script>
Copy the code
  • use
<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>
Copy the code

  • The problem

    When used in a modal frame, it is overwritten by the modal frame

    Popover {z-index:99999; popover{z-index:99999; }

  • Implementation selects multiple times

var clocks1 = "";
$('#clockpicker1').clockpicker({
    placement: 'top',
    align: 'left',
    afterDone: function() {
         clocks1 = clocks1 + $("#periodAdd").val()+";";
         $("#periodAdd").val(clocks1); }});Copy the code