Android-style Analog Clock Time Picker Plugin With jQuery

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

A fancy and mobile-friendly 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({

  // displays the afternoon hours in the outer circle instead of the inner circle
  afternoonHoursInOuterCircle: false,

  // auto resize
  autosize: false,

  // custom colors
  colors: {
    buttonTextColor: '#0797FF',
    clockFaceColor: '#EEEEEE',
    clockInnerCircleTextColor: '#888888',
    clockInnerCircleUnselectableTextColor: '#CCCCCC',
    clockOuterCircleTextColor: '#000000',
    clockOuterCircleUnselectableTextColor: '#CCCCCC',
    hoverCircleColor: '#DDDDDD',
    popupBackgroundColor: '#FFFFFF',
    popupHeaderBackgroundColor: '#0797FF',
    popupHeaderTextColor: '#FFFFFF',        
    selectorColor: '#0797FF',       
    selectorNumberColor: '#FFFFFF',
    signButtonColor: '#FFFFFF',
    signButtonBackgroundColor: '#0797FF'
  },

  // If true, the hours can be greater than 23.
  duration: false,

  // If true, the duration can be negative. 
  // This settings only has effect if the setting duration is set to true.
  durationNegative: false,

  // font options
  fonts: {
    fontFamily: 'Arial',
    clockOuterCircleFontSize: 14,
    clockInnerCircleFontSize: 12,
    buttonFontSize: 20
  },

  // hides the unselectable number
  hideUnselectableNumbers: false,

  // i18n
  i18n: {
    okButton: 'OK',
    cancelButton: 'Cancel'
  },

  // min/max times
  maximum: '23:59',
  minimum: '-23:59',

  // animation speed when switching modes
  modeSwitchSpeed: 500,

  // only shows clock on mobile device
  onlyShowClockOnMobile: false,

  // callbacks
  onAdjust: function(newVal, oldVal) { /*console.log('Value adjusted from ' + oldVal + ' to ' + newVal + '.');*/ },
  onChange: function(newVal, oldVal) { /*console.log('Value changed from ' + oldVal + ' to ' + newVal + '.');*/ },
  onClose: function() { },
  onModeSwitch: function() { },
  onOpen: function() { },

  // width of the popup in the Desktop
  popupWidthOnDesktop: 200,

  // precision
  precision: 1,

  // if this option is set to true, a user cannot empty the field by hitting delete or backspace.
  required: false,

  // custom separator
  separator: ':',

  // if true, positive durations use the plus sign (+) as a prefix.
  useDurationPlusSign: false,

  // if true, the mobile phone vibrates while changing the time.
  vibrate: true
  
});

5. You can also pass the options via data-OPTION attributes as follows:

<input class="time" type="text" data-precision="2" data-minimum="09:00" data-maximum="21:00">

Changelog:

v2.3.1 (2018-09-04)

  • Bugfix for entering durations with keyboard when useDurationPlusSign is set to true
  • Removed unwanted Console.log

v2.3.0 (2018-08-09)

  • Bugfix.
  • Shows unselectable numbers when using minimum and maximum options.
  • Hide unselectable numbers completely by using hideUnselectableNumbers option.
  • Configure text colors for unselectable numbers with new options clockInnerCircleUnselectableTextColor and clockOuterCircleUnselectableTextColor.
  • Use of data attributes to configure ClockTimePicker element.
  • Bugfix for wrong hovering when using afternoonHoursInOuterCircle.

v2.2.5 (2018-03-21)

  • Fixed a converting bug when switching between minus and plus sign.
  • Option useDurationPlusSign implemented.

2018-02-08

  • v2.2.2: Perfectionated to select hour/minute part with mouse click; Parse number settings as integer to prevent errors in calculations in case that a string is passed.

2018-02-07

  • v2.2.0: Now this plugin works in both portrait and landscape mode on the mobile phone.

2018-02-06

  • v2.1.10: Bluring issues fixed.

2017-12-09

  • Calling callback events in the element's context.

2017-11-22

  • v2.1.1

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.