logo
Clock picker

A clock-style timepicker for Bootstrap (or jQuery). Demo page.

Usage

To use the plugin, you need to add the following files.

<!-- CSS -->
<link rel="stylesheet" href="libs/clockpicker/bootstrap-clockpicker.min.css" type="text/css">

<!-- Javascript -->
<script src="libs/clockpicker/bootstrap-clockpicker.min.js"></script>

Basic Example

<div class="input-group clockpicker">
    <input type="text" class="form-control" value="09:30"  aria-describedby="button-addon1">
    <button class="btn btn-light" type="button" id="button-addon1">
        <i class="bi bi-clock"></i>
    </button>
</div>
$('.clockpicker').clockpicker();

Auto close

You must add the autoclose:true attribute.

$('.clockpicker-autoclose').clockpicker({
    autoclose: true
});
On this page