jordymoos / clockpicker

A clock-style timepicker for Bootstrap (or jQuery).

ClockPicker

A clock-style timepicker for Bootstrap (or jQuery). Documentation and examples.

Browser support

All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8.

Device support

Both desktop and mobile device are supported. It also works great in touch screen device.

Dependencies

ClockPicker was designed for Bootstrap in the beginning. So Bootstrap (and jQuery) is the only dependency(s).

Since it only used .popover and some of .btn styles of Bootstrap, I picked these styles to build a jQuery plugin. Feel free to use jquery-* files instead of bootstrap-* , for non-bootstrap project.

Usage

<!-- Bootstrap stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">

<!-- ClockPicker Stylesheet -->
<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">

<!-- Input group, just add class 'clockpicker', and optional data-* -->
<div class="input-group clockpicker" data-placement="right" data-align="top" data-autoclose="true">
	<input type="text" class="form-control" value="09:32">
	<span class="input-group-addon">
		<span class="glyphicon glyphicon-time"></span>
	</span>
</div>

<!-- Or just a input -->
<input id="demo-input" />

<!-- jQuery and Bootstrap scripts -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>

<!-- ClockPicker script -->
<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>

<script type="text/javascript">
$('.clockpicker').clockpicker()
	.find('input').change(function(){
		// TODO: time changed
		console.log(this.value);
	});
$('#demo-input').clockpicker({
	autoclose: true
});

if (something) {
	// Manual operations (after clockpicker is initialized).
	$('#demo-input').clockpicker('show') // Or hide, remove ...
			.clockpicker('toggleView', 'minutes');

	// Get the time of single clockpicker
	var dateObject = $('#demo-input').clockpicker('getTime');
	console.log(dateObject);

	// Get the time of a clockpicker list
	$('.clockpicker').clockpicker('getTime', function(dateObject) {
		// The clockpicker element
		console.log(this);
		console.log(dateObject);
	});
}
</script>

Options

Name	Default	Description
default	''	default time, 'now', Date object or '13:14' e.g.
placement	'bottom'	popover placement. Supported values: 'top', 'bottom', 'left', 'right', 'top-adaptive', 'bottom-adaptive'.
align	'left'	popover arrow align
donetext	'完成'	done button text
autoclose	false	auto close when minute is selected
twelvehour	false	enables twelve hour mode with AM & PM buttons
vibrate	true	vibrate the device when dragging clock hand
fromnow	0	set default time to * milliseconds from now (using with default = 'now' or default = Date)
hourstep	1	allow to multi increment the hour
minutestep	1	allow to multi increment the minute
ampmSubmit	false	allow submit with AM and PM buttons instead of the minute selection/picker
addonOnly	false	disables the focus and click triggers on the input field (to allow delegation to native pickers)
init		callback function triggered after the colorpicker has been initiated
beforeShow		callback function triggered before popup is shown
afterShow		callback function triggered after popup is shown
beforeHide		callback function triggered before popup is hidden Note:will be triggered between a beforeDone and afterDone
afterHide		callback function triggered after popup is hidden Note:will be triggered between a beforeDone and afterDone
beforeHourSelect		callback function triggered before user makes an hour selection
afterHourSelect		callback function triggered after user makes an hour selection
beforeDone		callback function triggered before time is written to input
afterDone		callback function triggered after time is written to input

Operations

operation	Arguments	Description
show		show the clockpicker
hide		hide the clockpicker
remove		remove the clockpicker (and event listeners)
toggleView	'hours' or 'minutes'	toggle to hours or minutes view
getTime	Optional callback (Can be used for list of elements)	Returns Date object. (Will call the callback if callback is given)

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

Development

git clone https://github.com/weareoutman/clockpicker.git
cd clockpicker
npm install -g gulp
npm install
gulp
# gulp test

Todo

• Auto placement and align.
• Events.
• Customize format.
• Seconds View ?

Change log

0.1.0

• Able to set incremental step for hours and minutes
• Added getTime
• Able to set the default value via Date object
• Some AM & PM bug fixes

0.0.7

• Enables twelve hour mode with AM & PM buttons.

0.0.6

• Default time can be setted to now.
• Registered as a bower package.

0.0.5

• Functional operations.

License

MIT

clockpicker's Issues

Always defaulting to AM - follow-up

Just curious if you are still going to be able to look at the reported issue of the time always defaulting to "AM" whenever a change is made from a pre-existing set time.

Again, I am willing to make a contribution to get this done, but am unfamiliar with Github & pull-requests. I did (try to) issue one, but am unsure if it was done how you need.

Any response would be much appreciated.

Thank you.

Inline clock

for one of my app i am looking for inline clock, if this can be used inline this is the perfect clock i will ever use for mobile:).

Thanks in advance

resizing popover throws off selection

I'm trying to apply a transform: scale(.8) to scale down the size of it all. Looks-wise it does fine, but this seems to throw off the hour and minute selections. Somehow it's off, for example if I click the 7, it acts like I clicked the 8.

in the scenario I click on the 7, the code "Math.round(radian / unit);" seems to evaluate to 8. This leads me to believe the radian or unit is off due to my scaling.

Just not sure how to adjust code to accommodate my size change. any help would be great...

Version on bower

Can You make Your version for bower?

Always defaulting to AM

Hello. Great work - nicely expanded on top of the original clockpicker. The best improvement I was seeking is the ability to control the time increments (e.g. minutes).

One issue I'm having... once a time is set into a text field and that field is clicked again to adjust the time, the pop-up clock always defaults to "AM" of the time already set.

Example: if you set the time to "01:30 PM" and then click the box again to adjust the time, the window pops-up with the clockface and has "01:30 AM" - notice it's defaulting to "AM" instead of using whatever the field was already containing.

Any chance you could look into this? It would be much appreciated.

Changing time/ clicking Done does not trigger input fields change event

I have delegated events with Bakcbone and changing the time is not causing the input fields change handler to get fired,
changing line 811 from
this.input.triggerHandler('change');
to
this.input.trigger('change');

resolves the issue for me

Need your feedback.

Release new version

Can you just release a new version with the code from master? We are using your implementation of the clockpicker in 24hour format, but there is a bug with the selection of 12:00 and 00:00. If you select 00:00 and then open the clockpicker again the selected time is 12:00 but in the picker the 00:00 is selected. I have checked the version in the master branch and the problem does not occur there.

See the screenshot for that:

Manual time pick upon event fired

Hi, I guess you're the maintainer now of this project? In any case, could you please help me with this issue that i've been struck with,

Actually I have 2 inputs one of which is a Date Input which is covered by bootstrap-datepicker and the other is a time input which is set by this plugin.

The idea is once the date is set, it fires up the changeDate event to which we listen. We then change the focus on the time field (and display the clock).

Reading the doc, I think the right way to achieve this is to call

  input.clockpicker('show');

but it does not show the clock as it should. I have no idea what I'm doing wrong (admittedly i'm just a newbie when it comes to JS).

Here is the js fiddle that i've created

https://jsfiddle.net/7y7pd0vc/24/

Thanks in advance

Add moment.js Dependency

Hi Jordy,
Would have lost hope in this library if hadnt found this fork,
doesnt seem like the author is really maintaining this anymore,
can one ask for transfer of a repo ?

Anyways I wanted to suggest/ask since you have been through the code, is it possible to add moment.js dependency to this library ?
Custom Formats is the first thing that is in mind which can easily be addressed with moment,
plus moment being a brilliant library may make the addition of some awesome features to this library fairly easy...

thanks for your great work man,
Asad