Android-style Analog Clock Time Picker Plugin With jQuery

Android-style Analog Clock Time Picker Plugin With jQuery
File Size: 22.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A fancy jQuery timepicker plugin which lets you create an interactive, Android inspired, Analog Clock-style time picker for your input field.

See also:

How to use it:

1. Create a normal text field and set the initial time in the value attribute.

<input class="time" type="text" value="14:30" />

2. Download the plugin, and then insert the JavaScript file jquery-clock-timepicker.min.js after jQuery but before the closing body tag.

<script src="//"></script>
<script src="jquery-clock-timepicker.min.js"></script>

3. Call the function clockTimePicker on the input field and done.


4. All default settings which can be overridden with the options argument.

  afternoonHoursInOuterCircle: false,
  autosize: true,
  colors: {
    buttonTextColor: '#0797FF',
    clockFaceColor: '#EEEEEE',
    clockInnerCircleTextColor: '#888888',
    clockOuterCircleTextColor: '#000000',
    hoverCircleColor: '#DDDDDD',
    popupBackgroundColor: '#FFFFFF',
    popupHeaderBackgroundColor: '#0797FF',
    popupHeaderTextColor: '#FFFFFF',        
    selectorColor: '#0797FF',       
    selectorNumberColor: '#FFFFFF'
  duration: false,
  durationNegative: false,
  fonts: {
    fontFamily: 'Arial',
    clockOuterCircleFontSize: 14,
    clockInnerCircleFontSize: 12,
    buttonFontSize: 20
  i18n: {
    okButton: 'OK',
    cancelButton: 'Cancel'
  maximum: null,
  minimum: null,
  modeSwitchSpeed: 500,
  onlyShowClockOnMobile: false,
  onChange: function(newVal, oldVal) { /*console.log('Value changed from ' + oldVal + ' to ' + newVal + '.');*/ },
  onClose: function() {},
  onModeSwitch: function() {},
  onOpen: function() {},
  popupWidthOnDesktop: 200,
  precision: 1,
  separator: ':',
  useAmPm: true,
  vibrate: true

Change log:


  • Totally revised. Event management changed so that onchange listener works as expected.


  • Event handling for onchange adjusted and new setting 'precision' added.


  • Added 'duration' and 'onlyShowClockOnMobile' options


  • Change event implemented to refresh the clock.


  • Fixed issues with onchange event on HTML element.


  • Keyboard input improved, Events added to config and config revised

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