deac/jQuery-Timepicker-Addon
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Updated from jozsika

Browse source
This commit is contained in:
Trent Richardson 2010-09-01 14:48:13 -04:00
parent 62e19e68c4
commit 44a17de112
1 changed files with 404 additions and 405 deletions
Download patch file Download diff file Expand all files Collapse all files

283
jquery-ui-timepicker-addon.js vendored Normal file → Executable file
View file

@ -14,6 +14,7 @@
* #ui-timepicker-div dl dt{ height: 25px; } * #ui-timepicker-div dl dt{ height: 25px; }
* #ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; } * #ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
*/ */
(function($) { (function($) {
function Timepicker() { } function Timepicker() { }
@ -31,6 +32,7 @@
formattedDate: '', formattedDate: '',
formattedTime: '', formattedTime: '',
formattedDateTime: '', formattedDateTime: '',
defaults: { defaults: {
holdDatepickerOpen: true, holdDatepickerOpen: true,
showButtonPanel: true, showButtonPanel: true,
@ -39,17 +41,15 @@
showMinute: true, showMinute: true,
showSecond: false, showSecond: false,
showTime: true, showTime: true,
//---------------------------- stepHour: 0.05,
stepHour: .05, stepMinute: 0.05,
stepMinute: .05, stepSecond: 0.05,
stepSecond: .05,
ampm: false, ampm: false,
hour: 0, hour: 0,
minute: 0, minute: 0,
second: 0, second: 0,
timeFormat: 'hh:mm tt', timeFormat: 'hh:mm tt',
alwaysSetTime: true alwaysSetTime: true
//----------------------------
}, },
//######################################################################## //########################################################################
@ -67,35 +67,39 @@
if (!this.defaults.timeOnly) { if (!this.defaults.timeOnly) {
//the time should come after x number of characters and a space. x = at least the length of text specified by the date format //the time should come after x number of characters and a space. x = at least the length of text specified by the date format
regstr = '\\S{' + this.defaults.timeFormat.length + ',}\\s+' + regstr; regstr = '.{' + this.defaults.timeFormat.length + ',}\\s+' + regstr;
} }
//--------------------------------------
var order = this.getFormatPositions(); var order = this.getFormatPositions();
var treg = currDT.match(new RegExp(regstr, 'i')); var treg = currDT.match(new RegExp(regstr, 'i'));
if (treg) { if (treg) {
if (order.t !== -1) if (order.t !== -1) {
this.ampm = ((treg[order.t] == undefined || treg[order.t].length == 0) ? '' : (treg[order.t].charAt(0).toUpperCase() == 'A') ? 'AM' : 'PM').toUpperCase(); this.ampm = ((treg[order.t] === undefined || treg[order.t].length === 0) ? '' : (treg[order.t].charAt(0).toUpperCase() == 'A') ? 'AM' : 'PM').toUpperCase();
if (order.h !== -1) {
if (this.ampm == 'AM' && treg[order.h] == '12')
this.hour = 0; // 12am = 0 hour
else if (this.ampm == 'PM' && treg[order.h] != '12')
this.hour = (parseFloat(treg[order.h]) + 12).toFixed(0); //12pm = 12 hour, any other pm = hour + 12
else
this.hour = treg[order.h];
} }
if (order.m !== -1) if (order.h !== -1) {
this.minute = treg[order.m]; if (this.ampm == 'AM' && treg[order.h] == '12') {
// 12am = 0 hour
this.hour = 0;
} else if (this.ampm == 'PM' && treg[order.h] != '12') {
// 12pm = 12 hour, any other pm = hour + 12
this.hour = (parseFloat(treg[order.h]) + 12).toFixed(0);
} else {
this.hour = treg[order.h];
}
}
if (order.s !== -1) if (order.m !== -1) {
this.minute = treg[order.m];
}
if (order.s !== -1) {
this.second = treg[order.s]; this.second = treg[order.s];
} }
}
tp_inst.timeDefined = (treg) ? true : false; tp_inst.timeDefined = (treg) ? true : false;
//---------------------
// wait for datepicker to create itself.. 60% of the time it works every time.. // wait for datepicker to create itself.. 60% of the time it works every time..
setTimeout(function() { setTimeout(function() {
@ -113,10 +117,11 @@
if (finds) { if (finds) {
for (var i = 0; i < finds.length; i++) { for (var i = 0; i < finds.length; i++) {
if (orders[finds[i].toString().charAt(0)] == -1) if (orders[finds[i].toString().charAt(0)] == -1) {
orders[finds[i].toString().charAt(0)] = i + 1; orders[finds[i].toString().charAt(0)] = i + 1;
} }
} }
}
return orders; return orders;
}, },
@ -126,67 +131,86 @@
//######################################################################## //########################################################################
injectTimePicker: function(dp_inst, tp_inst) { injectTimePicker: function(dp_inst, tp_inst) {
var $dp = $('#' + $.datepicker._mainDivId); var $dp = $('#' + $.datepicker._mainDivId);
var opts = tp_inst.defaults;
/* // Added by Peter Medeiros:
* Added by Peter Medeiros // - Figure out what the hour/minute/second max should be based on the step values.
* - Figure out what the minute max should be based on the step minute value. // - Example: if stepMinute is 15, then minMax is 45.
* - Get Remainder of 59 / Step Minute and subtract from 59 (59 being total minutes in an hour) var hourMax = 23 - (23 % opts.stepHour);
*/ var minMax = 59 - (59 % opts.stepMinute);
var hourMax = 23 - (23 % tp_inst.defaults.stepHour); var secMax = 59 - (59 % opts.stepSecond);
var minMax = 59 - (59 % tp_inst.defaults.stepMinute);
var secMax = 59 - (59 % tp_inst.defaults.stepSecond);
/* End Added by Peter Medeiros */
// Prevent displaying twice // Prevent displaying twice
if ($dp.find("div#ui-timepicker-div").length == 0) { if ($dp.find("div#ui-timepicker-div").length === 0) {
var html = '<div id="ui-timepicker-div">' + var noDisplay = ' style="display:none;"';
'<dl>' + var html =
'<dt id="ui_tpicker_time_label"' + ((tp_inst.defaults.showTime) ? '' : ' style="display:none;"') + '>Time</dt>' + '<div id="ui-timepicker-div"><dl>' +
'<dd id="ui_tpicker_time"' + ((tp_inst.defaults.showTime) ? '' : ' style="display:none;"') + '></dd>' + '<dt id="ui_tpicker_time_label"' + ((opts.showTime) ? '' : noDisplay) + '>Time</dt>' +
'<dt id="ui_tpicker_hour_label"' + ((tp_inst.defaults.showHour) ? '' : ' style="display:none;"') + '>Hour</dt>' + '<dd id="ui_tpicker_time"' + ((opts.showTime) ? '' : noDisplay) + '></dd>' +
'<dd id="ui_tpicker_hour"' + ((tp_inst.defaults.showHour) ? '' : ' style="display:none;"') + '></dd>' + '<dt id="ui_tpicker_hour_label"' + ((opts.showHour) ? '' : noDisplay) + '>Hour</dt>' +
'<dt id="ui_tpicker_minute_label"' + ((tp_inst.defaults.showMinute) ? '' : ' style="display:none;"') + '>Minute</dt>' + '<dd id="ui_tpicker_hour"' + ((opts.showHour) ? '' : noDisplay) + '></dd>' +
'<dd id="ui_tpicker_minute"' + ((tp_inst.defaults.showMinute) ? '' : ' style="display:none;"') + '></dd>' + '<dt id="ui_tpicker_minute_label"' + ((opts.showMinute) ? '' : noDisplay) + '>Minute</dt>' +
'<dt id="ui_tpicker_second_label"' + ((tp_inst.defaults.showSecond) ? '' : ' style="display:none;"') + '>Second</dt>' + '<dd id="ui_tpicker_minute"' + ((opts.showMinute) ? '' : noDisplay) + '></dd>' +
'<dd id="ui_tpicker_second"' + ((tp_inst.defaults.showSecond) ? '' : ' style="display:none;"') + '></dd>' + '<dt id="ui_tpicker_second_label"' + ((opts.showSecond) ? '' : noDisplay) + '>Second</dt>' +
'</dl>' + '<dd id="ui_tpicker_second"' + ((opts.showSecond) ? '' : noDisplay) + '></dd>' +
'</div>'; '</dl></div>';
$tp = $(html); $tp = $(html);
if (tp_inst.defaults.timeOnly == true) { // if we only want time picker // if we only want time picker...
$tp.prepend('<div class="ui-widget-header ui-helper-clearfix ui-corner-all"><div class="ui-datepicker-title">Choose Time</div></div>'); if (opts.timeOnly === true) {
$tp.prepend(
'<div class="ui-widget-header ui-helper-clearfix ui-corner-all">' +
'<div class="ui-datepicker-title">Choose Time</div>' +
'</div>');
$dp.find('.ui-datepicker-header, .ui-datepicker-calendar, .ui-datepicker-current').hide(); $dp.find('.ui-datepicker-header, .ui-datepicker-calendar, .ui-datepicker-current').hide();
} }
tp_inst.hour_slider = $tp.find('#ui_tpicker_hour').slider({ orientation: "horizontal", value: tp_inst.hour, min:0, max: hourMax, step: tp_inst.defaults.stepHour, slide: function(event, ui) { tp_inst.hour_slider = $tp.find('#ui_tpicker_hour').slider({
orientation: "horizontal",
value: tp_inst.hour,
min: 0,
max: hourMax,
step: opts.stepHour,
slide: function(event, ui) {
tp_inst.hour_slider.slider( "option", "value", ui.value ); tp_inst.hour_slider.slider( "option", "value", ui.value );
tp_inst.onTimeChange(dp_inst, tp_inst); tp_inst.onTimeChange(dp_inst, tp_inst);
} }); },
/* });
* Updated by Peter Medeiros
* - Pass in Event and UI instance into slide function // Updated by Peter Medeiros:
*/ // - Pass in Event and UI instance into slide function
tp_inst.minute_slider = $tp.find('#ui_tpicker_minute').slider({ orientation: "horizontal", value: tp_inst.minute, min:0, max: minMax, step: tp_inst.defaults.stepMinute, slide: function(event, ui) { tp_inst.minute_slider = $tp.find('#ui_tpicker_minute').slider({
tp_inst.minute_slider.slider( "option", "value", ui.value ); // update the global minute slider instance value with the current slider value orientation: "horizontal",
value: tp_inst.minute,
min: 0,
max: minMax,
step: opts.stepMinute,
slide: function(event, ui) {
// update the global minute slider instance value with the current slider value
tp_inst.minute_slider.slider( "option", "value", ui.value );
tp_inst.onTimeChange(dp_inst, tp_inst); tp_inst.onTimeChange(dp_inst, tp_inst);
} }); },
tp_inst.second_slider = $tp.find('#ui_tpicker_second').slider({ orientation: "horizontal", value: tp_inst.second, min:0, max: secMax, step: tp_inst.defaults.stepSecond, slide: function(event, ui) { });
tp_inst.second_slider = $tp.find('#ui_tpicker_second').slider({
orientation: "horizontal",
value: tp_inst.second,
min: 0,
max: secMax,
step: opts.stepSecond,
slide: function(event, ui) {
tp_inst.second_slider.slider( "option", "value", ui.value ); tp_inst.second_slider.slider( "option", "value", ui.value );
tp_inst.onTimeChange(dp_inst, tp_inst); tp_inst.onTimeChange(dp_inst, tp_inst);
} }); },
});
$dp.find('.ui-datepicker-calendar').after($tp); $dp.find('.ui-datepicker-calendar').after($tp);
tp_inst.$timeObj = $('#ui_tpicker_time'); tp_inst.$timeObj = $('#ui_tpicker_time');
if (dp_inst != null) { if (dp_inst !== null) {
var timeDefined = tp_inst.timeDefined; var timeDefined = tp_inst.timeDefined;
tp_inst.onTimeChange(dp_inst, tp_inst); tp_inst.onTimeChange(dp_inst, tp_inst);
tp_inst.timeDefined = timeDefined; tp_inst.timeDefined = timeDefined;
} }
} }
}, },
@ -200,13 +224,13 @@
var minute = tp_inst.minute_slider.slider('value'); var minute = tp_inst.minute_slider.slider('value');
var second = tp_inst.second_slider.slider('value'); var second = tp_inst.second_slider.slider('value');
var ampm = (tp_inst.hour < 12) ? 'AM' : 'PM'; var ampm = (tp_inst.hour < 12) ? 'AM' : 'PM';
var hasChanged = false; var hasChanged = false;
// if the update was done in the input field, this field should not be updated // If the update was done in the input field, this field should not be updated.
// if the update was done using the sliders, update the input field // If the update was done using the sliders, update the input field.
if (tp_inst.hour != hour || tp_inst.minute != minute || tp_inst.second != second || (tp_inst.ampm.length > 0 && tp_inst.ampm != ampm)) if (tp_inst.hour != hour || tp_inst.minute != minute || tp_inst.second != second || (tp_inst.ampm.length > 0 && tp_inst.ampm != ampm)) {
hasChanged = true; hasChanged = true;
}
tp_inst.hour = parseFloat(hour).toFixed(0); tp_inst.hour = parseFloat(hour).toFixed(0);
tp_inst.minute = parseFloat(minute).toFixed(0); tp_inst.minute = parseFloat(minute).toFixed(0);
@ -214,7 +238,6 @@
tp_inst.ampm = ampm; tp_inst.ampm = ampm;
tp_inst.formatTime(tp_inst); tp_inst.formatTime(tp_inst);
tp_inst.$timeObj.text(tp_inst.formattedTime); tp_inst.$timeObj.text(tp_inst.formattedTime);
if (hasChanged) { if (hasChanged) {
@ -229,9 +252,9 @@
formatTime: function(inst) { formatTime: function(inst) {
var tmptime = inst.defaults.timeFormat.toString(); var tmptime = inst.defaults.timeFormat.toString();
var hour12 = ((inst.ampm == 'AM') ? (inst.hour) : (inst.hour % 12)); var hour12 = ((inst.ampm == 'AM') ? (inst.hour) : (inst.hour % 12));
hour12 = (hour12 == 0) ? 12 : hour12; hour12 = (hour12 === 0) ? 12 : hour12;
if (inst.defaults.ampm == true) { if (inst.defaults.ampm === true) {
tmptime = tmptime.toString() tmptime = tmptime.toString()
.replace(/hh/g, ((hour12 < 10) ? '0' : '') + hour12) .replace(/hh/g, ((hour12 < 10) ? '0' : '') + hour12)
.replace(/h/g, hour12) .replace(/h/g, hour12)
@ -243,8 +266,8 @@
.replace(/tt/g, inst.ampm.toLowerCase()) .replace(/tt/g, inst.ampm.toLowerCase())
.replace(/T/g, inst.ampm.charAt(0).toUpperCase()) .replace(/T/g, inst.ampm.charAt(0).toUpperCase())
.replace(/t/g, inst.ampm.charAt(0).toLowerCase()); .replace(/t/g, inst.ampm.charAt(0).toLowerCase());
}
else { } else {
tmptime = tmptime.toString() tmptime = tmptime.toString()
.replace(/hh/g, ((inst.hour < 10) ? '0' : '') + inst.hour) .replace(/hh/g, ((inst.hour < 10) ? '0' : '') + inst.hour)
.replace(/h/g, inst.hour) .replace(/h/g, inst.hour)
@ -264,27 +287,18 @@
//######################################################################## //########################################################################
updateDateTime: function(dp_inst, tp_inst) { updateDateTime: function(dp_inst, tp_inst) {
var dt = this.$input.datepicker('getDate'); var dt = this.$input.datepicker('getDate');
var dateFmt = $.datepicker._get(dp_inst, 'dateFormat');
var formatCfg = $.datepicker._getFormatConfig(dp_inst);
this.formattedDate = $.datepicker.formatDate(dateFmt, (dt === null ? new Date() : dt), formatCfg);
var formattedDateTime = this.formattedDate;
var timeAvailable = dt !== null && tp_inst.timeDefined;
if (dt == null) if (this.defaults.timeOnly !== true && (this.defaults.alwaysSetTime || timeAvailable)) {
this.formattedDate = $.datepicker.formatDate($.datepicker._get(dp_inst, 'dateFormat'), new Date(), $.datepicker._getFormatConfig(dp_inst)); formattedDateTime += ' ' + this.formattedTime;
else this.formattedDate = $.datepicker.formatDate($.datepicker._get(dp_inst, 'dateFormat'), dt, $.datepicker._getFormatConfig(dp_inst)); }
if (this.defaults.alwaysSetTime) { this.formattedDateTime = formattedDateTime;
this.formattedDateTime = this.formattedDate + ' ' + this.formattedTime; this.$input.val(formattedDateTime);
}
else {
if (dt == null || !tp_inst.timeDefined || tp_inst.timeDefined == false) {
this.formattedDateTime = this.formattedDate;
}
else {
this.formattedDateTime = this.formattedDate + ' ' + this.formattedTime;
}
}
//-----------------------------
if (this.defaults.timeOnly == true)
this.$input.val(this.formattedTime);
else this.$input.val(this.formattedDateTime);
} }
}; };
@ -292,38 +306,41 @@
// extend timepicker to datepicker // extend timepicker to datepicker
//######################################################################## //########################################################################
jQuery.fn.datetimepicker = function(o) { jQuery.fn.datetimepicker = function(o) {
var opts = (o === undefined ? {} : o);
var tp = new Timepicker(); var tp = new Timepicker();
if (o == undefined) var beforeShowFunc = function(input, inst) {
o = {};
tp.defaults = $.extend({}, tp.defaults, o);
tp.defaults = $.extend({}, tp.defaults, {
beforeShow: function(input, inst) {
tp.hour = tp.defaults.hour; tp.hour = tp.defaults.hour;
tp.minute = tp.defaults.minute; tp.minute = tp.defaults.minute;
tp.second = tp.defaults.second; tp.second = tp.defaults.second;
tp.ampm = ''; tp.ampm = '';
tp.$input = $(input); tp.$input = $(input);
tp.inst = inst; tp.inst = inst;
tp.addTimePicker(inst); tp.addTimePicker(inst);
if ($.isFunction(opts.beforeShow)) {
opts.beforeShow(input, inst);
}
};
if ($.isFunction(o['beforeShow'])) o.beforeShow(input, inst); var onChangeMonthYearFunc = function(year, month, inst) {
},
onChangeMonthYear: function(year, month, inst) {
// Update the time as well : this prevents the time from disappearing from the input field. // Update the time as well : this prevents the time from disappearing from the input field.
tp.updateDateTime(inst, tp); tp.updateDateTime(inst, tp);
if ($.isFunction(opts.onChangeMonthYear)) {
if ($.isFunction(o['onChangeMonthYear'])) o.onChangeMonthYear(year, month, inst); opts.onChangeMonthYear(year, month, inst);
},
onClose: function(dateText, inst) {
tp.updateDateTime(inst, tp);
if ($.isFunction(o['onClose'])) o.onClose(dateText, inst);
} }
};
var onCloseFunc = function(dateText, inst) {
tp.updateDateTime(inst, tp);
if ($.isFunction(opts.onClose)) {
opts.onClose(dateText, inst);
}
};
tp.defaults = $.extend({}, tp.defaults, opts, {
beforeShow: beforeShowFunc,
onChangeMonthYear: onChangeMonthYearFunc,
onClose: onCloseFunc,
}); });
$(this).datepicker(tp.defaults); $(this).datepicker(tp.defaults);
@ -332,49 +349,31 @@
//######################################################################## //########################################################################
// shorthand just to use timepicker.. // shorthand just to use timepicker..
//######################################################################## //########################################################################
jQuery.fn.timepicker = function(o) { jQuery.fn.timepicker = function(opts) {
o = $.extend(o, { timeOnly: true }); opts = $.extend(opts, { timeOnly: true });
$(this).datetimepicker(opts);
$(this).datetimepicker(o);
}; };
//######################################################################## //########################################################################
// the bad hack :/ override datepicker so it doesnt close on select // the bad hack :/ override datepicker so it doesnt close on select
// inspired: http://stackoverflow.com/questions/1252512/jquery-datepicker-prevent-closing-picker-when-clicking-a-date/1762378#1762378
//######################################################################## //########################################################################
$.datepicker._selectDate = function(id, dateStr) { $.datepicker._selectDateOverload = $.datepicker._selectDate;
$.datepicker._selectDate = function (id, dateStr) {
var target = $(id); var target = $(id);
var inst = this._getInst(target[0]); var inst = this._getInst(target[0]);
var holdDatepickerOpen = (this._get(inst, 'holdDatepickerOpen') === true) ? true : false; // this line for timepicker.. inst.inline = true;
dateStr = (dateStr != null ? dateStr : this._formatDate(inst)); $.datepicker._selectDateOverload(id, dateStr);
inst.inline = false;
if (inst.input)
inst.input.val(dateStr);
this._updateAlternate(inst);
var onSelect = this._get(inst, 'onSelect');
if (onSelect)
onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); // trigger custom callback
else if (inst.input)
inst.input.trigger('change'); // fire the change event
if (inst.inline)
this._updateDatepicker(inst);
else if (holdDatepickerOpen) { } // this line for timepicker..
else {
this._hideDatepicker();
this._lastInput = inst.input[0];
if (typeof (inst.input[0]) != 'object')
inst.input.focus(); // restore focus
this._lastInput = null;
}
this._notifyChange(inst); this._notifyChange(inst);
this._updateDatepicker(inst);
}; };
//Change 4 - reduction of code required for override for _updateDatepicker function
$.datepicker._base_updateDatepicker = $.datepicker._updateDatepicker; $.datepicker._base_updateDatepicker = $.datepicker._updateDatepicker;
//############################################################################################# //#############################################################################################
// second bad hack :/ override datepicker so it triggers an event when changing the input field // second bad hack :/ override datepicker so it triggers an event when changing the input field
//############################################################################################# //#############################################################################################
/* Generate the date picker content. */ // Generate the date picker content.
$.datepicker._updateDatepicker = function(inst) { $.datepicker._updateDatepicker = function(inst) {
this._base_updateDatepicker(inst); this._base_updateDatepicker(inst);
// Reload the time control when changing something in the input text field. // Reload the time control when changing something in the input text field.
@ -383,10 +382,10 @@
$.datepicker._beforeShow = function(input, inst) { $.datepicker._beforeShow = function(input, inst) {
var beforeShow = this._get(inst, 'beforeShow'); var beforeShow = this._get(inst, 'beforeShow');
if (beforeShow) if (beforeShow) {
beforeShow.apply((inst.input ? inst.input[0] : null), [inst.input, inst]); beforeShow.apply((inst.input ? inst.input[0] : null), [inst.input, inst]);
}
}; };
//End Change 4 --------------------------------------------------------------------
//####################################################################################### //#######################################################################################
// third bad hack :/ override datepicker so it allows spaces and colan in the input field // third bad hack :/ override datepicker so it allows spaces and colan in the input field
@ -395,7 +394,7 @@
var inst = $.datepicker._getInst(event.target); var inst = $.datepicker._getInst(event.target);
if ($.datepicker._get(inst, 'constrainInput')) { if ($.datepicker._get(inst, 'constrainInput')) {
var dateChars = $.datepicker._possibleChars($.datepicker._get(inst, 'dateFormat')); var dateChars = $.datepicker._possibleChars($.datepicker._get(inst, 'dateFormat'));
var chr = String.fromCharCode(event.charCode == undefined ? event.keyCode : event.charCode); var chr = String.fromCharCode(event.charCode === undefined ? event.keyCode : event.charCode);
// keyCode == 58 => ":" // keyCode == 58 => ":"
// keyCode == 32 => " " // keyCode == 32 => " "
return event.ctrlKey || (chr < ' ' || !dateChars || dateChars.indexOf(chr) > -1 || event.keyCode == 58 || event.keyCode == 32); return event.ctrlKey || (chr < ' ' || !dateChars || dateChars.indexOf(chr) > -1 || event.keyCode == 58 || event.keyCode == 32);