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="//code.jquery.com/jquery.min.js"></script>
<script src="jquery-clock-timepicker.min.js"></script>

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

$('.time').clockTimePicker();

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

$('.time').clockTimePicker({
  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:

2017-09-13

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

2017-09-11

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

2017-08-19

  • Added 'duration' and 'onlyShowClockOnMobile' options

2017-06-10

  • Change event implemented to refresh the clock.

2017-06-09

  • Fixed issues with onchange event on HTML element.

2017-05-22

  • 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.