KitKat Clock jQuery Plugin

KitKat Clock adds a time picker modeled after the stock clock app in Android 4.4 "KitKat". It allows the user to select the time from a clock-like interface. The widget has been optimized for both mouse based, and touchscreen devices.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: iddings.co

1. INCLUDE JS FILES

<script src="jquery-1.11.1.min.js"></script>
<script src="KitKatClock.min.js"></script>

2. HTML

<input type="text" class="timepicker">

3. JAVASCRIPT

$(function(){
	$(".timepicker").kitkatclock();
});

4. OPTIONS

To initialize with a certain time, simply set the value of the input element to whatever time you want it to start on (format: h:mm (am/pm)).

• size - rendered width of the clock (default: 350px)
• fontSize - font size used for everything but am/pm buttons (default: 40px)
• fontFamily - font family used for entire clock (default: 'Verdana, sans-serif')
• colors - object containing color settings for the clock
  • background - background of the entire selector element (default: #222222)
  • clock - color of the body of the clock (default: #050505)
  • text - color of the text of the clock/controls (default: #FFFFFF)
  • hand - color of the hand of the clock (default: #960000)
  • border - border color of the selector (default: #CCCCCC)
  • numerals - color of the numerals on the clock (defaults to colors.text)
  • meridian_background_on - color of the am/pm buttons when selected (defaults to colors.hand)
  • meridian_background_off - color of the am/pm buttons when NOT selected (defaults to a value equivalent to colors.meridian_background_on with an alpha level of 0.6 on a background of colors.background)
  • top_indicator_selected - color of the indicator text when that section (i.e. minutes or hours) is active (defaults to colors.hand)
  • top_indicator_deselected - color of the indicator text when that section (i.e. minutes or hours) is NOT active (defaults to colors.text)
  • top_indicator_background - background color for the top indicator (defaults to colors.clock)