' + this.options.title + '
- 00
- :
- 00
';
if (this.options.showSeconds) {
picker += '- :
- 00
';
}
picker += '- AM
';
$('body').append(picker);
this.attachKeyboardEvents();
}
},
/*
* Hides the meridiem control if this timepicker is a 24 hour clock
*/
showHideMeridiemControl: function () {
if (this.options.twentyFour === false) {
$(this.meridiemElem).parent().show();
}
else {
$(this.meridiemElem).parent().hide();
}
},
/*
* Hides the seconds control if this timepicker has showSeconds set to true
*/
showHideSecondsControl: function () {
if (this.options.showSeconds) {
$(this.secondsElem).parent().show();
}
else {
$(this.secondsElem).parent().hide();
}
},
/*
* Bind the click events to the input
*
* @param {object} The input element
*/
attach: function (element) {
var self = this;
if (this.options.clearable) {
self.makePickerInputClearable(element);
}
$(element).attr('tabindex', 0);
$(element).on('click focus', function (event) {
//Prevent multiple firings
if ($(self.timepicker).is(':hidden')) {
self.showPicker($(this));
window.lastTimePickerControl = $(this); //Put the reference on this timepicker into global scope for unsing that in afterShow function
$(self.hoursElem).focus();
}
});
//Handle click events for closing Wickedpicker
var clickHandler = function (event) { //TODO: Fix double firing
//Only fire the hide event when you have to
if ($(self.timepicker).is(':visible')) {
//Clicking the X
if ($(event.target).is(self.close)) {
self.hideTimepicker(window.lastTimePickerControl);
} else if ($(event.target).closest(self.timepicker).length || $(event.target).closest($('.hasWickedpicker')).length) { //Clicking the Wickedpicker or one of it's inputs
event.stopPropagation();
} else { //Everything else
if (typeof self.options.onClickOutside === 'function') {
self.options.onClickOutside();
}
else {
console.warn("Type of onClickOutside must be a function");
}
if (!self.options.closeOnClickOutside) {
return;
}
self.hideTimepicker(window.lastTimePickerControl);
}
window.lastTimePickerControl = null;
}
};
$(document).off('click', clickHandler).on('click', clickHandler);
},
/**
* Added keyboard functionality to improve usabil
*/
attachKeyboardEvents: function () {
$(document).on('keydown', $.proxy(function (event) {
switch (event.keyCode) {
case 9:
if (event.target.className !== 'hasWickedpicker') {
$(this.close).trigger('click');
}
break;
case 27:
$(this.close).trigger('click');
break;
case 37: //Left arrow
if (event.target.className !== this.hoursElem[0].className) {
$(event.target).parent().prevAll('li').not(this.separator.selector).first().children()[1].focus();
} else {
$(event.target).parent().siblings(':last').children()[1].focus();
}
break;
case 39: //Right arrow
if (event.target.className !== this.meridiemElem[0].className) {
$(event.target).parent().nextAll('li').not(this.separator.selector).first().children()[1].focus();
} else {
$(event.target).parent().siblings(':first').children()[1].focus();
}
break;
case 38: //Up arrow
$(':focus').prev().trigger('click');
break;
case 40: //Down arrow
$(':focus').next().trigger('click');
break;
default:
break;
}
}, this));
},
/*
* Set the time on the timepicker
*
* @param {object} The date being set
*/
setTime: function (time) {
this.setHours(time.hours);
this.setMinutes(time.minutes);
this.setMeridiem(time.meridiem);
if (this.options.showSeconds) {
this.setSeconds(time.seconds);
}
},
/*
* Get the time from the timepicker
*/
getTime: function () {
return [this.formatTime(this.getHours(), this.getMinutes(), this.getMeridiem(), this.getSeconds())];
},
/*
* Set the timpicker's hour(s) value
*
* @param {string} hours
*/
setHours: function (hours) {
var hour = new Date();
hour.setHours(hours);
var hoursText = this.parseHours(hour.getHours());
this.hoursElem.text(hoursText);
this.selectedHour = hoursText;
},
/*
* Get the hour(s) value from the timepicker
*
* @return {integer}
*/
getHours: function () {
var hours = new Date();
hours.setHours(this.hoursElem.text());
return hours.getHours();
},
/*
* Returns the correct hour value based on the type of clock, 12 or 24 hour
*
* @param {integer} The hours value before parsing
*
* @return {string|integer}
*/
parseHours: function (hours) {
return (this.options.twentyFour === false) ? ((hours + 11) % 12) + 1 : (hours < 10) ? '0' + hours : hours;
},
/*
* Sets the timpicker's minutes value
*
* @param {string} minutes
*/
setMinutes: function (minutes) {
var minute = new Date();
minute.setMinutes(minutes);
var minutesText = minute.getMinutes();
var min = this.parseSecMin(minutesText);
this.minutesElem.text(min);
this.selectedMin = min;
},
/*
* Get the minutes value from the timepicker
*
* @return {integer}
*/
getMinutes: function () {
var minutes = new Date();
minutes.setMinutes(this.minutesElem.text());
return minutes.getMinutes();
},
/*
* Return a human-readable minutes/seconds value
*
* @param {string} value seconds or minutes
*
* @return {string|integer}
*/
parseSecMin: function (value) {
return ((value < 10) ? '0' : '') + value;
},
/*
* Set the timepicker's meridiem value, AM or PM
*
* @param {string} The new meridiem
*/
setMeridiem: function (inputMeridiem) {
var newMeridiem = '';
if (inputMeridiem === undefined) {
var meridiem = this.getMeridiem();
newMeridiem = (meridiem === 'PM') ? 'AM' : 'PM';
} else {
newMeridiem = inputMeridiem;
}
this.meridiemElem.text(newMeridiem);
this.selectedMeridiem = newMeridiem;
},
/*
* Get the timepicker's meridiem value, AM or PM
*
* @return {string}
*/
getMeridiem: function () {
return this.meridiemElem.text();
},
/*
* Set the timepicker's seconds value
*
* @param {string} seconds
*/
setSeconds: function (seconds) {
var second = new Date();
second.setSeconds(seconds);
var secondsText = second.getSeconds();
var sec = this.parseSecMin(secondsText);
this.secondsElem.text(sec);
this.selectedSec = sec;
},
/*
* Get the timepicker's seconds value
*
* return {string}
*/
getSeconds: function () {
var seconds = new Date();
seconds.setSeconds(this.secondsElem.text());
return seconds.getSeconds();
},
/*
* Get the correct meridiem based on the hours given
*
* @param {string|integer} hours
*
* @return {string}
*/
parseMeridiem: function (hours) {
return (hours > 11) ? 'PM' : 'AM';
},
/*
* Handles time incrementing and decrementing and passes
* the operator, '+' or '-', the input to be set after the change
* and the current arrow clicked, to decipher if hours, ninutes, or meridiem.
*
* @param {object} The input element
*/
handleTimeAdjustments: function (element) {
var timeOut = 0;
//Click and click and hold timepicker incrementer and decrementer
$(this.up).add(this.down).off('mousedown click touchstart').on('mousedown click', {
'Wickedpicker': this,
'input': element
}, function (event) {
if(event.which!=1) return false;
var operator = (this.className.indexOf('up') > -1) ? '+' : '-';
var passedData = event.data;
if (event.type == 'mousedown') {
timeOut = setInterval($.proxy(function (args) {
args.Wickedpicker.changeValue(operator, args.input, this);
}, this, {'Wickedpicker': passedData.Wickedpicker, 'input': passedData.input}), 200);
} else {
passedData.Wickedpicker.changeValue(operator, passedData.input, this);
}
}).bind('mouseup touchend', function () {
clearInterval(timeOut);
});
},
/*
* Change the timepicker's time base on what is clicked
*
* @param {string} The + or - operator
* @param {object} The timepicker's associated input to be set post change
* @param {object} The DOM arrow object clicked, determines if it is hours,
* minutes, or meridiem base on the operator and its siblings
*/
changeValue: function (operator, input, clicked) {
var target = (operator === '+') ? clicked.nextSibling : clicked.previousSibling;
var targetClass = $(target).attr('class');
if (targetClass.endsWith('hours')) {
this.setHours(eval(this.getHours() + operator + 1));
} else if (targetClass.endsWith('minutes')) {
this.setMinutes(eval(this.getMinutes() + operator + this.options.minutesInterval));
} else if (targetClass.endsWith('seconds')) {
this.setSeconds(eval(this.getSeconds() + operator + this.options.secondsInterval));
} else {
this.setMeridiem();
}
this.setText(input);
},
/*
* Sets the give input's text to the current timepicker's time
*
* @param {object} The input element
*/
setText: function (input) {
$(input).val(this.formatTime(this.selectedHour, this.selectedMin, this.selectedMeridiem, this.selectedSec)).change();
},
/*
* Get the given input's value
*
* @param {object} The input element
*
* @return {string}
*/
getText: function (input) {
return $(input).val();
},
/*
* Returns the correct time format as a string
*
* @param {string} hour
* @param {string} minutes
* @param {string} meridiem
*
* @return {string}
*/
formatTime: function (hour, min, meridiem, seconds) {
var formattedTime = hour + this.options.timeSeparator + min;
if (this.options.showSeconds) {
formattedTime += this.options.timeSeparator + seconds;
}
if (this.options.twentyFour === false) {
formattedTime += ' ' + meridiem;
}
return formattedTime;
},
/**
* Apply the hover class to the arrows and close icon fonts
*/
setHoverState: function () {
var self = this;
if (!isMobile()) {
$(this.up).add(this.down).add(this.close).hover(function () {
$(this).toggleClass(self.options.hoverState);
});
}
},
/**
* Wrapping the given input field with the clearable container
* , add a span that will contain the x, and bind the clear
* input event to the span
*
* @param input
*/
makePickerInputClearable: function(input) {
$(input).wrap('