Kiver

HTML

<script src="https://rawgit.com/castrolol/HiClock/master/js/hiClock.js"></script>
<script src="https://rawgit.com/castrolol/HiClock/master/jquery/jquery.hiClock.js"></script>
<link rel="stylesheet" href="https://rawgit.com/castrolol/HiClock/master/css/hi-clock.css">
<div>        
    <h1> It's <span class="lbHra"></span> </h1>
    <span class="date"></span>
    <div class="clock-timepicker"></div>
    <hr/>
    set: <input type="text" class="txtTime" />
    
</div>

CSS

.hi-clock .h-numbers .el {
    box-sizing: border-box;
    line-height: 20px;
    font-size: 20px;
    position: absolute;
    min-width: 35px;
    min-height: 35px;
    border-radius: 100%;
    padding-top: 7px;
    margin-left: -17.5px;
    font-family: 'Helvetica Neue', Roboto, sans-serif;
    left: 50%;
    cursor: pointer;
    transition: background 0.5s ease;
}

.hi-clock .h-numbers .el:hover {
    background: #ccc;
}

JavaScript

$(".clock-timepicker").hiClock({
    theme: "assertive"
});


//set value
$(".txtTime").on("change", function(){
    
    $(".clock-timepicker").hiClock($(this).val());
    
});

//get value
$(".clock-timepicker").on("change", function(e, clock){
    
    var hour = clock.getTime();
    var date = clock.getDate();
    
    $(".date").text(date);    
    $(".lbHra").text(hour);
    
});