<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script> <div class="page-content page-container" id="page-content"> <div class="padding"> <div class="row container d-flex justify-content-center"> <div class="col-md-8 grid-margin stretch-card"> <div class="clearfix"> <div class="input-group clockpicker pull-center" data-placement="left" data-align="top" data-autoclose="true"> <input type="text" class="form-control" value="13:14"> <span class="input-group-addon"> <span class="fa fa-clock-o"></span> </span> </div> </div> </div> </div> </div> </div>

.navbar h3 { color: #f5f5f5; margin-top: 14px } .hljs-pre { background: #f8f8f8; padding: 3px } .footer { border-top: 1px solid #eee; margin-top: 40px; padding: 40px 0 } .input-group { width: 110px; margin-bottom: 10px } .pull-center { margin-left: auto; margin-right: auto } @media (min-width: 768px) { .container { max-width: 730px } } @media (max-width: 767px) { .pull-center { float: right } } .input-group-addon { padding: 6px 12px; font-size: 14px; font-weight: 400; line-height: 1; color: #555; text-align: center; background-color: #eee; border: 1px solid #ccc; border-radius: 4px } .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:first-child>.btn-group:not(:first-child)>.btn { border-bottom-left-radius: 0; border-top-left-radius: 0 } .fa { position: relative; top: 5px; display: inline-block; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .page-container { margin-top: 100px }

$( document ).ready(function() { $('.clockpicker').clockpicker() .find('input').change(function(){ console.log(this.value); }); var input = $('#single-input').clockpicker({ placement: 'bottom', align: 'left', autoclose: true, 'default': 'now' }); });