jQuery时钟风格插件clockpicker

Default:

$('.clockpicker').clockpicker();

Place at left, align the arrow to top, auto close:

$('.clockpicker').clockpicker();

Set options in javascript, instead ofdata-*:

$('.clockpicker').clockpicker({    placement:'top',    align:'left',    donetext:'Done'});

Set default value, input without addon, and manual operations:

Check the minutes

Check the minutesvarinput = $('#single-input').clockpicker({    placement:'bottom',    align:'left',    autoclose:true,'default':'now'});// Manually toggle to the minutes view$('#check-minutes').click(function(e){// Have to stop propagation heree.stopPropagation();    input.clockpicker('show')            .clockpicker('toggleView','minutes');});

Options

NameDefaultDescription

default''default time, 'now' or '13:14' e.g.

placement'bottom'popover placement

align'left'popover arrow align

donetext'完成'done button text

autoclosefalseauto close when minute is selected

vibratetruevibrate the device when dragging clock hand

fromnow0set default time to * milliseconds from now (using with default = 'now')

Operations

operationArgumentsDescription

showshow the clockpicker

hidehide the clockpicker

removeremove the clockpicker (and event listeners)

toggleView'hours' or 'minutes'toggle to hours or minutes view

What's included

clockpicker/├── dist/│  ├── bootstrap-clockpicker.css# full code for bootstrap│  ├── bootstrap-clockpicker.js│  ├── bootstrap-clockpicker.min.css# compiled and minified files for bootstrap│  ├── bootstrap-clockpicker.min.js│  ├── jquery-clockpicker.css# full code for jquery│  ├── jquery-clockpicker.js│  ├── jquery-clockpicker.min.css# compiled and minified files for jquery│  └── jquery-clockpicker.min.js└── src/# source code├── clockpicker.css    ├── clockpicker.js    └── standalone.css# some styles picked from bootstrap

License