Small Time Picker Plugin For jQuery - timePicker

A dead simple jQuery time picker plugin that creates input fields of hour/minute/second for selecting time with ease.

How to use it:

1. Download the plugin and load the JavaScript file pickerjs.js after jQuery library.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="TimePicker/pickerjs.js"></script>

2. Create a normal text field to accept the time input. Clicking on the text field will popup up a time picker interface from your screen.

<input type="text" class="timepicker" name="open" readonly>

3. Apply the following CSS snippets to the time picker.

#timepicker {
  width: 20%;
  margin: 30px 40%;
  margin-bottom: 0;
  position: absolute;
}

.timepicker_wrap {
  top: 60px;
  left: 39%;
  display: none;
  position: absolute;
  background: hsl(0, 0%, 100%);
  border-radius: 5px;
}

.hour, .min, .meridian, .sec {
  float: left;
  width: 60px;
  margin: 0 10px;
}

.timepicker_wrap .btn {
  background: url(arrow.png) no-repeat;
  cursor: pointer;
  padding: 18px;
  border: 3px dotted hsl(120, 40%, 80%);
  width: 28%;
  margin: auto;
  border-radius: 5px;
}

.timepicker_wrap .prev { background-position: 50% -50%; }

.timepicker_wrap .next { background-position: 50% 150%; }

.timepicker_wrap .ti_tx {
  margin: 10px 0;
  width: 100%;
  text-align: center;
}

.timepicker_wrap .in_txt {
  border-radius: 10px;
  width: 70%;
  float: none;
  text-align: center;
  padding-bottom: 8px;
  border: 2px solid hsl(0, 0%, 0%);
  font-family: georgia, helvetica, arial;
  font-weight: 700;
  font-size: 1.5em;
}

.timepicker_wrap > .hour > .ti_tx:after {
  content: '';
  font-size: 1em;
  padding-left: 0.2em;
  font-weight: 700;
}

.timepicker_wrap >.min > .ti_tx:after {
  content: '';
  font-size: 1em;
  padding-left: 0.2em;
  font-weight: 700;
}

.timepicker_wrap > .sec > .ti_tx:after {
  content: '';
  font-size: 1em;
  padding-left: 0.2em;
  font-weight: 700;
}

.timepicker_wrap > .meridian > .ti_tx:after {
  content: '';
  font-size: 1em;
  padding-left: 0.2em;
  font-weight: 700;
}

---

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