diff --git a/.gitignore b/.gitignore
index b512c09..323128d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,4 @@
-node_modules
\ No newline at end of file
+node_modules
+bower_components
+.idea
+*.iml
diff --git a/README.md b/README.md
index 5ff911a..deb9add 100644
--- a/README.md
+++ b/README.md
@@ -61,6 +61,17 @@ 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);
+ });
}
```
@@ -69,14 +80,18 @@ if (something) {
| Name | Default | Description |
| ---- | ------- | ----------- |
-| default | '' | default time, 'now' or '13:14' e.g. |
-| placement | 'bottom' | popover placement |
+| 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') |
+| 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 |
@@ -95,6 +110,7 @@ if (something) {
| 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
@@ -135,6 +151,13 @@ gulp
## 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.
diff --git a/am_pm_submit.html b/am_pm_submit.html
new file mode 100644
index 0000000..1adabcb
--- /dev/null
+++ b/am_pm_submit.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ClockPicker
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/bootstrap-clockpicker.js b/dist/bootstrap-clockpicker.js
index e930b4f..51c9530 100644
--- a/dist/bootstrap-clockpicker.js
+++ b/dist/bootstrap-clockpicker.js
@@ -95,6 +95,7 @@
amPmBlock = popover.find('.clockpicker-am-pm-block'),
isInput = element.prop('tagName') === 'INPUT',
input = isInput ? element : element.find('input'),
+ isHTML5 = input.prop('type') === 'time',
addon = element.find('.input-group-addon'),
self = this,
timer;
@@ -102,10 +103,13 @@
this.id = uniqueId('cp');
this.element = element;
this.options = options;
+ this.options.hourstep = this.parseStep(this.options.hourstep, 12);
+ this.options.minutestep = this.parseStep(this.options.minutestep, 60);
this.isAppended = false;
this.isShown = false;
this.currentView = 'hours';
this.isInput = isInput;
+ this.isHTML5 = isHTML5;
this.input = input;
this.addon = addon;
this.popover = popover;
@@ -116,38 +120,25 @@
this.spanHours = popover.find('.clockpicker-span-hours');
this.spanMinutes = popover.find('.clockpicker-span-minutes');
this.spanAmPm = popover.find('.clockpicker-span-am-pm');
- this.amOrPm = "PM";
-
+ this.amOrPm = "";
+ this.currentPlacementClass = options.placement;
+ this.raiseCallback = function() {
+ raiseCallback.apply(self, arguments);
+ };
+
// Setup for for 12 hour clock if option is selected
if (options.twelvehour) {
-
- var amPmButtonsTemplate = ['',
- '',
- '',
- '
'].join('');
-
- var amPmButtons = $(amPmButtonsTemplate);
- //amPmButtons.appendTo(plate);
-
- ////Not working b/c they are not shown when this runs
- //$('clockpicker-am-button')
- // .on("click", function() {
- // self.amOrPm = "AM";
- // $('.clockpicker-span-am-pm').empty().append('AM');
- // });
- //
- //$('clockpicker-pm-button')
- // .on("click", function() {
- // self.amOrPm = "PM";
- // $('.clockpicker-span-am-pm').empty().append('PM');
- // });
-
+
$('')
.on("click", function() {
self.amOrPm = "AM";
$('.clockpicker-span-am-pm').empty().append('AM');
+
+ if (options.ampmSubmit) {
+ setTimeout(function(){
+ self.done();
+ }, duration / 2);
+ }
}).appendTo(this.amPmBlock);
@@ -155,6 +146,12 @@
.on("click", function() {
self.amOrPm = 'PM';
$('.clockpicker-span-am-pm').empty().append('PM');
+
+ if (options.ampmSubmit) {
+ setTimeout(function(){
+ self.done();
+ }, duration / 2);
+ }
}).appendTo(this.amPmBlock);
}
@@ -167,7 +164,7 @@
}
// Placement and arrow align - make sure they make sense.
- if ((options.placement === 'top' || options.placement === 'bottom') && (options.align === 'top' || options.align === 'bottom')) options.align = 'left';
+ if (/^(top|bottom)/.test(options.placement) && (options.align === 'top' || options.align === 'bottom')) options.align = 'left';
if ((options.placement === 'left' || options.placement === 'right') && (options.align === 'left' || options.align === 'right')) options.align = 'top';
popover.addClass(options.placement);
@@ -177,7 +174,9 @@
this.spanMinutes.click($.proxy(this.toggleView, this, 'minutes'));
// Show or toggle
- input.on('focus.clockpicker click.clockpicker', $.proxy(this.show, this));
+ if (!options.addonOnly) {
+ input.on('focus.clockpicker click.clockpicker', $.proxy(this.show, this));
+ }
addon.on('click.clockpicker', $.proxy(this.toggle, this));
// Build ticks
@@ -186,7 +185,7 @@
// Hours view
if (options.twelvehour) {
- for (i = 1; i < 13; i += 1) {
+ for (i = 0; i < 12; i += options.hourstep) {
tick = tickTpl.clone();
radian = i / 6 * Math.PI;
radius = outerRadius;
@@ -195,12 +194,12 @@
left: dialRadius + Math.sin(radian) * radius - tickRadius,
top: dialRadius - Math.cos(radian) * radius - tickRadius
});
- tick.html(i === 0 ? '00' : i);
+ tick.html(i === 0 ? 12 : i);
hoursView.append(tick);
tick.on(mousedownEvent, mousedown);
}
} else {
- for (i = 0; i < 24; i += 1) {
+ for (i = 0; i < 24; i += options.hourstep) {
tick = tickTpl.clone();
radian = i / 6 * Math.PI;
var inner = i > 0 && i < 13;
@@ -219,7 +218,8 @@
}
// Minutes view
- for (i = 0; i < 60; i += 5) {
+ var incrementValue = Math.max(options.minutestep, 5);
+ for (i = 0; i < 60; i += incrementValue) {
tick = tickTpl.clone();
radian = i / 30 * Math.PI;
tick.css({
@@ -267,7 +267,7 @@
}
// Clock
- self.setHand(dx, dy, ! space, true);
+ self.setHand(dx, dy, true);
// Mousemove on document
$doc.off(mousemoveEvent).on(mousemoveEvent, function(e){
@@ -280,7 +280,7 @@
return;
}
moved = true;
- self.setHand(x, y, false, true);
+ self.setHand(x, y, true);
});
// Mouseup on document
@@ -297,10 +297,12 @@
self.toggleView('minutes', duration / 2);
} else {
if (options.autoclose) {
- self.minutesView.addClass('clockpicker-dial-out');
- setTimeout(function(){
- self.done();
- }, duration / 2);
+ if (!options.ampmSubmit) {
+ self.minutesView.addClass('clockpicker-dial-out');
+ setTimeout(function(){
+ self.done();
+ }, duration / 2);
+ }
}
}
plate.prepend(canvas);
@@ -352,25 +354,75 @@
this.canvas = canvas;
}
- raiseCallback(this.options.init);
+ this.raiseCallback(this.options.init, 'init');
}
- function raiseCallback(callbackFunction) {
- if (callbackFunction && typeof callbackFunction === "function") {
- callbackFunction();
+ function raiseCallback(callbackFunction, triggerName) {
+ if (callbackFunction && typeof callbackFunction === "function" && this.element) {
+ var time = this.getTime() || null;
+ callbackFunction.call(this.element, time);
+ }
+ if (triggerName) {
+ this.element.trigger('clockpicker.' + triggerName || 'NoName');
+ }
+ }
+
+ /**
+ * Find most suitable vertical placement, doing our best to ensure it is inside of the viewport.
+ *
+ * First try to place the element according with preferredPlacement, then try the opposite
+ * placement and as a last resort, popover will be placed on the very top of the viewport.
+ *
+ * @param {jQuery} element
+ * @param {jQuery} popover
+ * @param preferredPlacement Preferred placement, if there is enough room for it.
+ * @returns {string} One of: 'top', 'bottom' or 'viewport-top'.
+ */
+ function resolveAdaptiveVerticalPlacement(element, popover, preferredPlacement) {
+ var popoverHeight = popover.outerHeight(),
+ elementHeight = element.outerHeight(),
+ elementTopOffset = element.offset().top,
+ elementBottomOffset = element.offset().top + elementHeight,
+ minVisibleY = elementTopOffset - element[0].getBoundingClientRect().top,
+ maxVisibleY = minVisibleY + document.documentElement.clientHeight,
+ isEnoughRoomAbove = (elementTopOffset - popoverHeight) >= minVisibleY,
+ isEnoughRoomBelow = (elementBottomOffset + popoverHeight) <= maxVisibleY;
+
+ if (preferredPlacement === 'top') {
+ if (isEnoughRoomAbove) {
+ return 'top';
+ } else if (isEnoughRoomBelow) {
+ return 'bottom';
+ }
+ } else {
+ if (isEnoughRoomBelow) {
+ return 'bottom';
+ } else if (isEnoughRoomAbove) {
+ return 'top';
+ }
}
+
+ return 'viewport-top';
+ }
+
+ ClockPicker.prototype.parseStep = function(givenStepSize, wholeSize) {
+ return wholeSize % givenStepSize === 0 ? givenStepSize : 1;
}
// Default options
ClockPicker.DEFAULTS = {
- 'default': '', // default time, 'now' or '13:14' e.g.
- fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
- placement: 'bottom', // clock popover placement
- align: 'left', // popover arrow align
- donetext: '完成', // done button text
- autoclose: false, // auto close when minute is selected
- twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
- vibrate: true // vibrate the device when dragging clock hand
+ 'default': '', // default time, 'now' or '13:14' e.g.
+ fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
+ placement: 'bottom', // clock popover placement
+ align: 'left', // popover arrow align
+ donetext: '完成', // done button text
+ autoclose: false, // auto close when minute is selected
+ twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
+ vibrate: true, // vibrate the device when dragging clock hand
+ 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 // only open on clicking on the input-addon
};
// Show or hide popover
@@ -378,7 +430,19 @@
this[this.isShown ? 'hide' : 'show']();
};
- // Set popover position
+ // Set new placement class for popover and remove the old one, if any.
+ ClockPicker.prototype.updatePlacementClass = function(newClass) {
+ if (this.currentPlacementClass) {
+ this.popover.removeClass(this.currentPlacementClass);
+ }
+ if (newClass) {
+ this.popover.addClass(newClass);
+ }
+
+ this.currentPlacementClass = newClass;
+ };
+
+ // Set popover position and update placement class, if needed
ClockPicker.prototype.locate = function(){
var element = this.element,
popover = this.popover,
@@ -390,6 +454,15 @@
styles = {},
self = this;
+ if (placement === 'top-adaptive' || placement === 'bottom-adaptive') {
+ var preferredPlacement = placement.substr(0, placement.indexOf('-'));
+ // Adaptive placement should be resolved into one of the "static" placement
+ // options, that is best suitable for the current window scroll position.
+ placement = resolveAdaptiveVerticalPlacement(element, popover, preferredPlacement);
+
+ this.updatePlacementClass(placement !== 'viewport-top' ? placement : '');
+ }
+
popover.show();
// Place the popover
@@ -406,6 +479,9 @@
case 'left':
styles.left = offset.left - popover.outerWidth();
break;
+ case 'viewport-top':
+ styles.top = offset.top - element[0].getBoundingClientRect().top;
+ break;
}
// Align the popover arrow
@@ -427,6 +503,33 @@
popover.css(styles);
};
+ // The input can be changed by the user
+ // So before we can use this.hours/this.minutes we must update it
+ ClockPicker.prototype.parseInputValue = function(){
+ var value = this.input.prop('value') || this.options['default'] || '';
+
+ if (value === 'now') {
+ value = new Date(+ new Date() + this.options.fromnow);
+ }
+ if (value instanceof Date) {
+ value = value.getHours() + ':' + value.getMinutes();
+ }
+
+ value = value.split(':');
+
+ // Minutes can have AM/PM that needs to be removed
+ this.hours = + value[0] || 0;
+ this.minutes = + (value[1] + '').replace(/\D/g, '') || 0;
+
+ this.hours = Math.round(this.hours / this.options.hourstep) * this.options.hourstep;
+ this.minutes = Math.round(this.minutes / this.options.minutestep) * this.options.minutestep;
+
+ if (this.options.twelvehour) {
+ var period = (value[1] + '').replace(/\d+/g, '').toLowerCase();
+ this.amOrPm = this.hours > 12 || period === 'pm' ? 'PM' : 'AM';
+ }
+ };
+
// Show popover
ClockPicker.prototype.show = function(e){
// Not show again
@@ -434,7 +537,7 @@
return;
}
- raiseCallback(this.options.beforeShow);
+ this.raiseCallback(this.options.beforeShow, 'beforeShow');
var self = this;
@@ -452,20 +555,16 @@
this.isAppended = true;
}
-
- // Get the time
- var value = ((this.input.prop('value') || this.options['default'] || '') + '').split(':');
- if (value[0] === 'now') {
- var now = new Date(+ new Date() + this.options.fromnow);
- value = [
- now.getHours(),
- now.getMinutes()
- ];
- }
- this.hours = + value[0] || 0;
- this.minutes = + value[1] || 0;
+
+ // Get the time from the input field
+ this.parseInputValue();
+
this.spanHours.html(leadingZero(this.hours));
this.spanMinutes.html(leadingZero(this.minutes));
+
+ if (this.options.twelvehour) {
+ this.spanAmPm.empty().append(this.amOrPm);
+ }
// Toggle to hours view
this.toggleView('hours');
@@ -492,12 +591,12 @@
}
});
- raiseCallback(this.options.afterShow);
+ this.raiseCallback(this.options.afterShow, 'afterShow');
};
// Hide popover
ClockPicker.prototype.hide = function(){
- raiseCallback(this.options.beforeHide);
+ this.raiseCallback(this.options.beforeHide, 'beforeHide');
this.isShown = false;
@@ -507,14 +606,14 @@
this.popover.hide();
- raiseCallback(this.options.afterHide);
+ this.raiseCallback(this.options.afterHide, 'afterHide');
};
// Toggle to hours or minutes view
ClockPicker.prototype.toggleView = function(view, delay){
var raiseAfterHourSelect = false;
if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
- raiseCallback(this.options.beforeHourSelect);
+ this.raiseCallback(this.options.beforeHourSelect, 'beforeHourSelect');
raiseAfterHourSelect = true;
}
var isHours = view === 'hours',
@@ -540,7 +639,7 @@
}, duration);
if (raiseAfterHourSelect) {
- raiseCallback(this.options.afterHourSelect);
+ this.raiseCallback(this.options.afterHourSelect, 'afterHourSelect');
}
};
@@ -567,19 +666,26 @@
};
// Set clock hand to (x, y)
- ClockPicker.prototype.setHand = function(x, y, roundBy5, dragging){
+ ClockPicker.prototype.setHand = function(x, y, dragging){
var radian = Math.atan2(x, - y),
isHours = this.currentView === 'hours',
- unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
z = Math.sqrt(x * x + y * y),
options = this.options,
inner = isHours && z < (outerRadius + innerRadius) / 2,
radius = inner ? innerRadius : outerRadius,
+ unit,
value;
-
- if (options.twelvehour) {
- radius = outerRadius;
- }
+
+ // Calculate the unit
+ if (isHours) {
+ unit = options.hourstep / 6 * Math.PI
+ } else {
+ unit = options.minutestep / 30 * Math.PI
+ }
+
+ if (options.twelvehour) {
+ radius = outerRadius;
+ }
// Radian should in range [0, 2PI]
if (radian < 0) {
@@ -593,35 +699,25 @@
radian = value * unit;
// Correct the hours or minutes
- if (options.twelvehour) {
- if (isHours) {
- if (value === 0) {
- value = 12;
- }
- } else {
- if (roundBy5) {
- value *= 5;
- }
- if (value === 60) {
- value = 0;
- }
+ if (isHours) {
+ value *= options.hourstep;
+
+ if (! options.twelvehour && (!inner)==(value>0)) {
+ value += 12;
+ }
+ if (options.twelvehour && value === 0) {
+ value = 12;
+ }
+ if (value === 24) {
+ value = 0;
}
} else {
- if (isHours) {
- if (value === 12) {
- value = 0;
- }
- value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
- } else {
- if (roundBy5) {
- value *= 5;
- }
- if (value === 60) {
- value = 0;
- }
+ value *= options.minutestep;
+ if (value === 60) {
+ value = 0;
}
}
-
+
// Once hours or minutes changed, vibrate the device
if (this[this.currentView] !== value) {
if (vibrate && this.options.vibrate) {
@@ -670,13 +766,43 @@
this.fg.setAttribute('cy', cy);
};
+ // Allow user to get time time as Date object
+ ClockPicker.prototype.getTime = function(callback) {
+ this.parseInputValue();
+
+ var hours = this.hours;
+ if (this.options.twelvehour && hours < 12 && this.amOrPm === 'PM') {
+ hours += 12;
+ }
+
+ var selectedTime = new Date();
+ selectedTime.setMinutes(this.minutes)
+ selectedTime.setHours(hours);
+ selectedTime.setSeconds(0);
+
+ return callback && callback.apply(this.element, selectedTime) || selectedTime;
+ }
+
// Hours and minutes are selected
ClockPicker.prototype.done = function() {
- raiseCallback(this.options.beforeDone);
+ this.raiseCallback(this.options.beforeDone, 'beforeDone');
this.hide();
var last = this.input.prop('value'),
- value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
- if (this.options.twelvehour) {
+ outHours = this.hours,
+ value = ':' + leadingZero(this.minutes);
+
+ if (this.isHTML5 && this.options.twelvehour) {
+ if (this.hours < 12 && this.amOrPm === 'PM') {
+ outHours += 12;
+ }
+ if (this.hours === 12 && this.amOrPm === 'AM') {
+ outHours = 0;
+ }
+ }
+
+ value = leadingZero(outHours) + value;
+
+ if (!this.isHTML5 && this.options.twelvehour) {
value = value + this.amOrPm;
}
@@ -692,7 +818,7 @@
this.input.trigger('blur');
}
- raiseCallback(this.options.afterDone);
+ this.raiseCallback(this.options.afterDone, 'afterDone');
};
// Remove clockpicker from input
@@ -712,18 +838,31 @@
// Extends $.fn.clockpicker
$.fn.clockpicker = function(option){
var args = Array.prototype.slice.call(arguments, 1);
- return this.each(function(){
+
+ function handleClockPickerRequest() {
var $this = $(this),
data = $this.data('clockpicker');
if (! data) {
var options = $.extend({}, ClockPicker.DEFAULTS, $this.data(), typeof option == 'object' && option);
$this.data('clockpicker', new ClockPicker($this, options));
} else {
- // Manual operatsions. show, hide, remove, e.g.
+ // Manual operations. show, hide, remove, getTime, e.g.
if (typeof data[option] === 'function') {
- data[option].apply(data, args);
+ return data[option].apply(data, args);
}
}
- });
+ }
+
+ // If we explicitly do a call on a single element then we can return the value (if needed)
+ // This allows us, for example, to return the value of getTime
+ if (this.length == 1) {
+ var returnValue = handleClockPickerRequest.apply(this[0]);
+
+ // If we do not have any return value then return the object itself so you can chain
+ return returnValue !== undefined ? returnValue : this;
+ }
+
+ // If we do have a list then we do not care about return values
+ return this.each(handleClockPickerRequest);
};
}());
diff --git a/dist/bootstrap-clockpicker.min.js b/dist/bootstrap-clockpicker.min.js
index c8006a3..acac791 100644
--- a/dist/bootstrap-clockpicker.min.js
+++ b/dist/bootstrap-clockpicker.min.js
@@ -3,4 +3,4 @@
* Copyright 2014 Wang Shenwei.
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
*/
-!function(){function t(t){return document.createElementNS(p,t)}function i(t){return(10>t?"0":"")+t}function e(t){var i=++m+"";return t?t+i:i}function s(s,r){function p(t,i){var e=u.offset(),s=/^touch/.test(t.type),o=e.left+b,n=e.top+b,p=(s?t.originalEvent.touches[0]:t).pageX-o,h=(s?t.originalEvent.touches[0]:t).pageY-n,k=Math.sqrt(p*p+h*h),v=!1;if(!i||!(g-y>k||k>g+y)){t.preventDefault();var m=setTimeout(function(){c.addClass("clockpicker-moving")},200);l&&u.append(x.canvas),x.setHand(p,h,!i,!0),a.off(d).on(d,function(t){t.preventDefault();var i=/^touch/.test(t.type),e=(i?t.originalEvent.touches[0]:t).pageX-o,s=(i?t.originalEvent.touches[0]:t).pageY-n;(v||e!==p||s!==h)&&(v=!0,x.setHand(e,s,!1,!0))}),a.off(f).on(f,function(t){a.off(f),t.preventDefault();var e=/^touch/.test(t.type),s=(e?t.originalEvent.changedTouches[0]:t).pageX-o,l=(e?t.originalEvent.changedTouches[0]:t).pageY-n;(i||v)&&s===p&&l===h&&x.setHand(s,l),"hours"===x.currentView?x.toggleView("minutes",A/2):r.autoclose&&(x.minutesView.addClass("clockpicker-dial-out"),setTimeout(function(){x.done()},A/2)),u.prepend(j),clearTimeout(m),c.removeClass("clockpicker-moving"),a.off(d)})}}var h=n(V),u=h.find(".clockpicker-plate"),v=h.find(".clockpicker-hours"),m=h.find(".clockpicker-minutes"),T=h.find(".clockpicker-am-pm-block"),C="INPUT"===s.prop("tagName"),H=C?s:s.find("input"),P=s.find(".input-group-addon"),x=this;if(this.id=e("cp"),this.element=s,this.options=r,this.isAppended=!1,this.isShown=!1,this.currentView="hours",this.isInput=C,this.input=H,this.addon=P,this.popover=h,this.plate=u,this.hoursView=v,this.minutesView=m,this.amPmBlock=T,this.spanHours=h.find(".clockpicker-span-hours"),this.spanMinutes=h.find(".clockpicker-span-minutes"),this.spanAmPm=h.find(".clockpicker-span-am-pm"),this.amOrPm="PM",r.twelvehour){{var S=['','",'","
"].join("");n(S)}n('').on("click",function(){x.amOrPm="AM",n(".clockpicker-span-am-pm").empty().append("AM")}).appendTo(this.amPmBlock),n('').on("click",function(){x.amOrPm="PM",n(".clockpicker-span-am-pm").empty().append("PM")}).appendTo(this.amPmBlock)}r.autoclose||n('").click(n.proxy(this.done,this)).appendTo(h),"top"!==r.placement&&"bottom"!==r.placement||"top"!==r.align&&"bottom"!==r.align||(r.align="left"),"left"!==r.placement&&"right"!==r.placement||"left"!==r.align&&"right"!==r.align||(r.align="top"),h.addClass(r.placement),h.addClass("clockpicker-align-"+r.align),this.spanHours.click(n.proxy(this.toggleView,this,"hours")),this.spanMinutes.click(n.proxy(this.toggleView,this,"minutes")),H.on("focus.clockpicker click.clockpicker",n.proxy(this.show,this)),P.on("click.clockpicker",n.proxy(this.toggle,this));var E,D,I,B,z=n('');if(r.twelvehour)for(E=1;13>E;E+=1)D=z.clone(),I=E/6*Math.PI,B=g,D.css("font-size","120%"),D.css({left:b+Math.sin(I)*B-y,top:b-Math.cos(I)*B-y}),D.html(0===E?"00":E),v.append(D),D.on(k,p);else for(E=0;24>E;E+=1){D=z.clone(),I=E/6*Math.PI;var O=E>0&&13>E;B=O?w:g,D.css({left:b+Math.sin(I)*B-y,top:b-Math.cos(I)*B-y}),O&&D.css("font-size","120%"),D.html(0===E?"00":E),v.append(D),D.on(k,p)}for(E=0;60>E;E+=5)D=z.clone(),I=E/30*Math.PI,D.css({left:b+Math.sin(I)*g-y,top:b-Math.cos(I)*g-y}),D.css("font-size","120%"),D.html(i(E)),m.append(D),D.on(k,p);if(u.on(k,function(t){0===n(t.target).closest(".clockpicker-tick").length&&p(t,!0)}),l){var j=h.find(".clockpicker-canvas"),L=t("svg");L.setAttribute("class","clockpicker-svg"),L.setAttribute("width",M),L.setAttribute("height",M);var U=t("g");U.setAttribute("transform","translate("+b+","+b+")");var W=t("circle");W.setAttribute("class","clockpicker-canvas-bearing"),W.setAttribute("cx",0),W.setAttribute("cy",0),W.setAttribute("r",2);var N=t("line");N.setAttribute("x1",0),N.setAttribute("y1",0);var X=t("circle");X.setAttribute("class","clockpicker-canvas-bg"),X.setAttribute("r",y);var Y=t("circle");Y.setAttribute("class","clockpicker-canvas-fg"),Y.setAttribute("r",3.5),U.appendChild(N),U.appendChild(X),U.appendChild(Y),U.appendChild(W),L.appendChild(U),j.append(L),this.hand=N,this.bg=X,this.fg=Y,this.bearing=W,this.g=U,this.canvas=j}o(this.options.init)}function o(t){t&&"function"==typeof t&&t()}var c,n=window.jQuery,r=n(window),a=n(document),p="http://www.w3.org/2000/svg",l="SVGAngle"in window&&function(){var t,i=document.createElement("div");return i.innerHTML="",t=(i.firstChild&&i.firstChild.namespaceURI)==p,i.innerHTML="",t}(),h=function(){var t=document.createElement("div").style;return"transition"in t||"WebkitTransition"in t||"MozTransition"in t||"msTransition"in t||"OTransition"in t}(),u="ontouchstart"in window,k="mousedown"+(u?" touchstart":""),d="mousemove.clockpicker"+(u?" touchmove.clockpicker":""),f="mouseup.clockpicker"+(u?" touchend.clockpicker":""),v=navigator.vibrate?"vibrate":navigator.webkitVibrate?"webkitVibrate":null,m=0,b=100,g=80,w=54,y=13,M=2*b,A=h?350:1,V=['','
','
',''," : ",'','',"
",'
","
','
','
',''," : ",'','',"
",'
","
',
- '',
- '',
- '
'].join('');
-
- var amPmButtons = $(amPmButtonsTemplate);
- //amPmButtons.appendTo(plate);
-
- ////Not working b/c they are not shown when this runs
- //$('clockpicker-am-button')
- // .on("click", function() {
- // self.amOrPm = "AM";
- // $('.clockpicker-span-am-pm').empty().append('AM');
- // });
- //
- //$('clockpicker-pm-button')
- // .on("click", function() {
- // self.amOrPm = "PM";
- // $('.clockpicker-span-am-pm').empty().append('PM');
- // });
-
+
$('')
.on("click", function() {
self.amOrPm = "AM";
$('.clockpicker-span-am-pm').empty().append('AM');
+
+ if (options.ampmSubmit) {
+ setTimeout(function(){
+ self.done();
+ }, duration / 2);
+ }
}).appendTo(this.amPmBlock);
@@ -155,6 +146,12 @@
.on("click", function() {
self.amOrPm = 'PM';
$('.clockpicker-span-am-pm').empty().append('PM');
+
+ if (options.ampmSubmit) {
+ setTimeout(function(){
+ self.done();
+ }, duration / 2);
+ }
}).appendTo(this.amPmBlock);
}
@@ -167,7 +164,7 @@
}
// Placement and arrow align - make sure they make sense.
- if ((options.placement === 'top' || options.placement === 'bottom') && (options.align === 'top' || options.align === 'bottom')) options.align = 'left';
+ if (/^(top|bottom)/.test(options.placement) && (options.align === 'top' || options.align === 'bottom')) options.align = 'left';
if ((options.placement === 'left' || options.placement === 'right') && (options.align === 'left' || options.align === 'right')) options.align = 'top';
popover.addClass(options.placement);
@@ -177,7 +174,9 @@
this.spanMinutes.click($.proxy(this.toggleView, this, 'minutes'));
// Show or toggle
- input.on('focus.clockpicker click.clockpicker', $.proxy(this.show, this));
+ if (!options.addonOnly) {
+ input.on('focus.clockpicker click.clockpicker', $.proxy(this.show, this));
+ }
addon.on('click.clockpicker', $.proxy(this.toggle, this));
// Build ticks
@@ -186,7 +185,7 @@
// Hours view
if (options.twelvehour) {
- for (i = 1; i < 13; i += 1) {
+ for (i = 0; i < 12; i += options.hourstep) {
tick = tickTpl.clone();
radian = i / 6 * Math.PI;
radius = outerRadius;
@@ -195,12 +194,12 @@
left: dialRadius + Math.sin(radian) * radius - tickRadius,
top: dialRadius - Math.cos(radian) * radius - tickRadius
});
- tick.html(i === 0 ? '00' : i);
+ tick.html(i === 0 ? 12 : i);
hoursView.append(tick);
tick.on(mousedownEvent, mousedown);
}
} else {
- for (i = 0; i < 24; i += 1) {
+ for (i = 0; i < 24; i += options.hourstep) {
tick = tickTpl.clone();
radian = i / 6 * Math.PI;
var inner = i > 0 && i < 13;
@@ -219,7 +218,8 @@
}
// Minutes view
- for (i = 0; i < 60; i += 5) {
+ var incrementValue = Math.max(options.minutestep, 5);
+ for (i = 0; i < 60; i += incrementValue) {
tick = tickTpl.clone();
radian = i / 30 * Math.PI;
tick.css({
@@ -267,7 +267,7 @@
}
// Clock
- self.setHand(dx, dy, ! space, true);
+ self.setHand(dx, dy, true);
// Mousemove on document
$doc.off(mousemoveEvent).on(mousemoveEvent, function(e){
@@ -280,7 +280,7 @@
return;
}
moved = true;
- self.setHand(x, y, false, true);
+ self.setHand(x, y, true);
});
// Mouseup on document
@@ -297,10 +297,12 @@
self.toggleView('minutes', duration / 2);
} else {
if (options.autoclose) {
- self.minutesView.addClass('clockpicker-dial-out');
- setTimeout(function(){
- self.done();
- }, duration / 2);
+ if (!options.ampmSubmit) {
+ self.minutesView.addClass('clockpicker-dial-out');
+ setTimeout(function(){
+ self.done();
+ }, duration / 2);
+ }
}
}
plate.prepend(canvas);
@@ -352,25 +354,75 @@
this.canvas = canvas;
}
- raiseCallback(this.options.init);
+ this.raiseCallback(this.options.init, 'init');
}
- function raiseCallback(callbackFunction) {
- if (callbackFunction && typeof callbackFunction === "function") {
- callbackFunction();
+ function raiseCallback(callbackFunction, triggerName) {
+ if (callbackFunction && typeof callbackFunction === "function" && this.element) {
+ var time = this.getTime() || null;
+ callbackFunction.call(this.element, time);
+ }
+ if (triggerName) {
+ this.element.trigger('clockpicker.' + triggerName || 'NoName');
+ }
+ }
+
+ /**
+ * Find most suitable vertical placement, doing our best to ensure it is inside of the viewport.
+ *
+ * First try to place the element according with preferredPlacement, then try the opposite
+ * placement and as a last resort, popover will be placed on the very top of the viewport.
+ *
+ * @param {jQuery} element
+ * @param {jQuery} popover
+ * @param preferredPlacement Preferred placement, if there is enough room for it.
+ * @returns {string} One of: 'top', 'bottom' or 'viewport-top'.
+ */
+ function resolveAdaptiveVerticalPlacement(element, popover, preferredPlacement) {
+ var popoverHeight = popover.outerHeight(),
+ elementHeight = element.outerHeight(),
+ elementTopOffset = element.offset().top,
+ elementBottomOffset = element.offset().top + elementHeight,
+ minVisibleY = elementTopOffset - element[0].getBoundingClientRect().top,
+ maxVisibleY = minVisibleY + document.documentElement.clientHeight,
+ isEnoughRoomAbove = (elementTopOffset - popoverHeight) >= minVisibleY,
+ isEnoughRoomBelow = (elementBottomOffset + popoverHeight) <= maxVisibleY;
+
+ if (preferredPlacement === 'top') {
+ if (isEnoughRoomAbove) {
+ return 'top';
+ } else if (isEnoughRoomBelow) {
+ return 'bottom';
+ }
+ } else {
+ if (isEnoughRoomBelow) {
+ return 'bottom';
+ } else if (isEnoughRoomAbove) {
+ return 'top';
+ }
}
+
+ return 'viewport-top';
+ }
+
+ ClockPicker.prototype.parseStep = function(givenStepSize, wholeSize) {
+ return wholeSize % givenStepSize === 0 ? givenStepSize : 1;
}
// Default options
ClockPicker.DEFAULTS = {
- 'default': '', // default time, 'now' or '13:14' e.g.
- fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
- placement: 'bottom', // clock popover placement
- align: 'left', // popover arrow align
- donetext: '完成', // done button text
- autoclose: false, // auto close when minute is selected
- twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
- vibrate: true // vibrate the device when dragging clock hand
+ 'default': '', // default time, 'now' or '13:14' e.g.
+ fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
+ placement: 'bottom', // clock popover placement
+ align: 'left', // popover arrow align
+ donetext: '完成', // done button text
+ autoclose: false, // auto close when minute is selected
+ twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
+ vibrate: true, // vibrate the device when dragging clock hand
+ 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 // only open on clicking on the input-addon
};
// Show or hide popover
@@ -378,7 +430,19 @@
this[this.isShown ? 'hide' : 'show']();
};
- // Set popover position
+ // Set new placement class for popover and remove the old one, if any.
+ ClockPicker.prototype.updatePlacementClass = function(newClass) {
+ if (this.currentPlacementClass) {
+ this.popover.removeClass(this.currentPlacementClass);
+ }
+ if (newClass) {
+ this.popover.addClass(newClass);
+ }
+
+ this.currentPlacementClass = newClass;
+ };
+
+ // Set popover position and update placement class, if needed
ClockPicker.prototype.locate = function(){
var element = this.element,
popover = this.popover,
@@ -390,6 +454,15 @@
styles = {},
self = this;
+ if (placement === 'top-adaptive' || placement === 'bottom-adaptive') {
+ var preferredPlacement = placement.substr(0, placement.indexOf('-'));
+ // Adaptive placement should be resolved into one of the "static" placement
+ // options, that is best suitable for the current window scroll position.
+ placement = resolveAdaptiveVerticalPlacement(element, popover, preferredPlacement);
+
+ this.updatePlacementClass(placement !== 'viewport-top' ? placement : '');
+ }
+
popover.show();
// Place the popover
@@ -406,6 +479,9 @@
case 'left':
styles.left = offset.left - popover.outerWidth();
break;
+ case 'viewport-top':
+ styles.top = offset.top - element[0].getBoundingClientRect().top;
+ break;
}
// Align the popover arrow
@@ -427,6 +503,33 @@
popover.css(styles);
};
+ // The input can be changed by the user
+ // So before we can use this.hours/this.minutes we must update it
+ ClockPicker.prototype.parseInputValue = function(){
+ var value = this.input.prop('value') || this.options['default'] || '';
+
+ if (value === 'now') {
+ value = new Date(+ new Date() + this.options.fromnow);
+ }
+ if (value instanceof Date) {
+ value = value.getHours() + ':' + value.getMinutes();
+ }
+
+ value = value.split(':');
+
+ // Minutes can have AM/PM that needs to be removed
+ this.hours = + value[0] || 0;
+ this.minutes = + (value[1] + '').replace(/\D/g, '') || 0;
+
+ this.hours = Math.round(this.hours / this.options.hourstep) * this.options.hourstep;
+ this.minutes = Math.round(this.minutes / this.options.minutestep) * this.options.minutestep;
+
+ if (this.options.twelvehour) {
+ var period = (value[1] + '').replace(/\d+/g, '').toLowerCase();
+ this.amOrPm = this.hours > 12 || period === 'pm' ? 'PM' : 'AM';
+ }
+ };
+
// Show popover
ClockPicker.prototype.show = function(e){
// Not show again
@@ -434,7 +537,7 @@
return;
}
- raiseCallback(this.options.beforeShow);
+ this.raiseCallback(this.options.beforeShow, 'beforeShow');
var self = this;
@@ -452,20 +555,16 @@
this.isAppended = true;
}
-
- // Get the time
- var value = ((this.input.prop('value') || this.options['default'] || '') + '').split(':');
- if (value[0] === 'now') {
- var now = new Date(+ new Date() + this.options.fromnow);
- value = [
- now.getHours(),
- now.getMinutes()
- ];
- }
- this.hours = + value[0] || 0;
- this.minutes = + value[1] || 0;
+
+ // Get the time from the input field
+ this.parseInputValue();
+
this.spanHours.html(leadingZero(this.hours));
this.spanMinutes.html(leadingZero(this.minutes));
+
+ if (this.options.twelvehour) {
+ this.spanAmPm.empty().append(this.amOrPm);
+ }
// Toggle to hours view
this.toggleView('hours');
@@ -492,12 +591,12 @@
}
});
- raiseCallback(this.options.afterShow);
+ this.raiseCallback(this.options.afterShow, 'afterShow');
};
// Hide popover
ClockPicker.prototype.hide = function(){
- raiseCallback(this.options.beforeHide);
+ this.raiseCallback(this.options.beforeHide, 'beforeHide');
this.isShown = false;
@@ -507,14 +606,14 @@
this.popover.hide();
- raiseCallback(this.options.afterHide);
+ this.raiseCallback(this.options.afterHide, 'afterHide');
};
// Toggle to hours or minutes view
ClockPicker.prototype.toggleView = function(view, delay){
var raiseAfterHourSelect = false;
if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
- raiseCallback(this.options.beforeHourSelect);
+ this.raiseCallback(this.options.beforeHourSelect, 'beforeHourSelect');
raiseAfterHourSelect = true;
}
var isHours = view === 'hours',
@@ -540,7 +639,7 @@
}, duration);
if (raiseAfterHourSelect) {
- raiseCallback(this.options.afterHourSelect);
+ this.raiseCallback(this.options.afterHourSelect, 'afterHourSelect');
}
};
@@ -567,19 +666,26 @@
};
// Set clock hand to (x, y)
- ClockPicker.prototype.setHand = function(x, y, roundBy5, dragging){
+ ClockPicker.prototype.setHand = function(x, y, dragging){
var radian = Math.atan2(x, - y),
isHours = this.currentView === 'hours',
- unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
z = Math.sqrt(x * x + y * y),
options = this.options,
inner = isHours && z < (outerRadius + innerRadius) / 2,
radius = inner ? innerRadius : outerRadius,
+ unit,
value;
-
- if (options.twelvehour) {
- radius = outerRadius;
- }
+
+ // Calculate the unit
+ if (isHours) {
+ unit = options.hourstep / 6 * Math.PI
+ } else {
+ unit = options.minutestep / 30 * Math.PI
+ }
+
+ if (options.twelvehour) {
+ radius = outerRadius;
+ }
// Radian should in range [0, 2PI]
if (radian < 0) {
@@ -593,35 +699,25 @@
radian = value * unit;
// Correct the hours or minutes
- if (options.twelvehour) {
- if (isHours) {
- if (value === 0) {
- value = 12;
- }
- } else {
- if (roundBy5) {
- value *= 5;
- }
- if (value === 60) {
- value = 0;
- }
+ if (isHours) {
+ value *= options.hourstep;
+
+ if (! options.twelvehour && (!inner)==(value>0)) {
+ value += 12;
+ }
+ if (options.twelvehour && value === 0) {
+ value = 12;
+ }
+ if (value === 24) {
+ value = 0;
}
} else {
- if (isHours) {
- if (value === 12) {
- value = 0;
- }
- value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
- } else {
- if (roundBy5) {
- value *= 5;
- }
- if (value === 60) {
- value = 0;
- }
+ value *= options.minutestep;
+ if (value === 60) {
+ value = 0;
}
}
-
+
// Once hours or minutes changed, vibrate the device
if (this[this.currentView] !== value) {
if (vibrate && this.options.vibrate) {
@@ -670,13 +766,43 @@
this.fg.setAttribute('cy', cy);
};
+ // Allow user to get time time as Date object
+ ClockPicker.prototype.getTime = function(callback) {
+ this.parseInputValue();
+
+ var hours = this.hours;
+ if (this.options.twelvehour && hours < 12 && this.amOrPm === 'PM') {
+ hours += 12;
+ }
+
+ var selectedTime = new Date();
+ selectedTime.setMinutes(this.minutes)
+ selectedTime.setHours(hours);
+ selectedTime.setSeconds(0);
+
+ return callback && callback.apply(this.element, selectedTime) || selectedTime;
+ }
+
// Hours and minutes are selected
ClockPicker.prototype.done = function() {
- raiseCallback(this.options.beforeDone);
+ this.raiseCallback(this.options.beforeDone, 'beforeDone');
this.hide();
var last = this.input.prop('value'),
- value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
- if (this.options.twelvehour) {
+ outHours = this.hours,
+ value = ':' + leadingZero(this.minutes);
+
+ if (this.isHTML5 && this.options.twelvehour) {
+ if (this.hours < 12 && this.amOrPm === 'PM') {
+ outHours += 12;
+ }
+ if (this.hours === 12 && this.amOrPm === 'AM') {
+ outHours = 0;
+ }
+ }
+
+ value = leadingZero(outHours) + value;
+
+ if (!this.isHTML5 && this.options.twelvehour) {
value = value + this.amOrPm;
}
@@ -692,7 +818,7 @@
this.input.trigger('blur');
}
- raiseCallback(this.options.afterDone);
+ this.raiseCallback(this.options.afterDone, 'afterDone');
};
// Remove clockpicker from input
@@ -712,18 +838,31 @@
// Extends $.fn.clockpicker
$.fn.clockpicker = function(option){
var args = Array.prototype.slice.call(arguments, 1);
- return this.each(function(){
+
+ function handleClockPickerRequest() {
var $this = $(this),
data = $this.data('clockpicker');
if (! data) {
var options = $.extend({}, ClockPicker.DEFAULTS, $this.data(), typeof option == 'object' && option);
$this.data('clockpicker', new ClockPicker($this, options));
} else {
- // Manual operatsions. show, hide, remove, e.g.
+ // Manual operations. show, hide, remove, getTime, e.g.
if (typeof data[option] === 'function') {
- data[option].apply(data, args);
+ return data[option].apply(data, args);
}
}
- });
+ }
+
+ // If we explicitly do a call on a single element then we can return the value (if needed)
+ // This allows us, for example, to return the value of getTime
+ if (this.length == 1) {
+ var returnValue = handleClockPickerRequest.apply(this[0]);
+
+ // If we do not have any return value then return the object itself so you can chain
+ return returnValue !== undefined ? returnValue : this;
+ }
+
+ // If we do have a list then we do not care about return values
+ return this.each(handleClockPickerRequest);
};
}());
diff --git a/dist/jquery-clockpicker.min.js b/dist/jquery-clockpicker.min.js
index c8006a3..acac791 100644
--- a/dist/jquery-clockpicker.min.js
+++ b/dist/jquery-clockpicker.min.js
@@ -3,4 +3,4 @@
* Copyright 2014 Wang Shenwei.
* Licensed under MIT (https://github.com/weareoutman/clockpicker/blob/gh-pages/LICENSE)
*/
-!function(){function t(t){return document.createElementNS(p,t)}function i(t){return(10>t?"0":"")+t}function e(t){var i=++m+"";return t?t+i:i}function s(s,r){function p(t,i){var e=u.offset(),s=/^touch/.test(t.type),o=e.left+b,n=e.top+b,p=(s?t.originalEvent.touches[0]:t).pageX-o,h=(s?t.originalEvent.touches[0]:t).pageY-n,k=Math.sqrt(p*p+h*h),v=!1;if(!i||!(g-y>k||k>g+y)){t.preventDefault();var m=setTimeout(function(){c.addClass("clockpicker-moving")},200);l&&u.append(x.canvas),x.setHand(p,h,!i,!0),a.off(d).on(d,function(t){t.preventDefault();var i=/^touch/.test(t.type),e=(i?t.originalEvent.touches[0]:t).pageX-o,s=(i?t.originalEvent.touches[0]:t).pageY-n;(v||e!==p||s!==h)&&(v=!0,x.setHand(e,s,!1,!0))}),a.off(f).on(f,function(t){a.off(f),t.preventDefault();var e=/^touch/.test(t.type),s=(e?t.originalEvent.changedTouches[0]:t).pageX-o,l=(e?t.originalEvent.changedTouches[0]:t).pageY-n;(i||v)&&s===p&&l===h&&x.setHand(s,l),"hours"===x.currentView?x.toggleView("minutes",A/2):r.autoclose&&(x.minutesView.addClass("clockpicker-dial-out"),setTimeout(function(){x.done()},A/2)),u.prepend(j),clearTimeout(m),c.removeClass("clockpicker-moving"),a.off(d)})}}var h=n(V),u=h.find(".clockpicker-plate"),v=h.find(".clockpicker-hours"),m=h.find(".clockpicker-minutes"),T=h.find(".clockpicker-am-pm-block"),C="INPUT"===s.prop("tagName"),H=C?s:s.find("input"),P=s.find(".input-group-addon"),x=this;if(this.id=e("cp"),this.element=s,this.options=r,this.isAppended=!1,this.isShown=!1,this.currentView="hours",this.isInput=C,this.input=H,this.addon=P,this.popover=h,this.plate=u,this.hoursView=v,this.minutesView=m,this.amPmBlock=T,this.spanHours=h.find(".clockpicker-span-hours"),this.spanMinutes=h.find(".clockpicker-span-minutes"),this.spanAmPm=h.find(".clockpicker-span-am-pm"),this.amOrPm="PM",r.twelvehour){{var S=['','",'","
"].join("");n(S)}n('').on("click",function(){x.amOrPm="AM",n(".clockpicker-span-am-pm").empty().append("AM")}).appendTo(this.amPmBlock),n('').on("click",function(){x.amOrPm="PM",n(".clockpicker-span-am-pm").empty().append("PM")}).appendTo(this.amPmBlock)}r.autoclose||n('").click(n.proxy(this.done,this)).appendTo(h),"top"!==r.placement&&"bottom"!==r.placement||"top"!==r.align&&"bottom"!==r.align||(r.align="left"),"left"!==r.placement&&"right"!==r.placement||"left"!==r.align&&"right"!==r.align||(r.align="top"),h.addClass(r.placement),h.addClass("clockpicker-align-"+r.align),this.spanHours.click(n.proxy(this.toggleView,this,"hours")),this.spanMinutes.click(n.proxy(this.toggleView,this,"minutes")),H.on("focus.clockpicker click.clockpicker",n.proxy(this.show,this)),P.on("click.clockpicker",n.proxy(this.toggle,this));var E,D,I,B,z=n('');if(r.twelvehour)for(E=1;13>E;E+=1)D=z.clone(),I=E/6*Math.PI,B=g,D.css("font-size","120%"),D.css({left:b+Math.sin(I)*B-y,top:b-Math.cos(I)*B-y}),D.html(0===E?"00":E),v.append(D),D.on(k,p);else for(E=0;24>E;E+=1){D=z.clone(),I=E/6*Math.PI;var O=E>0&&13>E;B=O?w:g,D.css({left:b+Math.sin(I)*B-y,top:b-Math.cos(I)*B-y}),O&&D.css("font-size","120%"),D.html(0===E?"00":E),v.append(D),D.on(k,p)}for(E=0;60>E;E+=5)D=z.clone(),I=E/30*Math.PI,D.css({left:b+Math.sin(I)*g-y,top:b-Math.cos(I)*g-y}),D.css("font-size","120%"),D.html(i(E)),m.append(D),D.on(k,p);if(u.on(k,function(t){0===n(t.target).closest(".clockpicker-tick").length&&p(t,!0)}),l){var j=h.find(".clockpicker-canvas"),L=t("svg");L.setAttribute("class","clockpicker-svg"),L.setAttribute("width",M),L.setAttribute("height",M);var U=t("g");U.setAttribute("transform","translate("+b+","+b+")");var W=t("circle");W.setAttribute("class","clockpicker-canvas-bearing"),W.setAttribute("cx",0),W.setAttribute("cy",0),W.setAttribute("r",2);var N=t("line");N.setAttribute("x1",0),N.setAttribute("y1",0);var X=t("circle");X.setAttribute("class","clockpicker-canvas-bg"),X.setAttribute("r",y);var Y=t("circle");Y.setAttribute("class","clockpicker-canvas-fg"),Y.setAttribute("r",3.5),U.appendChild(N),U.appendChild(X),U.appendChild(Y),U.appendChild(W),L.appendChild(U),j.append(L),this.hand=N,this.bg=X,this.fg=Y,this.bearing=W,this.g=U,this.canvas=j}o(this.options.init)}function o(t){t&&"function"==typeof t&&t()}var c,n=window.jQuery,r=n(window),a=n(document),p="http://www.w3.org/2000/svg",l="SVGAngle"in window&&function(){var t,i=document.createElement("div");return i.innerHTML="",t=(i.firstChild&&i.firstChild.namespaceURI)==p,i.innerHTML="",t}(),h=function(){var t=document.createElement("div").style;return"transition"in t||"WebkitTransition"in t||"MozTransition"in t||"msTransition"in t||"OTransition"in t}(),u="ontouchstart"in window,k="mousedown"+(u?" touchstart":""),d="mousemove.clockpicker"+(u?" touchmove.clockpicker":""),f="mouseup.clockpicker"+(u?" touchend.clockpicker":""),v=navigator.vibrate?"vibrate":navigator.webkitVibrate?"webkitVibrate":null,m=0,b=100,g=80,w=54,y=13,M=2*b,A=h?350:1,V=['','
','
',''," : ",'','',"
",'
","
','
','
',''," : ",'','',"
",'
","
License
placement: 'bottom',
align: 'right',
autoclose: true,
- 'default': '20:48'
+ 'default': '20:48',
+ minutestep: 5
});
$('.clockpicker-with-callbacks').clockpicker({
donetext: 'Done',
diff --git a/src/clockpicker.js b/src/clockpicker.js
index 7f208aa..dcf666c 100644
--- a/src/clockpicker.js
+++ b/src/clockpicker.js
@@ -95,6 +95,7 @@
amPmBlock = popover.find('.clockpicker-am-pm-block'),
isInput = element.prop('tagName') === 'INPUT',
input = isInput ? element : element.find('input'),
+ isHTML5 = input.prop('type') === 'time',
addon = element.find('.input-group-addon'),
self = this,
timer;
@@ -102,10 +103,13 @@
this.id = uniqueId('cp');
this.element = element;
this.options = options;
+ this.options.hourstep = this.parseStep(this.options.hourstep, 12);
+ this.options.minutestep = this.parseStep(this.options.minutestep, 60);
this.isAppended = false;
this.isShown = false;
this.currentView = 'hours';
this.isInput = isInput;
+ this.isHTML5 = isHTML5;
this.input = input;
this.addon = addon;
this.popover = popover;
@@ -116,49 +120,42 @@
this.spanHours = popover.find('.clockpicker-span-hours');
this.spanMinutes = popover.find('.clockpicker-span-minutes');
this.spanAmPm = popover.find('.clockpicker-span-am-pm');
- this.amOrPm = "PM";
-
+ this.amOrPm = "";
+ this.currentPlacementClass = options.placement;
+ this.raiseCallback = function() {
+ raiseCallback.apply(self, arguments);
+ };
+
// Setup for for 12 hour clock if option is selected
if (options.twelvehour) {
-
- var amPmButtonsTemplate = ['',
- '',
- '',
- '
'].join('');
-
- var amPmButtons = $(amPmButtonsTemplate);
- //amPmButtons.appendTo(plate);
-
- ////Not working b/c they are not shown when this runs
- //$('clockpicker-am-button')
- // .on("click", function() {
- // self.amOrPm = "AM";
- // $('.clockpicker-span-am-pm').empty().append('AM');
- // });
- //
- //$('clockpicker-pm-button')
- // .on("click", function() {
- // self.amOrPm = "PM";
- // $('.clockpicker-span-am-pm').empty().append('PM');
- // });
-
+
$('')
.on("click", function() {
self.amOrPm = "AM";
$('.clockpicker-span-am-pm').empty().append('AM');
+
+ if (options.ampmSubmit) {
+ setTimeout(function(){
+ self.done();
+ }, duration / 2);
+ }
}).appendTo(this.amPmBlock);
-
-
+
+
$('')
.on("click", function() {
self.amOrPm = 'PM';
$('.clockpicker-span-am-pm').empty().append('PM');
+
+ if (options.ampmSubmit) {
+ setTimeout(function(){
+ self.done();
+ }, duration / 2);
+ }
}).appendTo(this.amPmBlock);
-
+
}
-
+
if (! options.autoclose) {
// If autoclose is not setted, append a button
$('')
@@ -167,7 +164,7 @@
}
// Placement and arrow align - make sure they make sense.
- if ((options.placement === 'top' || options.placement === 'bottom') && (options.align === 'top' || options.align === 'bottom')) options.align = 'left';
+ if (/^(top|bottom)/.test(options.placement) && (options.align === 'top' || options.align === 'bottom')) options.align = 'left';
if ((options.placement === 'left' || options.placement === 'right') && (options.align === 'left' || options.align === 'right')) options.align = 'top';
popover.addClass(options.placement);
@@ -177,7 +174,9 @@
this.spanMinutes.click($.proxy(this.toggleView, this, 'minutes'));
// Show or toggle
- input.on('focus.clockpicker click.clockpicker', $.proxy(this.show, this));
+ if (!options.addonOnly) {
+ input.on('focus.clockpicker click.clockpicker', $.proxy(this.show, this));
+ }
addon.on('click.clockpicker', $.proxy(this.toggle, this));
// Build ticks
@@ -186,7 +185,7 @@
// Hours view
if (options.twelvehour) {
- for (i = 1; i < 13; i += 1) {
+ for (i = 0; i < 12; i += options.hourstep) {
tick = tickTpl.clone();
radian = i / 6 * Math.PI;
radius = outerRadius;
@@ -195,12 +194,12 @@
left: dialRadius + Math.sin(radian) * radius - tickRadius,
top: dialRadius - Math.cos(radian) * radius - tickRadius
});
- tick.html(i === 0 ? '00' : i);
+ tick.html(i === 0 ? 12 : i);
hoursView.append(tick);
tick.on(mousedownEvent, mousedown);
}
} else {
- for (i = 0; i < 24; i += 1) {
+ for (i = 0; i < 24; i += options.hourstep) {
tick = tickTpl.clone();
radian = i / 6 * Math.PI;
var inner = i > 0 && i < 13;
@@ -219,7 +218,8 @@
}
// Minutes view
- for (i = 0; i < 60; i += 5) {
+ var incrementValue = Math.max(options.minutestep, 5);
+ for (i = 0; i < 60; i += incrementValue) {
tick = tickTpl.clone();
radian = i / 30 * Math.PI;
tick.css({
@@ -267,7 +267,7 @@
}
// Clock
- self.setHand(dx, dy, ! space, true);
+ self.setHand(dx, dy, true);
// Mousemove on document
$doc.off(mousemoveEvent).on(mousemoveEvent, function(e){
@@ -280,7 +280,7 @@
return;
}
moved = true;
- self.setHand(x, y, false, true);
+ self.setHand(x, y, true);
});
// Mouseup on document
@@ -297,10 +297,12 @@
self.toggleView('minutes', duration / 2);
} else {
if (options.autoclose) {
- self.minutesView.addClass('clockpicker-dial-out');
- setTimeout(function(){
- self.done();
- }, duration / 2);
+ if (!options.ampmSubmit) {
+ self.minutesView.addClass('clockpicker-dial-out');
+ setTimeout(function(){
+ self.done();
+ }, duration / 2);
+ }
}
}
plate.prepend(canvas);
@@ -352,25 +354,75 @@
this.canvas = canvas;
}
- raiseCallback(this.options.init);
+ this.raiseCallback(this.options.init, 'init');
+ }
+
+ function raiseCallback(callbackFunction, triggerName) {
+ if (callbackFunction && typeof callbackFunction === "function" && this.element) {
+ var time = this.getTime() || null;
+ callbackFunction.call(this.element, time);
+ }
+ if (triggerName) {
+ this.element.trigger('clockpicker.' + triggerName || 'NoName');
+ }
}
- function raiseCallback(callbackFunction) {
- if (callbackFunction && typeof callbackFunction === "function") {
- callbackFunction();
+ /**
+ * Find most suitable vertical placement, doing our best to ensure it is inside of the viewport.
+ *
+ * First try to place the element according with preferredPlacement, then try the opposite
+ * placement and as a last resort, popover will be placed on the very top of the viewport.
+ *
+ * @param {jQuery} element
+ * @param {jQuery} popover
+ * @param preferredPlacement Preferred placement, if there is enough room for it.
+ * @returns {string} One of: 'top', 'bottom' or 'viewport-top'.
+ */
+ function resolveAdaptiveVerticalPlacement(element, popover, preferredPlacement) {
+ var popoverHeight = popover.outerHeight(),
+ elementHeight = element.outerHeight(),
+ elementTopOffset = element.offset().top,
+ elementBottomOffset = element.offset().top + elementHeight,
+ minVisibleY = elementTopOffset - element[0].getBoundingClientRect().top,
+ maxVisibleY = minVisibleY + document.documentElement.clientHeight,
+ isEnoughRoomAbove = (elementTopOffset - popoverHeight) >= minVisibleY,
+ isEnoughRoomBelow = (elementBottomOffset + popoverHeight) <= maxVisibleY;
+
+ if (preferredPlacement === 'top') {
+ if (isEnoughRoomAbove) {
+ return 'top';
+ } else if (isEnoughRoomBelow) {
+ return 'bottom';
+ }
+ } else {
+ if (isEnoughRoomBelow) {
+ return 'bottom';
+ } else if (isEnoughRoomAbove) {
+ return 'top';
+ }
}
+
+ return 'viewport-top';
+ }
+
+ ClockPicker.prototype.parseStep = function(givenStepSize, wholeSize) {
+ return wholeSize % givenStepSize === 0 ? givenStepSize : 1;
}
// Default options
ClockPicker.DEFAULTS = {
- 'default': '', // default time, 'now' or '13:14' e.g.
- fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
- placement: 'bottom', // clock popover placement
- align: 'left', // popover arrow align
- donetext: '完成', // done button text
- autoclose: false, // auto close when minute is selected
- twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
- vibrate: true // vibrate the device when dragging clock hand
+ 'default': '', // default time, 'now' or '13:14' e.g.
+ fromnow: 0, // set default time to * milliseconds from now (using with default = 'now')
+ placement: 'bottom', // clock popover placement
+ align: 'left', // popover arrow align
+ donetext: '完成', // done button text
+ autoclose: false, // auto close when minute is selected
+ twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
+ vibrate: true, // vibrate the device when dragging clock hand
+ 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 // only open on clicking on the input-addon
};
// Show or hide popover
@@ -378,7 +430,19 @@
this[this.isShown ? 'hide' : 'show']();
};
- // Set popover position
+ // Set new placement class for popover and remove the old one, if any.
+ ClockPicker.prototype.updatePlacementClass = function(newClass) {
+ if (this.currentPlacementClass) {
+ this.popover.removeClass(this.currentPlacementClass);
+ }
+ if (newClass) {
+ this.popover.addClass(newClass);
+ }
+
+ this.currentPlacementClass = newClass;
+ };
+
+ // Set popover position and update placement class, if needed
ClockPicker.prototype.locate = function(){
var element = this.element,
popover = this.popover,
@@ -390,6 +454,15 @@
styles = {},
self = this;
+ if (placement === 'top-adaptive' || placement === 'bottom-adaptive') {
+ var preferredPlacement = placement.substr(0, placement.indexOf('-'));
+ // Adaptive placement should be resolved into one of the "static" placement
+ // options, that is best suitable for the current window scroll position.
+ placement = resolveAdaptiveVerticalPlacement(element, popover, preferredPlacement);
+
+ this.updatePlacementClass(placement !== 'viewport-top' ? placement : '');
+ }
+
popover.show();
// Place the popover
@@ -406,6 +479,9 @@
case 'left':
styles.left = offset.left - popover.outerWidth();
break;
+ case 'viewport-top':
+ styles.top = offset.top - element[0].getBoundingClientRect().top;
+ break;
}
// Align the popover arrow
@@ -427,6 +503,33 @@
popover.css(styles);
};
+ // The input can be changed by the user
+ // So before we can use this.hours/this.minutes we must update it
+ ClockPicker.prototype.parseInputValue = function(){
+ var value = this.input.prop('value') || this.options['default'] || '';
+
+ if (value === 'now') {
+ value = new Date(+ new Date() + this.options.fromnow);
+ }
+ if (value instanceof Date) {
+ value = value.getHours() + ':' + value.getMinutes();
+ }
+
+ value = value.split(':');
+
+ // Minutes can have AM/PM that needs to be removed
+ this.hours = + value[0] || 0;
+ this.minutes = + (value[1] + '').replace(/\D/g, '') || 0;
+
+ this.hours = Math.round(this.hours / this.options.hourstep) * this.options.hourstep;
+ this.minutes = Math.round(this.minutes / this.options.minutestep) * this.options.minutestep;
+
+ if (this.options.twelvehour) {
+ var period = (value[1] + '').replace(/\d+/g, '').toLowerCase();
+ this.amOrPm = this.hours > 12 || period === 'pm' ? 'PM' : 'AM';
+ }
+ };
+
// Show popover
ClockPicker.prototype.show = function(e){
// Not show again
@@ -434,7 +537,7 @@
return;
}
- raiseCallback(this.options.beforeShow);
+ this.raiseCallback(this.options.beforeShow, 'beforeShow');
var self = this;
@@ -453,20 +556,16 @@
this.isAppended = true;
}
- // Get the time
- var value = ((this.input.prop('value') || this.options['default'] || '') + '').split(':');
- if (value[0] === 'now') {
- var now = new Date(+ new Date() + this.options.fromnow);
- value = [
- now.getHours(),
- now.getMinutes()
- ];
- }
- this.hours = + value[0] || 0;
- this.minutes = + value[1] || 0;
+ // Get the time from the input field
+ this.parseInputValue();
+
this.spanHours.html(leadingZero(this.hours));
this.spanMinutes.html(leadingZero(this.minutes));
+ if (this.options.twelvehour) {
+ this.spanAmPm.empty().append(this.amOrPm);
+ }
+
// Toggle to hours view
this.toggleView('hours');
@@ -492,12 +591,12 @@
}
});
- raiseCallback(this.options.afterShow);
+ this.raiseCallback(this.options.afterShow, 'afterShow');
};
// Hide popover
ClockPicker.prototype.hide = function(){
- raiseCallback(this.options.beforeHide);
+ this.raiseCallback(this.options.beforeHide, 'beforeHide');
this.isShown = false;
@@ -507,14 +606,14 @@
this.popover.hide();
- raiseCallback(this.options.afterHide);
+ this.raiseCallback(this.options.afterHide, 'afterHide');
};
// Toggle to hours or minutes view
ClockPicker.prototype.toggleView = function(view, delay){
var raiseAfterHourSelect = false;
if (view === 'minutes' && $(this.hoursView).css("visibility") === "visible") {
- raiseCallback(this.options.beforeHourSelect);
+ this.raiseCallback(this.options.beforeHourSelect, 'beforeHourSelect');
raiseAfterHourSelect = true;
}
var isHours = view === 'hours',
@@ -540,7 +639,7 @@
}, duration);
if (raiseAfterHourSelect) {
- raiseCallback(this.options.afterHourSelect);
+ this.raiseCallback(this.options.afterHourSelect, 'afterHourSelect');
}
};
@@ -567,19 +666,26 @@
};
// Set clock hand to (x, y)
- ClockPicker.prototype.setHand = function(x, y, roundBy5, dragging){
+ ClockPicker.prototype.setHand = function(x, y, dragging){
var radian = Math.atan2(x, - y),
isHours = this.currentView === 'hours',
- unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
z = Math.sqrt(x * x + y * y),
options = this.options,
inner = isHours && z < (outerRadius + innerRadius) / 2,
radius = inner ? innerRadius : outerRadius,
+ unit,
value;
-
- if (options.twelvehour) {
- radius = outerRadius;
- }
+
+ // Calculate the unit
+ if (isHours) {
+ unit = options.hourstep / 6 * Math.PI
+ } else {
+ unit = options.minutestep / 30 * Math.PI
+ }
+
+ if (options.twelvehour) {
+ radius = outerRadius;
+ }
// Radian should in range [0, 2PI]
if (radian < 0) {
@@ -593,35 +699,25 @@
radian = value * unit;
// Correct the hours or minutes
- if (options.twelvehour) {
- if (isHours) {
- if (value === 0) {
- value = 12;
- }
- } else {
- if (roundBy5) {
- value *= 5;
- }
- if (value === 60) {
- value = 0;
- }
+ if (isHours) {
+ value *= options.hourstep;
+
+ if (! options.twelvehour && (!inner)==(value>0)) {
+ value += 12;
+ }
+ if (options.twelvehour && value === 0) {
+ value = 12;
+ }
+ if (value === 24) {
+ value = 0;
}
} else {
- if (isHours) {
- if (value === 12) {
- value = 0;
- }
- value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
- } else {
- if (roundBy5) {
- value *= 5;
- }
- if (value === 60) {
- value = 0;
- }
+ value *= options.minutestep;
+ if (value === 60) {
+ value = 0;
}
}
-
+
// Once hours or minutes changed, vibrate the device
if (this[this.currentView] !== value) {
if (vibrate && this.options.vibrate) {
@@ -670,19 +766,49 @@
this.fg.setAttribute('cy', cy);
};
+ // Allow user to get time time as Date object
+ ClockPicker.prototype.getTime = function(callback) {
+ this.parseInputValue();
+
+ var hours = this.hours;
+ if (this.options.twelvehour && hours < 12 && this.amOrPm === 'PM') {
+ hours += 12;
+ }
+
+ var selectedTime = new Date();
+ selectedTime.setMinutes(this.minutes)
+ selectedTime.setHours(hours);
+ selectedTime.setSeconds(0);
+
+ return callback && callback.apply(this.element, selectedTime) || selectedTime;
+ }
+
// Hours and minutes are selected
ClockPicker.prototype.done = function() {
- raiseCallback(this.options.beforeDone);
+ this.raiseCallback(this.options.beforeDone, 'beforeDone');
this.hide();
var last = this.input.prop('value'),
- value = leadingZero(this.hours) + ':' + leadingZero(this.minutes);
- if (this.options.twelvehour) {
+ outHours = this.hours,
+ value = ':' + leadingZero(this.minutes);
+
+ if (this.isHTML5 && this.options.twelvehour) {
+ if (this.hours < 12 && this.amOrPm === 'PM') {
+ outHours += 12;
+ }
+ if (this.hours === 12 && this.amOrPm === 'AM') {
+ outHours = 0;
+ }
+ }
+
+ value = leadingZero(outHours) + value;
+
+ if (!this.isHTML5 && this.options.twelvehour) {
value = value + this.amOrPm;
}
-
+
this.input.prop('value', value);
if (value !== last) {
- this.input.triggerHandler('change');
+ this.input.trigger('change');
if (! this.isInput) {
this.element.trigger('change');
}
@@ -692,7 +818,7 @@
this.input.trigger('blur');
}
- raiseCallback(this.options.afterDone);
+ this.raiseCallback(this.options.afterDone, 'afterDone');
};
// Remove clockpicker from input
@@ -712,18 +838,31 @@
// Extends $.fn.clockpicker
$.fn.clockpicker = function(option){
var args = Array.prototype.slice.call(arguments, 1);
- return this.each(function(){
+
+ function handleClockPickerRequest() {
var $this = $(this),
data = $this.data('clockpicker');
if (! data) {
var options = $.extend({}, ClockPicker.DEFAULTS, $this.data(), typeof option == 'object' && option);
$this.data('clockpicker', new ClockPicker($this, options));
} else {
- // Manual operatsions. show, hide, remove, e.g.
+ // Manual operations. show, hide, remove, getTime, e.g.
if (typeof data[option] === 'function') {
- data[option].apply(data, args);
+ return data[option].apply(data, args);
}
}
- });
+ }
+
+ // If we explicitly do a call on a single element then we can return the value (if needed)
+ // This allows us, for example, to return the value of getTime
+ if (this.length == 1) {
+ var returnValue = handleClockPickerRequest.apply(this[0]);
+
+ // If we do not have any return value then return the object itself so you can chain
+ return returnValue !== undefined ? returnValue : this;
+ }
+
+ // If we do have a list then we do not care about return values
+ return this.each(handleClockPickerRequest);
};
}());