Classic Clock Style Time Picker Plugin For jQuery

A fancy time picker plugin which enable you to select a time by dragging the hour and minute hands on a clock interface.

See also:

• KitKat Clock-Style Timer Picker with jQuery and CSS3 - KitKatClock
• jQuery Plugin To Select The Time Form A Clock-Style Interface

How to use it:

1. Load the necessary jQuery & jQuery UI libraries in the document.

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

2. Create an empty element to display the user selected time.

<div id="time"></div>

3. Create the Html for the clock style time picker.

<div class="timepicker">
  <div class="meridiem">
    <div class="ante seleted">AM</div>
    <div class="post">PM</div>
  </div>
  <div class="hour">
    <div class="pointer"></div>
  </div>
  <div class="minute">
    <div class="pointer"></div>
  </div>
  <div class="mask"></div>
</div>

3. The CSS to style the time picker.

.timepicker {
  background: white url('clockface.jpg') no-repeat scroll center;
  width: 300px;
  height: 300px;
  background-size: 100% 100%;
  position: relative;
  margin-left: 100px;
  margin-top: 100px
}

.timepicker .hour {
  position: absolute;
  width: 10px;
  height: 120px;
  left: 50%;
  top: 50%;
  margin-top: -60px;
  margin-left: -5px;
  z-index: 100;
  cursor: pointer;
}

.timepicker .minute {
  position: absolute;
  width: 6px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -3px;
  z-index: 50;
  cursor: pointer;
}

.timepicker .hour .pointer {
  background-color: black;
  width: 10px;
  height: 60px;
}

.timepicker .minute .pointer {
  background-color: black;
  width: 6px;
  height: 100px;
}

.timepicker .hour .hover { background-color: red }

.timepicker .minute .hover { background-color: red }

.timepicker .meridiem {
  border: 1px solid #eee;
  width: 100px;
  left: 50%;
  bottom: 20%;
  margin-left: -50px;
  position: absolute;
  z-index: 30;
  cursor: pointer;
}

.timepicker .meridiem .ante,
.timepicker .meridiem .post {
  float: left;
  width: 50px;
  text-align: center;
}

.timepicker .meridiem .seleted { background-color: #eee; }

.rotate {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg); /* IE 9 */
  -webkit-transform: rotate(60deg); /* Safari and Chrome */
}

.timepicker .mask {
  position: absolute;
  width: 300px;
  height: 300px;
  z-index: 0;
  cursor: pointer;
}

4. Enable the plugin and output the time to the empty container you just created.

$(function(){
  $(".timepicker").timepicker({
    change: function(e){
      $("#time").html(e.hour + ":" + e.minute + "  " + e.meridiem + " = " + e.hour24 + ":" + e.minute);
    }
  });
});

 

---

This awesome jQuery plugin is developed by LHoin. For more Advanced Usages, please check the demo page or visit the official website.