JQuery Plugin Clock Timer Inspired Android Time Picker

jQuery Clock time picker plugin is great, mobile-friendly, and lets you create an Android-inspired interactive time picker similar to the analog clock for your input field.

The jQuery Plug-in is a free clock timer inspired by an Android time picker. This plugin works on both desktop and mobile phones.

Read More – jQuery Retro Flip Clock Countdown Timer Animation

How to make use of it:

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

<input class="time" type="text" value="18:45" />

2. Download the plugin, then insert the JavaScript file.

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

3. Call the clockTimePicker function in the input field and you’re done.

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

4. All default settings can be overridden using the options argument.

$('.time').clockTimePicker({

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

  // If you set this option to true is always opened to select hours first before selecting the minutes.
  alwaysSelectHoursFirst: 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 options via the data-OPTION attributes as follows:

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

Android-style Analog Clock Time Picker Plugin, Clock Timepicker Plugin/Github

clock-time-picker-plugin-demo


See Demo And Download

Official Website(loebi-ch): Click Here

This superior jQuery/javascript plugin is developed by loebi-ch. For extra advanced usage, please go to the official website.

Share