UNPKG

alpaca

Version:

Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide

1,423 lines (1,302 loc) 75.8 kB
/* * jQuery Timepicker Addon * By: Trent Richardson [http://trentrichardson.com] * * Copyright 2013 Trent Richardson * You may use this project under MIT license. * http://trentrichardson.com/Impromptu/MIT-LICENSE.txt */ (function ($) { /* * Lets not redefine timepicker, Prevent "Uncaught RangeError: Maximum call stack size exceeded" */ $.ui.timepicker = $.ui.timepicker || {}; if ($.ui.timepicker.version) { return; } /* * Extend jQueryUI, get it started with our version number */ $.extend($.ui, { timepicker: { version: "@@version" } }); /* * Timepicker manager. * Use the singleton instance of this class, $.timepicker, to interact with the time picker. * Settings for (groups of) time pickers are maintained in an instance object, * allowing multiple different settings on the same page. */ var Timepicker = function () { this.regional = []; // Available regional settings, indexed by language code this.regional[''] = { // Default regional settings currentText: 'Now', closeText: 'Done', amNames: ['AM', 'A'], pmNames: ['PM', 'P'], timeFormat: 'HH:mm', timeSuffix: '', timeOnlyTitle: 'Choose Time', timeText: 'Time', hourText: 'Hour', minuteText: 'Minute', secondText: 'Second', millisecText: 'Millisecond', microsecText: 'Microsecond', timezoneText: 'Time Zone', isRTL: false }; this._defaults = { // Global defaults for all the datetime picker instances showButtonPanel: true, timeOnly: false, timeOnlyShowDate: false, showHour: null, showMinute: null, showSecond: null, showMillisec: null, showMicrosec: null, showTimezone: null, showTime: true, stepHour: 1, stepMinute: 1, stepSecond: 1, stepMillisec: 1, stepMicrosec: 1, hour: 0, minute: 0, second: 0, millisec: 0, microsec: 0, timezone: null, hourMin: 0, minuteMin: 0, secondMin: 0, millisecMin: 0, microsecMin: 0, hourMax: 23, minuteMax: 59, secondMax: 59, millisecMax: 999, microsecMax: 999, minDateTime: null, maxDateTime: null, maxTime: null, minTime: null, onSelect: null, hourGrid: 0, minuteGrid: 0, secondGrid: 0, millisecGrid: 0, microsecGrid: 0, alwaysSetTime: true, separator: ' ', altFieldTimeOnly: true, altTimeFormat: null, altSeparator: null, altTimeSuffix: null, altRedirectFocus: true, pickerTimeFormat: null, pickerTimeSuffix: null, showTimepicker: true, timezoneList: null, addSliderAccess: false, sliderAccessArgs: null, controlType: 'slider', defaultValue: null, parse: 'strict' }; $.extend(this._defaults, this.regional['']); }; $.extend(Timepicker.prototype, { $input: null, $altInput: null, $timeObj: null, inst: null, hour_slider: null, minute_slider: null, second_slider: null, millisec_slider: null, microsec_slider: null, timezone_select: null, maxTime: null, minTime: null, hour: 0, minute: 0, second: 0, millisec: 0, microsec: 0, timezone: null, hourMinOriginal: null, minuteMinOriginal: null, secondMinOriginal: null, millisecMinOriginal: null, microsecMinOriginal: null, hourMaxOriginal: null, minuteMaxOriginal: null, secondMaxOriginal: null, millisecMaxOriginal: null, microsecMaxOriginal: null, ampm: '', formattedDate: '', formattedTime: '', formattedDateTime: '', timezoneList: null, units: ['hour', 'minute', 'second', 'millisec', 'microsec'], support: {}, control: null, /* * Override the default settings for all instances of the time picker. * @param {Object} settings object - the new settings to use as defaults (anonymous object) * @return {Object} the manager object */ setDefaults: function (settings) { extendRemove(this._defaults, settings || {}); return this; }, /* * Create a new Timepicker instance */ _newInst: function ($input, opts) { var tp_inst = new Timepicker(), inlineSettings = {}, fns = {}, overrides, i; for (var attrName in this._defaults) { if (this._defaults.hasOwnProperty(attrName)) { var attrValue = $input.attr('time:' + attrName); if (attrValue) { try { inlineSettings[attrName] = eval(attrValue); } catch (err) { inlineSettings[attrName] = attrValue; } } } } overrides = { beforeShow: function (input, dp_inst) { if ($.isFunction(tp_inst._defaults.evnts.beforeShow)) { return tp_inst._defaults.evnts.beforeShow.call($input[0], input, dp_inst, tp_inst); } }, onChangeMonthYear: function (year, month, dp_inst) { // Update the time as well : this prevents the time from disappearing from the $input field. tp_inst._updateDateTime(dp_inst); if ($.isFunction(tp_inst._defaults.evnts.onChangeMonthYear)) { tp_inst._defaults.evnts.onChangeMonthYear.call($input[0], year, month, dp_inst, tp_inst); } }, onClose: function (dateText, dp_inst) { if (tp_inst.timeDefined === true && $input.val() !== '') { tp_inst._updateDateTime(dp_inst); } if ($.isFunction(tp_inst._defaults.evnts.onClose)) { tp_inst._defaults.evnts.onClose.call($input[0], dateText, dp_inst, tp_inst); } } }; for (i in overrides) { if (overrides.hasOwnProperty(i)) { fns[i] = opts[i] || null; } } tp_inst._defaults = $.extend({}, this._defaults, inlineSettings, opts, overrides, { evnts: fns, timepicker: tp_inst // add timepicker as a property of datepicker: $.datepicker._get(dp_inst, 'timepicker'); }); tp_inst.amNames = $.map(tp_inst._defaults.amNames, function (val) { return val.toUpperCase(); }); tp_inst.pmNames = $.map(tp_inst._defaults.pmNames, function (val) { return val.toUpperCase(); }); // detect which units are supported tp_inst.support = detectSupport( tp_inst._defaults.timeFormat + (tp_inst._defaults.pickerTimeFormat ? tp_inst._defaults.pickerTimeFormat : '') + (tp_inst._defaults.altTimeFormat ? tp_inst._defaults.altTimeFormat : '')); // controlType is string - key to our this._controls if (typeof(tp_inst._defaults.controlType) === 'string') { if (tp_inst._defaults.controlType === 'slider' && typeof($.ui.slider) === 'undefined') { tp_inst._defaults.controlType = 'select'; } tp_inst.control = tp_inst._controls[tp_inst._defaults.controlType]; } // controlType is an object and must implement create, options, value methods else { tp_inst.control = tp_inst._defaults.controlType; } // prep the timezone options var timezoneList = [-720, -660, -600, -570, -540, -480, -420, -360, -300, -270, -240, -210, -180, -120, -60, 0, 60, 120, 180, 210, 240, 270, 300, 330, 345, 360, 390, 420, 480, 525, 540, 570, 600, 630, 660, 690, 720, 765, 780, 840]; if (tp_inst._defaults.timezoneList !== null) { timezoneList = tp_inst._defaults.timezoneList; } var tzl = timezoneList.length, tzi = 0, tzv = null; if (tzl > 0 && typeof timezoneList[0] !== 'object') { for (; tzi < tzl; tzi++) { tzv = timezoneList[tzi]; timezoneList[tzi] = { value: tzv, label: $.timepicker.timezoneOffsetString(tzv, tp_inst.support.iso8601) }; } } tp_inst._defaults.timezoneList = timezoneList; // set the default units tp_inst.timezone = tp_inst._defaults.timezone !== null ? $.timepicker.timezoneOffsetNumber(tp_inst._defaults.timezone) : ((new Date()).getTimezoneOffset() * -1); tp_inst.hour = tp_inst._defaults.hour < tp_inst._defaults.hourMin ? tp_inst._defaults.hourMin : tp_inst._defaults.hour > tp_inst._defaults.hourMax ? tp_inst._defaults.hourMax : tp_inst._defaults.hour; tp_inst.minute = tp_inst._defaults.minute < tp_inst._defaults.minuteMin ? tp_inst._defaults.minuteMin : tp_inst._defaults.minute > tp_inst._defaults.minuteMax ? tp_inst._defaults.minuteMax : tp_inst._defaults.minute; tp_inst.second = tp_inst._defaults.second < tp_inst._defaults.secondMin ? tp_inst._defaults.secondMin : tp_inst._defaults.second > tp_inst._defaults.secondMax ? tp_inst._defaults.secondMax : tp_inst._defaults.second; tp_inst.millisec = tp_inst._defaults.millisec < tp_inst._defaults.millisecMin ? tp_inst._defaults.millisecMin : tp_inst._defaults.millisec > tp_inst._defaults.millisecMax ? tp_inst._defaults.millisecMax : tp_inst._defaults.millisec; tp_inst.microsec = tp_inst._defaults.microsec < tp_inst._defaults.microsecMin ? tp_inst._defaults.microsecMin : tp_inst._defaults.microsec > tp_inst._defaults.microsecMax ? tp_inst._defaults.microsecMax : tp_inst._defaults.microsec; tp_inst.ampm = ''; tp_inst.$input = $input; if (tp_inst._defaults.altField) { tp_inst.$altInput = $(tp_inst._defaults.altField); if (tp_inst._defaults.altRedirectFocus === true) { tp_inst.$altInput.css({ cursor: 'pointer' }).focus(function () { $input.trigger("focus"); }); } } if (tp_inst._defaults.minDate === 0 || tp_inst._defaults.minDateTime === 0) { tp_inst._defaults.minDate = new Date(); } if (tp_inst._defaults.maxDate === 0 || tp_inst._defaults.maxDateTime === 0) { tp_inst._defaults.maxDate = new Date(); } // datepicker needs minDate/maxDate, timepicker needs minDateTime/maxDateTime.. if (tp_inst._defaults.minDate !== undefined && tp_inst._defaults.minDate instanceof Date) { tp_inst._defaults.minDateTime = new Date(tp_inst._defaults.minDate.getTime()); } if (tp_inst._defaults.minDateTime !== undefined && tp_inst._defaults.minDateTime instanceof Date) { tp_inst._defaults.minDate = new Date(tp_inst._defaults.minDateTime.getTime()); } if (tp_inst._defaults.maxDate !== undefined && tp_inst._defaults.maxDate instanceof Date) { tp_inst._defaults.maxDateTime = new Date(tp_inst._defaults.maxDate.getTime()); } if (tp_inst._defaults.maxDateTime !== undefined && tp_inst._defaults.maxDateTime instanceof Date) { tp_inst._defaults.maxDate = new Date(tp_inst._defaults.maxDateTime.getTime()); } tp_inst.$input.bind('focus', function () { tp_inst._onFocus(); }); return tp_inst; }, /* * add our sliders to the calendar */ _addTimePicker: function (dp_inst) { var currDT = (this.$altInput && this._defaults.altFieldTimeOnly) ? this.$input.val() + ' ' + this.$altInput.val() : this.$input.val(); this.timeDefined = this._parseTime(currDT); this._limitMinMaxDateTime(dp_inst, false); this._injectTimePicker(); }, /* * parse the time string from input value or _setTime */ _parseTime: function (timeString, withDate) { if (!this.inst) { this.inst = $.datepicker._getInst(this.$input[0]); } if (withDate || !this._defaults.timeOnly) { var dp_dateFormat = $.datepicker._get(this.inst, 'dateFormat'); try { var parseRes = parseDateTimeInternal(dp_dateFormat, this._defaults.timeFormat, timeString, $.datepicker._getFormatConfig(this.inst), this._defaults); if (!parseRes.timeObj) { return false; } $.extend(this, parseRes.timeObj); } catch (err) { $.timepicker.log("Error parsing the date/time string: " + err + "\ndate/time string = " + timeString + "\ntimeFormat = " + this._defaults.timeFormat + "\ndateFormat = " + dp_dateFormat); return false; } return true; } else { var timeObj = $.datepicker.parseTime(this._defaults.timeFormat, timeString, this._defaults); if (!timeObj) { return false; } $.extend(this, timeObj); return true; } }, /* * generate and inject html for timepicker into ui datepicker */ _injectTimePicker: function () { var $dp = this.inst.dpDiv, o = this.inst.settings, tp_inst = this, litem = '', uitem = '', show = null, max = {}, gridSize = {}, size = null, i = 0, l = 0; // Prevent displaying twice if ($dp.find("div.ui-timepicker-div").length === 0 && o.showTimepicker) { var noDisplay = ' style="display:none;"', html = '<div class="ui-timepicker-div' + (o.isRTL ? ' ui-timepicker-rtl' : '') + '"><dl>' + '<dt class="ui_tpicker_time_label"' + ((o.showTime) ? '' : noDisplay) + '>' + o.timeText + '</dt>' + '<dd class="ui_tpicker_time"' + ((o.showTime) ? '' : noDisplay) + '></dd>'; // Create the markup for (i = 0, l = this.units.length; i < l; i++) { litem = this.units[i]; uitem = litem.substr(0, 1).toUpperCase() + litem.substr(1); show = o['show' + uitem] !== null ? o['show' + uitem] : this.support[litem]; // Added by Peter Medeiros: // - Figure out what the hour/minute/second max should be based on the step values. // - Example: if stepMinute is 15, then minMax is 45. max[litem] = parseInt((o[litem + 'Max'] - ((o[litem + 'Max'] - o[litem + 'Min']) % o['step' + uitem])), 10); gridSize[litem] = 0; html += '<dt class="ui_tpicker_' + litem + '_label"' + (show ? '' : noDisplay) + '>' + o[litem + 'Text'] + '</dt>' + '<dd class="ui_tpicker_' + litem + '"><div class="ui_tpicker_' + litem + '_slider"' + (show ? '' : noDisplay) + '></div>'; if (show && o[litem + 'Grid'] > 0) { html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>'; if (litem === 'hour') { for (var h = o[litem + 'Min']; h <= max[litem]; h += parseInt(o[litem + 'Grid'], 10)) { gridSize[litem]++; var tmph = $.datepicker.formatTime(this.support.ampm ? 'hht' : 'HH', {hour: h}, o); html += '<td data-for="' + litem + '">' + tmph + '</td>'; } } else { for (var m = o[litem + 'Min']; m <= max[litem]; m += parseInt(o[litem + 'Grid'], 10)) { gridSize[litem]++; html += '<td data-for="' + litem + '">' + ((m < 10) ? '0' : '') + m + '</td>'; } } html += '</tr></table></div>'; } html += '</dd>'; } // Timezone var showTz = o.showTimezone !== null ? o.showTimezone : this.support.timezone; html += '<dt class="ui_tpicker_timezone_label"' + (showTz ? '' : noDisplay) + '>' + o.timezoneText + '</dt>'; html += '<dd class="ui_tpicker_timezone" ' + (showTz ? '' : noDisplay) + '></dd>'; // Create the elements from string html += '</dl></div>'; var $tp = $(html); // if we only want time picker... if (o.timeOnly === true) { $tp.prepend('<div class="ui-widget-header ui-helper-clearfix ui-corner-all">' + '<div class="ui-datepicker-title">' + o.timeOnlyTitle + '</div>' + '</div>'); $dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide(); } // add sliders, adjust grids, add events for (i = 0, l = tp_inst.units.length; i < l; i++) { litem = tp_inst.units[i]; uitem = litem.substr(0, 1).toUpperCase() + litem.substr(1); show = o['show' + uitem] !== null ? o['show' + uitem] : this.support[litem]; // add the slider tp_inst[litem + '_slider'] = tp_inst.control.create(tp_inst, $tp.find('.ui_tpicker_' + litem + '_slider'), litem, tp_inst[litem], o[litem + 'Min'], max[litem], o['step' + uitem]); // adjust the grid and add click event if (show && o[litem + 'Grid'] > 0) { size = 100 * gridSize[litem] * o[litem + 'Grid'] / (max[litem] - o[litem + 'Min']); $tp.find('.ui_tpicker_' + litem + ' table').css({ width: size + "%", marginLeft: o.isRTL ? '0' : ((size / (-2 * gridSize[litem])) + "%"), marginRight: o.isRTL ? ((size / (-2 * gridSize[litem])) + "%") : '0', borderCollapse: 'collapse' }).find("td").click(function (e) { var $t = $(this), h = $t.html(), n = parseInt(h.replace(/[^0-9]/g), 10), ap = h.replace(/[^apm]/ig), f = $t.data('for'); // loses scope, so we use data-for if (f === 'hour') { if (ap.indexOf('p') !== -1 && n < 12) { n += 12; } else { if (ap.indexOf('a') !== -1 && n === 12) { n = 0; } } } tp_inst.control.value(tp_inst, tp_inst[f + '_slider'], litem, n); tp_inst._onTimeChange(); tp_inst._onSelectHandler(); }).css({ cursor: 'pointer', width: (100 / gridSize[litem]) + '%', textAlign: 'center', overflow: 'hidden' }); } // end if grid > 0 } // end for loop // Add timezone options this.timezone_select = $tp.find('.ui_tpicker_timezone').append('<select></select>').find("select"); $.fn.append.apply(this.timezone_select, $.map(o.timezoneList, function (val, idx) { return $("<option />").val(typeof val === "object" ? val.value : val).text(typeof val === "object" ? val.label : val); })); if (typeof(this.timezone) !== "undefined" && this.timezone !== null && this.timezone !== "") { var local_timezone = (new Date(this.inst.selectedYear, this.inst.selectedMonth, this.inst.selectedDay, 12)).getTimezoneOffset() * -1; if (local_timezone === this.timezone) { selectLocalTimezone(tp_inst); } else { this.timezone_select.val(this.timezone); } } else { if (typeof(this.hour) !== "undefined" && this.hour !== null && this.hour !== "") { this.timezone_select.val(o.timezone); } else { selectLocalTimezone(tp_inst); } } this.timezone_select.change(function () { tp_inst._onTimeChange(); tp_inst._onSelectHandler(); }); // End timezone options // inject timepicker into datepicker var $buttonPanel = $dp.find('.ui-datepicker-buttonpane'); if ($buttonPanel.length) { $buttonPanel.before($tp); } else { $dp.append($tp); } this.$timeObj = $tp.find('.ui_tpicker_time'); if (this.inst !== null) { var timeDefined = this.timeDefined; this._onTimeChange(); this.timeDefined = timeDefined; } // slideAccess integration: http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/ if (this._defaults.addSliderAccess) { var sliderAccessArgs = this._defaults.sliderAccessArgs, rtl = this._defaults.isRTL; sliderAccessArgs.isRTL = rtl; setTimeout(function () { // fix for inline mode if ($tp.find('.ui-slider-access').length === 0) { $tp.find('.ui-slider:visible').sliderAccess(sliderAccessArgs); // fix any grids since sliders are shorter var sliderAccessWidth = $tp.find('.ui-slider-access:eq(0)').outerWidth(true); if (sliderAccessWidth) { $tp.find('table:visible').each(function () { var $g = $(this), oldWidth = $g.outerWidth(), oldMarginLeft = $g.css(rtl ? 'marginRight' : 'marginLeft').toString().replace('%', ''), newWidth = oldWidth - sliderAccessWidth, newMarginLeft = ((oldMarginLeft * newWidth) / oldWidth) + '%', css = { width: newWidth, marginRight: 0, marginLeft: 0 }; css[rtl ? 'marginRight' : 'marginLeft'] = newMarginLeft; $g.css(css); }); } } }, 10); } // end slideAccess integration tp_inst._limitMinMaxDateTime(this.inst, true); } }, /* * This function tries to limit the ability to go outside the * min/max date range */ _limitMinMaxDateTime: function (dp_inst, adjustSliders) { var o = this._defaults, dp_date = new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay); if (!this._defaults.showTimepicker) { return; } // No time so nothing to check here if ($.datepicker._get(dp_inst, 'minDateTime') !== null && $.datepicker._get(dp_inst, 'minDateTime') !== undefined && dp_date) { var minDateTime = $.datepicker._get(dp_inst, 'minDateTime'), minDateTimeDate = new Date(minDateTime.getFullYear(), minDateTime.getMonth(), minDateTime.getDate(), 0, 0, 0, 0); if (this.hourMinOriginal === null || this.minuteMinOriginal === null || this.secondMinOriginal === null || this.millisecMinOriginal === null || this.microsecMinOriginal === null) { this.hourMinOriginal = o.hourMin; this.minuteMinOriginal = o.minuteMin; this.secondMinOriginal = o.secondMin; this.millisecMinOriginal = o.millisecMin; this.microsecMinOriginal = o.microsecMin; } if (dp_inst.settings.timeOnly || minDateTimeDate.getTime() === dp_date.getTime()) { this._defaults.hourMin = minDateTime.getHours(); if (this.hour <= this._defaults.hourMin) { this.hour = this._defaults.hourMin; this._defaults.minuteMin = minDateTime.getMinutes(); if (this.minute <= this._defaults.minuteMin) { this.minute = this._defaults.minuteMin; this._defaults.secondMin = minDateTime.getSeconds(); if (this.second <= this._defaults.secondMin) { this.second = this._defaults.secondMin; this._defaults.millisecMin = minDateTime.getMilliseconds(); if (this.millisec <= this._defaults.millisecMin) { this.millisec = this._defaults.millisecMin; this._defaults.microsecMin = minDateTime.getMicroseconds(); } else { if (this.microsec < this._defaults.microsecMin) { this.microsec = this._defaults.microsecMin; } this._defaults.microsecMin = this.microsecMinOriginal; } } else { this._defaults.millisecMin = this.millisecMinOriginal; this._defaults.microsecMin = this.microsecMinOriginal; } } else { this._defaults.secondMin = this.secondMinOriginal; this._defaults.millisecMin = this.millisecMinOriginal; this._defaults.microsecMin = this.microsecMinOriginal; } } else { this._defaults.minuteMin = this.minuteMinOriginal; this._defaults.secondMin = this.secondMinOriginal; this._defaults.millisecMin = this.millisecMinOriginal; this._defaults.microsecMin = this.microsecMinOriginal; } } else { this._defaults.hourMin = this.hourMinOriginal; this._defaults.minuteMin = this.minuteMinOriginal; this._defaults.secondMin = this.secondMinOriginal; this._defaults.millisecMin = this.millisecMinOriginal; this._defaults.microsecMin = this.microsecMinOriginal; } } if ($.datepicker._get(dp_inst, 'maxDateTime') !== null && $.datepicker._get(dp_inst, 'maxDateTime') !== undefined && dp_date) { var maxDateTime = $.datepicker._get(dp_inst, 'maxDateTime'), maxDateTimeDate = new Date(maxDateTime.getFullYear(), maxDateTime.getMonth(), maxDateTime.getDate(), 0, 0, 0, 0); if (this.hourMaxOriginal === null || this.minuteMaxOriginal === null || this.secondMaxOriginal === null || this.millisecMaxOriginal === null) { this.hourMaxOriginal = o.hourMax; this.minuteMaxOriginal = o.minuteMax; this.secondMaxOriginal = o.secondMax; this.millisecMaxOriginal = o.millisecMax; this.microsecMaxOriginal = o.microsecMax; } if (dp_inst.settings.timeOnly || maxDateTimeDate.getTime() === dp_date.getTime()) { this._defaults.hourMax = maxDateTime.getHours(); if (this.hour >= this._defaults.hourMax) { this.hour = this._defaults.hourMax; this._defaults.minuteMax = maxDateTime.getMinutes(); if (this.minute >= this._defaults.minuteMax) { this.minute = this._defaults.minuteMax; this._defaults.secondMax = maxDateTime.getSeconds(); if (this.second >= this._defaults.secondMax) { this.second = this._defaults.secondMax; this._defaults.millisecMax = maxDateTime.getMilliseconds(); if (this.millisec >= this._defaults.millisecMax) { this.millisec = this._defaults.millisecMax; this._defaults.microsecMax = maxDateTime.getMicroseconds(); } else { if (this.microsec > this._defaults.microsecMax) { this.microsec = this._defaults.microsecMax; } this._defaults.microsecMax = this.microsecMaxOriginal; } } else { this._defaults.millisecMax = this.millisecMaxOriginal; this._defaults.microsecMax = this.microsecMaxOriginal; } } else { this._defaults.secondMax = this.secondMaxOriginal; this._defaults.millisecMax = this.millisecMaxOriginal; this._defaults.microsecMax = this.microsecMaxOriginal; } } else { this._defaults.minuteMax = this.minuteMaxOriginal; this._defaults.secondMax = this.secondMaxOriginal; this._defaults.millisecMax = this.millisecMaxOriginal; this._defaults.microsecMax = this.microsecMaxOriginal; } } else { this._defaults.hourMax = this.hourMaxOriginal; this._defaults.minuteMax = this.minuteMaxOriginal; this._defaults.secondMax = this.secondMaxOriginal; this._defaults.millisecMax = this.millisecMaxOriginal; this._defaults.microsecMax = this.microsecMaxOriginal; } } if (dp_inst.settings.minTime!==null) { var tempMinTime=new Date("01/01/1970 " + dp_inst.settings.minTime); if (this.hour<tempMinTime.getHours()) { this.hour=this._defaults.hourMin=tempMinTime.getHours(); this.minute=this._defaults.minuteMin=tempMinTime.getMinutes(); } else if (this.hour===tempMinTime.getHours() && this.minute<tempMinTime.getMinutes()) { this.minute=this._defaults.minuteMin=tempMinTime.getMinutes(); } else { if (this._defaults.hourMin<tempMinTime.getHours()) { this._defaults.hourMin=tempMinTime.getHours(); this._defaults.minuteMin=tempMinTime.getMinutes(); } else if (this._defaults.hourMin===tempMinTime.getHours()===this.hour && this._defaults.minuteMin<tempMinTime.getMinutes()) { this._defaults.minuteMin=tempMinTime.getMinutes(); } else { this._defaults.minuteMin=0; } } } if (dp_inst.settings.maxTime!==null) { var tempMaxTime=new Date("01/01/1970 " + dp_inst.settings.maxTime); if (this.hour>tempMaxTime.getHours()) { this.hour=this._defaults.hourMax=tempMaxTime.getHours(); this.minute=this._defaults.minuteMax=tempMaxTime.getMinutes(); } else if (this.hour===tempMaxTime.getHours() && this.minute>tempMaxTime.getMinutes()) { this.minute=this._defaults.minuteMax=tempMaxTime.getMinutes(); } else { if (this._defaults.hourMax>tempMaxTime.getHours()) { this._defaults.hourMax=tempMaxTime.getHours(); this._defaults.minuteMax=tempMaxTime.getMinutes(); } else if (this._defaults.hourMax===tempMaxTime.getHours()===this.hour && this._defaults.minuteMax>tempMaxTime.getMinutes()) { this._defaults.minuteMax=tempMaxTime.getMinutes(); } else { this._defaults.minuteMax=59; } } } if (adjustSliders !== undefined && adjustSliders === true) { var hourMax = parseInt((this._defaults.hourMax - ((this._defaults.hourMax - this._defaults.hourMin) % this._defaults.stepHour)), 10), minMax = parseInt((this._defaults.minuteMax - ((this._defaults.minuteMax - this._defaults.minuteMin) % this._defaults.stepMinute)), 10), secMax = parseInt((this._defaults.secondMax - ((this._defaults.secondMax - this._defaults.secondMin) % this._defaults.stepSecond)), 10), millisecMax = parseInt((this._defaults.millisecMax - ((this._defaults.millisecMax - this._defaults.millisecMin) % this._defaults.stepMillisec)), 10), microsecMax = parseInt((this._defaults.microsecMax - ((this._defaults.microsecMax - this._defaults.microsecMin) % this._defaults.stepMicrosec)), 10); if (this.hour_slider) { this.control.options(this, this.hour_slider, 'hour', { min: this._defaults.hourMin, max: hourMax, step: this._defaults.stepHour }); this.control.value(this, this.hour_slider, 'hour', this.hour - (this.hour % this._defaults.stepHour)); } if (this.minute_slider) { this.control.options(this, this.minute_slider, 'minute', { min: this._defaults.minuteMin, max: minMax, step: this._defaults.stepMinute }); this.control.value(this, this.minute_slider, 'minute', this.minute - (this.minute % this._defaults.stepMinute)); } if (this.second_slider) { this.control.options(this, this.second_slider, 'second', { min: this._defaults.secondMin, max: secMax, step: this._defaults.stepSecond }); this.control.value(this, this.second_slider, 'second', this.second - (this.second % this._defaults.stepSecond)); } if (this.millisec_slider) { this.control.options(this, this.millisec_slider, 'millisec', { min: this._defaults.millisecMin, max: millisecMax, step: this._defaults.stepMillisec }); this.control.value(this, this.millisec_slider, 'millisec', this.millisec - (this.millisec % this._defaults.stepMillisec)); } if (this.microsec_slider) { this.control.options(this, this.microsec_slider, 'microsec', { min: this._defaults.microsecMin, max: microsecMax, step: this._defaults.stepMicrosec }); this.control.value(this, this.microsec_slider, 'microsec', this.microsec - (this.microsec % this._defaults.stepMicrosec)); } } }, /* * when a slider moves, set the internal time... * on time change is also called when the time is updated in the text field */ _onTimeChange: function () { if (!this._defaults.showTimepicker) { return; } var hour = (this.hour_slider) ? this.control.value(this, this.hour_slider, 'hour') : false, minute = (this.minute_slider) ? this.control.value(this, this.minute_slider, 'minute') : false, second = (this.second_slider) ? this.control.value(this, this.second_slider, 'second') : false, millisec = (this.millisec_slider) ? this.control.value(this, this.millisec_slider, 'millisec') : false, microsec = (this.microsec_slider) ? this.control.value(this, this.microsec_slider, 'microsec') : false, timezone = (this.timezone_select) ? this.timezone_select.val() : false, o = this._defaults, pickerTimeFormat = o.pickerTimeFormat || o.timeFormat, pickerTimeSuffix = o.pickerTimeSuffix || o.timeSuffix; if (typeof(hour) === 'object') { hour = false; } if (typeof(minute) === 'object') { minute = false; } if (typeof(second) === 'object') { second = false; } if (typeof(millisec) === 'object') { millisec = false; } if (typeof(microsec) === 'object') { microsec = false; } if (typeof(timezone) === 'object') { timezone = false; } if (hour !== false) { hour = parseInt(hour, 10); } if (minute !== false) { minute = parseInt(minute, 10); } if (second !== false) { second = parseInt(second, 10); } if (millisec !== false) { millisec = parseInt(millisec, 10); } if (microsec !== false) { microsec = parseInt(microsec, 10); } if (timezone !== false) { timezone = timezone.toString(); } var ampm = o[hour < 12 ? 'amNames' : 'pmNames'][0]; // If the update was done in the input field, the input field should not be updated. // If the update was done using the sliders, update the input field. var hasChanged = ( hour !== parseInt(this.hour,10) || // sliders should all be numeric minute !== parseInt(this.minute,10) || second !== parseInt(this.second,10) || millisec !== parseInt(this.millisec,10) || microsec !== parseInt(this.microsec,10) || (this.ampm.length > 0 && (hour < 12) !== ($.inArray(this.ampm.toUpperCase(), this.amNames) !== -1)) || (this.timezone !== null && timezone !== this.timezone.toString()) // could be numeric or "EST" format, so use toString() ); if (hasChanged) { if (hour !== false) { this.hour = hour; } if (minute !== false) { this.minute = minute; } if (second !== false) { this.second = second; } if (millisec !== false) { this.millisec = millisec; } if (microsec !== false) { this.microsec = microsec; } if (timezone !== false) { this.timezone = timezone; } if (!this.inst) { this.inst = $.datepicker._getInst(this.$input[0]); } this._limitMinMaxDateTime(this.inst, true); } if (this.support.ampm) { this.ampm = ampm; } // Updates the time within the timepicker this.formattedTime = $.datepicker.formatTime(o.timeFormat, this, o); if (this.$timeObj) { if (pickerTimeFormat === o.timeFormat) { this.$timeObj.text(this.formattedTime + pickerTimeSuffix); } else { this.$timeObj.text($.datepicker.formatTime(pickerTimeFormat, this, o) + pickerTimeSuffix); } } this.timeDefined = true; if (hasChanged) { this._updateDateTime(); //this.$input.focus(); // may automatically open the picker on setDate } }, /* * call custom onSelect. * bind to sliders slidestop, and grid click. */ _onSelectHandler: function () { var onSelect = this._defaults.onSelect || this.inst.settings.onSelect; var inputEl = this.$input ? this.$input[0] : null; if (onSelect && inputEl) { onSelect.apply(inputEl, [this.formattedDateTime, this]); } }, /* * update our input with the new date time.. */ _updateDateTime: function (dp_inst) { dp_inst = this.inst || dp_inst; var dtTmp = (dp_inst.currentYear > 0? new Date(dp_inst.currentYear, dp_inst.currentMonth, dp_inst.currentDay) : new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay)), dt = $.datepicker._daylightSavingAdjust(dtTmp), //dt = $.datepicker._daylightSavingAdjust(new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay)), //dt = $.datepicker._daylightSavingAdjust(new Date(dp_inst.currentYear, dp_inst.currentMonth, dp_inst.currentDay)), dateFmt = $.datepicker._get(dp_inst, 'dateFormat'), formatCfg = $.datepicker._getFormatConfig(dp_inst), timeAvailable = dt !== null && this.timeDefined; this.formattedDate = $.datepicker.formatDate(dateFmt, (dt === null ? new Date() : dt), formatCfg); var formattedDateTime = this.formattedDate; // if a slider was changed but datepicker doesn't have a value yet, set it if (dp_inst.lastVal === "") { dp_inst.currentYear = dp_inst.selectedYear; dp_inst.currentMonth = dp_inst.selectedMonth; dp_inst.currentDay = dp_inst.selectedDay; } /* * remove following lines to force every changes in date picker to change the input value * Bug descriptions: when an input field has a default value, and click on the field to pop up the date picker. * If the user manually empty the value in the input field, the date picker will never change selected value. */ //if (dp_inst.lastVal !== undefined && (dp_inst.lastVal.length > 0 && this.$input.val().length === 0)) { // return; //} if (this._defaults.timeOnly === true && this._defaults.timeOnlyShowDate === false) { formattedDateTime = this.formattedTime; } else if ((this._defaults.timeOnly !== true && (this._defaults.alwaysSetTime || timeAvailable)) || (this._defaults.timeOnly === true && this._defaults.timeOnlyShowDate === true)) { formattedDateTime += this._defaults.separator + this.formattedTime + this._defaults.timeSuffix; } this.formattedDateTime = formattedDateTime; if (!this._defaults.showTimepicker) { this.$input.val(this.formattedDate); } else if (this.$altInput && this._defaults.timeOnly === false && this._defaults.altFieldTimeOnly === true) { this.$altInput.val(this.formattedTime); this.$input.val(this.formattedDate); } else if (this.$altInput) { this.$input.val(formattedDateTime); var altFormattedDateTime = '', altSeparator = this._defaults.altSeparator !== null ? this._defaults.altSeparator : this._defaults.separator, altTimeSuffix = this._defaults.altTimeSuffix !== null ? this._defaults.altTimeSuffix : this._defaults.timeSuffix; if (!this._defaults.timeOnly) { if (this._defaults.altFormat) { altFormattedDateTime = $.datepicker.formatDate(this._defaults.altFormat, (dt === null ? new Date() : dt), formatCfg); } else { altFormattedDateTime = this.formattedDate; } if (altFormattedDateTime) { altFormattedDateTime += altSeparator; } } if (this._defaults.altTimeFormat !== null) { altFormattedDateTime += $.datepicker.formatTime(this._defaults.altTimeFormat, this, this._defaults) + altTimeSuffix; } else { altFormattedDateTime += this.formattedTime + altTimeSuffix; } this.$altInput.val(altFormattedDateTime); } else { this.$input.val(formattedDateTime); } this.$input.trigger("change"); }, _onFocus: function () { if (!this.$input.val() && this._defaults.defaultValue) { this.$input.val(this._defaults.defaultValue); var inst = $.datepicker._getInst(this.$input.get(0)), tp_inst = $.datepicker._get(inst, 'timepicker'); if (tp_inst) { if (tp_inst._defaults.timeOnly && (inst.input.val() !== inst.lastVal)) { try { $.datepicker._updateDatepicker(inst); } catch (err) { $.timepicker.log(err); } } } } }, /* * Small abstraction to control types * We can add more, just be sure to follow the pattern: create, options, value */ _controls: { // slider methods slider: { create: function (tp_inst, obj, unit, val, min, max, step) { var rtl = tp_inst._defaults.isRTL; // if rtl go -60->0 instead of 0->60 return obj.prop('slide', null).slider({ orientation: "horizontal", value: rtl ? val * -1 : val, min: rtl ? max * -1 : min, max: rtl ? min * -1 : max, step: step, slide: function (event, ui) { tp_inst.control.value(tp_inst, $(this), unit, rtl ? ui.value * -1 : ui.value); tp_inst._onTimeChange(); }, stop: function (event, ui) { tp_inst._onSelectHandler(); } }); }, options: function (tp_inst, obj, unit, opts, val) { if (tp_inst._defaults.isRTL) { if (typeof(opts) === 'string') { if (opts === 'min' || opts === 'max') { if (val !== undefined) { return obj.slider(opts, val * -1); } return Math.abs(obj.slider(opts)); } return obj.slider(opts); } var min = opts.min, max = opts.max; opts.min = opts.max = null; if (min !== undefined) { opts.max = min * -1; } if (max !== undefined) { opts.min = max * -1; } return obj.slider(opts); } if (typeof(opts) === 'string' && val !== undefined) { return obj.slider(opts, val); } return obj.slider(opts); }, value: function (tp_inst, obj, unit, val) { if (tp_inst._defaults.isRTL) { if (val !== undefined) { return obj.slider('value', val * -1); } return Math.abs(obj.slider('value')); } if (val !== undefined) { return obj.slider('value', val); } return obj.slider('value'); } }, // select methods select: { create: function (tp_inst, obj, unit, val, min, max, step) { var sel = '<select class="ui-timepicker-select ui-state-default ui-corner-all" data-unit="' + unit + '" data-min="' + min + '" data-max="' + max + '" data-step="' + step + '">', format = tp_inst._defaults.pickerTimeFormat || tp_inst._defaults.timeFormat; for (var i = min; i <= max; i += step) { sel += '<option value="' + i + '"' + (i === val ? ' selected' : '') + '>'; if (unit === 'hour') { sel += $.datepicker.formatTime($.trim(format.replace(/[^ht ]/ig, '')), {hour: i}, tp_inst._defaults); } else if (unit === 'millisec' || unit === 'microsec' || i >= 10) { sel += i; } else {sel += '0' + i.toString(); } sel += '</option>'; } sel += '</select>'; obj.children('select').remove(); $(sel).appendTo(obj).change(function (e) { tp_inst._onTimeChange(); tp_inst._onSelectHandler(); }); return obj; }, options: function (tp_inst, obj, unit, opts, val) { var o = {}, $t = obj.children('select'); if (typeof(opts) === 'string') { if (val === undefined) { return $t.data(opts); } o[opts] = val; } else { o = opts; } return tp_inst.control.create(tp_inst, obj, $t.data('unit'), $t.val(), o.min || $t.data('min'), o.max || $t.data('max'), o.step || $t.data('step')); }, value: function (tp_inst, obj, unit, val) { var $t = obj.children('select'); if (val !== undefined) { return $t.val(val); } return $t.val(); } } } // end _controls }); $.fn.extend({ /* * shorthand just to use timepicker. */ timepicker: function (o) { o = o || {}; var tmp_args = Array.prototype.slice.call(arguments); if (typeof o === 'object') { tmp_args[0] = $.extend(o, { timeOnly: true }); } return $(this).each(function () { $.fn.datetimepicker.apply($(this), tmp_args); }); }, /* * extend timepicker to datepicker */ datetimepicker: function (o) { o = o || {}; var tmp_args = arguments; if (typeof(o) === 'string') { if (o === 'getDate' || (o === 'option' && tmp_args.length === 2 && typeof (tmp_args[1]) === 'string')) { return $.fn.datepicker.apply($(this[0]), tmp_args); } else { return this.each(function () { var $t = $(this); $t.datepicker.apply($t, tmp_args); }); } } else { return this.each(function () { var $t = $(this); $t.datepicker($.timepicker._newInst($t, o)._defaults); }); } } }); /* * Public Utility to parse date and time */ $.datepicker.parseDateTime = function (dateFormat, timeFormat, dateTimeString, dateSettings, timeSettings) { var parseRes = parseDateTimeInternal(dateFormat, timeFormat, dateTimeString, dateSettings, timeSettings); if (parseRes.timeObj) { var t = parseRes.timeObj; parseRes.date.setHours(t.hour, t.minute, t.second, t.millisec); parseRes.date.setMicroseconds(t.microsec); } return parseRes.date; }; /* * Public utility to parse time */ $.datepicker.parseTime = function (timeFormat, timeString, options) { var o = extendRemove(extendRemove({}, $.timepicker._defaults), options || {}), iso8601 = (timeFormat.replace(/\'.*?\'/g, '').indexOf('Z') !== -1); // Strict parse requires the timeString to match the timeFormat exactly var strictParse = function (f, s, o) { // pattern for standard and localized AM/PM markers var getPatternAmpm = function (amNames, pmNames) { var markers = []; if (amNames) { $.merge(markers, amNames); } if (pmNames) { $.merge(markers, pmNames); } markers = $.map(markers, function (val) { return val.replace(/[.*+?|()\[\]{}\\]/g, '\\$&'); }); return '(' + markers.join('|') + ')?'; }; // figure out position of time elements.. cause js cant do named captures var getFormatPositions = function (timeFormat) { var finds = timeFormat.toLowerCase().match(/(h{1,2}|m{1,2}|s{1,2}|l{1}|c{1}|t{1,2}|z|'.*?')/g), orders = { h: -1, m: -1, s: -1, l: -1, c: -1, t: -1, z: -1 }; if (finds) { for (var i = 0; i < finds.length; i++) { if (orders[finds[i].toString().charAt(0)] === -1) { orders[finds[i].toString().charAt(0)] = i + 1; } } } return orders; }; var regstr = '^' + f.toString() .replace(/([hH]{1,2}|mm?|ss?|[tT]{1,2}|[zZ]|[lc]|'.*?')/g, function (match) { var ml = match.length; switch (match.charAt(0).toLowerCase()) { case 'h': return ml === 1 ? '(\\d?\\d)' : '(\\d{' + ml + '})'; case 'm': return ml === 1 ? '(\\d?\\d)' : '(\\d{' + ml + '})'; case 's': return ml === 1 ? '(\\d?\\d)' : '(\\d{' + ml + '})'; case 'l': return '(\\d?\\d?\\d)'; case 'c': return '(\\d?\\d?\\d)'; case 'z': return '(z|[-+]\\d\\d:?\\d\\d|\\S+)?'; case 't': return getPatternAmpm(o.amNames, o.pmNames); default: // literal escaped in quotes return '(' + match.replace(/\'/g, "").replace(/(\.|\$|\^|\\|\/|\(|\)|\[|\]|\?|\+|\*)/g, function (m) { return "\\" + m; }) + ')?'; } }) .replace(/\s/g, '\\s?') + o.timeSuffix + '$', order = getFormatPositions(f), ampm = '', treg; treg = s.match(new RegExp(regstr, 'i')); var resTime = { hour: 0, minute: 0, second: 0, millisec: 0, microsec: 0 }; if (treg) { if (order.t !== -1) { if (treg[order.t] === undefined || treg[order.t].length === 0) { ampm = ''; resTime.ampm = ''; } else { ampm = $.inArray(treg[order.t].toUpperCase(), o.amNames) !== -1 ? 'AM' : 'PM'; resTime.ampm = o[ampm === 'AM' ? 'amNames' : 'pmNames'][0]; } } if (order.h !== -1) { if (ampm === 'AM' && treg[order.h] === '12') { resTime.hour = 0; // 12am = 0 hour } else { if (ampm === 'PM' && treg[order.h] !== '12') { resTime.hour = parseInt(treg[order.h], 10) + 12; // 12pm = 12 hour, any other pm = hour + 12 } else { resTime.hour = Number(treg[order.h]); } } } if (order.m !== -1) { resTime.minute = Number(treg[order.m]); } if (order.s !== -1) { resTime.second = Number(treg[order.s]); } if (order.l !== -1) { resTime.millisec = Number(treg[order.l]); } if (order.c !== -1) { resTime.microsec = Number(treg[order.c]); } if (order.z !== -1 && treg[order.z] !== undefined) { resTime.timezone = $.timepicker.timezoneOffsetNumber(treg[order.z]); } return resTime; } return false; };// end strictParse // First try JS Date, if that fails, use strictParse var looseParse = function (f, s, o) { try { var d = new Date('2012-01-01 ' + s); if (isNaN(d.getTime())) { d = new Date('2012-01-01T' + s); if (isNaN(d.getTime())) { d = new Date('01/01/2012 ' + s); if (isNaN(d.getTime())) { throw "Unable to parse time with native Date: " + s; } } } return { hour: d.getHours(), minute: d.getMinutes(), second: d.getSeconds(), millisec: d.getMilliseconds(), microsec: d.getMicroseconds(), timezone: d.getTimezoneOffset() * -1 }; } catch (err) { try { return strictParse(f, s, o); } catch (err2) { $.timepicker.log("Unable to parse \ntimeString: " + s + "\ntimeFormat: " + f); } } return false; }; // end looseParse if (typeof o.parse === "function") { return o.parse(timeFormat, timeString, o); } if (o.parse === 'loose') { return looseParse(timeFormat, timeString, o); } return strictParse(timeFormat, timeString, o); }; /** * Public utility to format the time * @param {string} format format of the time * @param {Object} time Object not a Date for timezones * @param {Object} [options] essentially the regional[].. amNames, pmNames, ampm * @returns {string} the formatted time */ $.datepicker.formatTime = function (format, time, options) { options = options || {}; options = $.extend({}, $.timepicker._defaults, options); time = $.extend({ hour: 0, minute: 0, second: 0, millisec: 0, microsec: 0, timezone: null }, time); var tmptime = format, ampmName = options.amNames[0], hour = parseInt(time.hour, 10); if (hour > 11) { ampmName = options.pmNames[0]; } tmptime = tmptime.replace(/(?:HH?|hh?|mm?|ss?|[tT]{1,2}|[zZ]|[lc]|'.*?')/g, function (match) { switch (match) { case 'HH': return ('0' + hour).slice(-2); case 'H': return hour; case 'hh': return ('0' + convert24to12(hour)).slice(-2); case 'h': return convert24to12(hour); case 'mm': return ('0' + time.minute).slice(-2); case 'm': return time.minute; case 'ss': return ('0' + time.second).slice(-2); case 's': return time.second; case 'l': return ('00' + time.millisec).slice(-3); case 'c': return ('00' + time.microsec).slice(-3); case 'z': return $.timepicker.timezoneOffsetString(time.timezone === null ? options.timezone : time.timezone, false); case 'Z': return $.timepicker.timezoneOffsetString(time.timezone === null ? options.timezone : time.timezone, true); case 'T': return ampmName.charAt(0).toUpperCase(); case 'TT': return ampmName.toUpperCase(); case 't': return ampmName.charAt(0).toLowerCase(); case 'tt': return ampmName.toLowerCase(); default: return match.replace(/'/g, ""); } }); return tmptime; }; /* * the bad hack :/ override datepicker so it doesn't close on select // inspired: http://stackoverflow.com/questions/1252512/jquery-datepicker-prevent-closing-picker-when-clicking-a-date/1762378#1762378 */ $.datepicker._base_selectDate = $.datepicker._selectDate; $.datepicker._selectDate = function (id, dateStr) { var inst = this._getInst($(id)[0]), tp_inst = this._get(inst, 'timepicker'), was_inline; if (tp_inst && inst.settings.showTimepicker) { tp_inst._limitMinMaxDateTime(inst, true); was_inline = inst.inline; inst.inline = inst.stay_open = true; //This way the onSelect handler called from calendarpicker get the full dateTime this._base_selectDate(id, dateStr); inst.inline = was_inline; inst.stay_open = false; this._notifyChange(inst); this._updateDatepicker(inst); } else { this._base_selectDate(id, dateStr); } }; /* * second bad hack :/ override datepicker so it triggers an event when changing the input field * and does not redraw the datepicker on every selectDate event */ $.datepicker._base_updateDatepicker = $.datepicker._updateDatepicker; $.datepicker._updateDatepicker = function (inst) { // don't popup the datepicker if there is another instance already opened var input = inst.input[0]; if ($.datepicker