lhoin-jquery-timepicker

A Classic Clock Style Time Picker Plugin | lhoin.jquery.timepicker

by

lhoin.jquery.timepicker is a time picker plugin that enables you to select a time by dragging the hour and minute hands on the watch face.

jquery clock time picker, user friendly time picker, free date & time picker javascript, simple timepicker, time picker css

DateTimePicker based on Material Design | timepicker-ui

How to make use of it:

1. Load the necessary jQuery & jQuery UI libraries into 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 a blank item to display the time the user has selected.

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

3. Create an Html for a 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>

4. CSS to design 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;
}

5. 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);
    }
  });
});

Classic Clock Style Time Picker Plugin, lhoin.jquery.timepicker Github

See Demo And Download

Download

Official Website(LHoin): Click Here

This superior jQuery/javascript plugin is developed by LHoin. For extra Advanced Usages, please go to the official website.

Leave a Comment