View on GitHub

jQueryClockIntervalPicker

jQuery plugin time selection picker clock

Download this project as a .zip file Download this project as a tar.gz file

jQueryClockIntervalPicker

What ?

A jQuery plugin for interactive time-interval selection based on a clock metaphor.

Example

Usage - Interaction

Commands no key Ctrl-hold
click Reset current - Select a point in time -
right-click Reset all intervals if there is at least one interval, select everything if there is no selection -
drag 'n' drop Reset current - Select interval Add selection.

Usage - Events

<div id="time-picker"></div>

...

$( "#time-picker" ).clockTimeIntervalPicker()
    .on( "selectionStarted", function( event, timeObj ) {
        // Selection started Event - Returns the startTime
    })
    .on( "selectionEnded", function( event, interval ) {
        // Selection ended Event - Returns selected interval
    })
    .on( "selectionChanged", function( event, data ) {
        // Selection changed Event - Returns all intervals
    });

Options

You can pass an options object on initialization:

        $( "#time-picker" ).clockTimeIntervalPicker({circleRadius : 100});

List of available Options

Option Description Default
circleRadius
multiSelection
enableAmPmButtons
faceTicksLargeLength
faceTicksLargeOptions
faceTicksTinyLength
faceTicksTinyOptions
faceCircleOptions
faceOverlayOptions

Requirements

Other versions could work as well but are not tested yet.

Found a bug or got ideas for new features ?

Submit an issue above or here:

https://github.com/JoHae/jQueryClockIntervalPicker/issues

Work in Progress

License

MIT License (MIT)