diff --git a/README.md b/README.md index 5ff911a..2face7b 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,14 @@ if (something) { | Name | Default | Description | | ---- | ------- | ----------- | -| default | '' | default time, 'now' or '13:14' e.g. | +| default | '' | default time, 'now', Date object or '13:14' e.g. | | placement | 'bottom' | popover placement | | 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) | | 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 +106,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 diff --git a/src/clockpicker.js b/src/clockpicker.js index 7f208aa..c129a3e 100644 --- a/src/clockpicker.js +++ b/src/clockpicker.js @@ -427,6 +427,30 @@ 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; + + if (this.options.twelvehour) { + var period = (value[1] + '').replace(/\d+/g, '').toLowerCase(); + this.amOrPm = this.hours < 12 || period === 'am' ? 'AM' : 'PM'; + } + }; + // Show popover ClockPicker.prototype.show = function(e){ // Not show again @@ -453,17 +477,9 @@ 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)); @@ -670,6 +686,23 @@ 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); @@ -712,18 +745,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); }; }());