Play demo

Text field

Alarm Clock

Delivery

Train departure

Timedropper
is a jQuery
time
plugin.

Download Version 1.0
3828thanks

Install
in 3 simple
steps.

Head

<script src="js/timedropper.js"></script>
<link rel="stylesheet" type="text/css" href="js/timedropper.css">

Body

<input type="text" id="alarm" />

End

<script>$( "#alarm" ).timeDropper();</script>

Options

  • autoswitch
  • meridians
  • format
  • mousewheel
  • init_animation
  • setCurrentTime
  • primaryColor
  • textColor
  • backgroundColor
  • borderColor

Download, fork and share

autoswitch

Automatically change hour-minute or minute-hour on mouseup/touchend. (Default: false)

Close

setCurrentTime

Automatically set current time by default.(Default: true)
If set "false", the input "value" attribute is considered as main time value.

Close

init_animation

Animation Style to use when init timedropper. There are three available animation values: fadeIn(default), dropDown.

Close

meridians

Set time in 12-hour clock in which the 24 hours of the day are divided into two periods. (Default: false)

Close

meridians

Enables time change using mousewheel. (Default: false)

Close

format

A time format string that timeDropper expects existing values to be in and will write times out it. (Default: h:mm a)

Value Description Result
H 24-hour format non-padded number 0-24
h 12-hour format non-padded number 1-12
HH 24-hour format padded number 00-24
hh 12-hour format padded number 01-12
m Non-padded numeric minutes 1-59
mm padded numeric minutes 01-59
a lower case meridian am-pm
A upper case meridian AM-PM
Close

primaryColor

Specify a color value for drop down accent color. Default: #1977CC

Close

textColor

Specify a color value for drop down text color. Default: #555

Close

backgroundColor

Specify a color value for drop down background color. Default: #FFFFFF

Close

borderColor

Specify a color value for drop down border color. Default: #1977CC

Close