I’m trying to implement the jQuery UI Date Picker with the Time Picker addon (http:\/\/trentrichardson.com\/examples\/timepicker\/)<\/p>\n
For some reason, I’m getting NaN instead of numbers and the little slider isn’t showing up. I downloaded Redmound theme from the UI, so that might have something to do with it? But I’ve also copied the code from the demo website.<\/p>\n
Any ideas?<\/p>\n
Here’s the site I’m trying to get it working on:<\/p>\n
http:\/\/citysouthphysio.website.2010.360southclients.com\/book-appointment.html<\/p>\n
The code is:<\/p>\n
jQuery('#date').datetimepicker({\n duration: '',\n dateFormat: 'dd-mm-yy',\n ampm: true,\n hourMin: 8,\n hourMax: 16\n});\n<\/code><\/pre>\nAnd the jquery timepicker js is:<\/p>\n
\/*\n* jQuery timepicker addon\n* By: Trent Richardson [http:\/\/trentrichardson.com]\n* Version 0.6.2\n* Last Modified: 9\/26\/2010\n* \n* Copyright 2010 Trent Richardson\n* Dual licensed under the MIT and GPL licenses.\n* http:\/\/trentrichardson.com\/Impromptu\/GPL-LICENSE.txt\n* http:\/\/trentrichardson.com\/Impromptu\/MIT-LICENSE.txt\n* \n* HERES THE CSS:\n* .ui-timepicker-div dl{ text-align: left; }\n* .ui-timepicker-div dl dt{ height: 25px; }\n* .ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }\n*\/\n\n(function($) {\n function Timepicker(singleton) {\n if(typeof(singleton) === 'boolean' && singleton == true) {\n this.regional = []; \/\/ Available regional settings, indexed by language code\n this.regional[''] = { \/\/ Default regional settings\n currentText: 'Now',\n ampm: false,\n timeFormat: 'hh:mm tt',\n timeOnlyTitle: 'Choose Time',\n timeText: 'Time',\n hourText: 'Hour',\n minuteText: 'Minute',\n secondText: 'Second'\n };\n this.defaults = { \/\/ Global defaults for all the datetime picker instances\n showButtonPanel: true,\n timeOnly: false,\n showHour: true,\n showMinute: true,\n showSecond: false,\n showTime: true,\n stepHour: 0.05,\n stepMinute: 0.05,\n stepSecond: 0.05,\n hour: 0,\n minute: 0,\n second: 0,\n hourMin: 0,\n minuteMin: 0,\n secondMin: 0,\n hourMax: 23,\n minuteMax: 59,\n secondMax: 59,\n alwaysSetTime: true\n };\n $.extend(this.defaults, this.regional['']);\n } else {\n this.defaults = $.extend({}, $.timepicker.defaults);\n }\n\n }\n\n Timepicker.prototype = {\n $input: null,\n $timeObj: null,\n inst: null,\n hour_slider: null,\n minute_slider: null,\n second_slider: null,\n hour: 0,\n minute: 0,\n second: 0,\n ampm: '',\n formattedDate: '',\n formattedTime: '',\n formattedDateTime: '',\n\n \/\/########################################################################\n \/\/ add our sliders to the calendar\n \/\/########################################################################\n addTimePicker: function(dp_inst) {\n var tp_inst = this;\n var currDT = this.$input.val();\n var regstr = this.defaults.timeFormat.toString()\n .replace(\/h{1,2}\/ig, '(\\\\d?\\\\d)')\n .replace(\/m{1,2}\/ig, '(\\\\d?\\\\d)')\n .replace(\/s{1,2}\/ig, '(\\\\d?\\\\d)')\n .replace(\/t{1,2}\/ig, '(am|pm|a|p)?')\n .replace(\/\\s\/g, '\\\\s?') + '$';\n\n if (!this.defaults.timeOnly) {\n \/\/the time should come after x number of characters and a space. x = at least the length of text specified by the date format\n var dp_dateFormat = $.datepicker._get(dp_inst, 'dateFormat');\n regstr = '.{' + dp_dateFormat.length + ',}\\\\s+' + regstr;\n }\n\n var order = this.getFormatPositions();\n var treg = currDT.match(new RegExp(regstr, 'i'));\n\n if (treg) {\n if (order.t !== -1) {\n this.ampm = ((treg[order.t] === undefined || treg[order.t].length === 0) ? '' : (treg[order.t].charAt(0).toUpperCase() == 'A') ? 'AM' : 'PM').toUpperCase();\n }\n\n if (order.h !== -1) {\n if (this.ampm == 'AM' && treg[order.h] == '12') {\n \/\/ 12am = 0 hour\n this.hour = 0;\n } else if (this.ampm == 'PM' && treg[order.h] != '12') {\n \/\/ 12pm = 12 hour, any other pm = hour + 12\n this.hour = (parseFloat(treg[order.h]) + 12).toFixed(0);\n } else {\n this.hour = treg[order.h];\n }\n }\n\n if (order.m !== -1) {\n this.minute = treg[order.m];\n }\n\n if (order.s !== -1) {\n this.second = treg[order.s];\n }\n }\n\n tp_inst.timeDefined = (treg) ? true : false;\n\n if (typeof(dp_inst.stay_open) !== 'boolean' || dp_inst.stay_open === false) {\n \/\/ wait for datepicker to create itself.. 60% of the time it works every time..\n setTimeout(function() {\n tp_inst.injectTimePicker(dp_inst, tp_inst);\n }, 10);\n } else {\n tp_inst.injectTimePicker(dp_inst, tp_inst);\n }\n\n },\n\n \/\/########################################################################\n \/\/ figure out position of time elements.. cause js cant do named captures\n \/\/########################################################################\n getFormatPositions: function() {\n var finds = this.defaults.timeFormat.toLowerCase().match(\/(h{1,2}|m{1,2}|s{1,2}|t{1,2})\/g);\n var orders = { h: -1, m: -1, s: -1, t: -1 };\n\n if (finds) {\n for (var i = 0; i < finds.length; i++) {\n if (orders[finds[i].toString().charAt(0)] == -1) {\n orders[finds[i].toString().charAt(0)] = i + 1;\n }\n }\n }\n\n return orders;\n },\n\n \/\/########################################################################\n \/\/ generate and inject html for timepicker into ui datepicker\n \/\/########################################################################\n injectTimePicker: function(dp_inst, tp_inst) {\n var $dp = dp_inst.dpDiv;\n var opts = tp_inst.defaults;\n\n \/\/ Added by Peter Medeiros:\n \/\/ - Figure out what the hour\/minute\/second max should be based on the step values.\n \/\/ - Example: if stepMinute is 15, then minMax is 45.\n var hourMax = opts.hourMax - (opts.hourMax % opts.stepHour);\n var minMax = opts.minuteMax - (opts.minuteMax % opts.stepMinute);\n var secMax = opts.secondMax - (opts.secondMax % opts.stepSecond);\n\n \/\/ Prevent displaying twice\n if ($dp.find(\"div#ui-timepicker-div-\"+ dp_inst.id).length === 0) {\n var noDisplay = ' style=\"display:none;\"';\n var html =\n '' +\n ''+ opts.timeText +'' +\n '' +\n ''+ opts.hourText +'' +\n '' +\n ''+ opts.minuteText +'' +\n '' +\n ''+ opts.secondText +'' +\n '' +\n '';\n $tp = $(html);\n\n \/\/ if we only want time picker...\n if (opts.timeOnly === true) {\n $tp.prepend(\n '' +\n ''+ opts.timeOnlyTitle +'' +\n '');\n $dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide();\n }\n\n tp_inst.hour_slider = $tp.find('#ui_tpicker_hour_'+ dp_inst.id).slider({\n orientation: \"horizontal\",\n value: tp_inst.hour,\n min: opts.hourMin,\n max: hourMax,\n step: opts.stepHour,\n slide: function(event, ui) {\n tp_inst.hour_slider.slider( \"option\", \"value\", ui.value );\n tp_inst.onTimeChange(dp_inst, tp_inst);\n }\n });\n\n \/\/ Updated by Peter Medeiros:\n \/\/ - Pass in Event and UI instance into slide function\n tp_inst.minute_slider = $tp.find('#ui_tpicker_minute_'+ dp_inst.id).slider({\n orientation: \"horizontal\",\n value: tp_inst.minute,\n min: opts.minuteMin,\n max: minMax,\n step: opts.stepMinute,\n slide: function(event, ui) {\n \/\/ update the global minute slider instance value with the current slider value\n tp_inst.minute_slider.slider( \"option\", \"value\", ui.value );\n tp_inst.onTimeChange(dp_inst, tp_inst);\n }\n });\n\n tp_inst.second_slider = $tp.find('#ui_tpicker_second_'+ dp_inst.id).slider({\n orientation: \"horizontal\",\n value: tp_inst.second,\n min: opts.secondMin,\n max: secMax,\n step: opts.stepSecond,\n slide: function(event, ui) {\n tp_inst.second_slider.slider( \"option\", \"value\", ui.value );\n tp_inst.onTimeChange(dp_inst, tp_inst);\n }\n });\n\n $dp.find('.ui-datepicker-calendar').after($tp);\n\n tp_inst.$timeObj = $('#ui_tpicker_time_'+ dp_inst.id);\n\n if (dp_inst !== null) {\n var timeDefined = tp_inst.timeDefined;\n tp_inst.onTimeChange(dp_inst, tp_inst);\n tp_inst.timeDefined = timeDefined;\n }\n }\n },\n\n \/\/########################################################################\n \/\/ when a slider moves..\n \/\/ on time change is also called when the time is updated in the text field\n \/\/########################################################################\n onTimeChange: function(dp_inst, tp_inst) {\n var hour = tp_inst.hour_slider.slider('value');\n var minute = tp_inst.minute_slider.slider('value');\n var second = tp_inst.second_slider.slider('value');\n var ampm = (hour < 12) ? 'AM' : 'PM';\n var hasChanged = false;\n\n \/\/ If the update was done in the input field, this field should not be updated.\n \/\/ If the update was done using the sliders, update the input field.\n if (tp_inst.hour != hour || tp_inst.minute != minute || tp_inst.second != second || (tp_inst.ampm.length > 0 && tp_inst.ampm != ampm)) {\n hasChanged = true;\n }\n\n tp_inst.hour = parseFloat(hour).toFixed(0);\n tp_inst.minute = parseFloat(minute).toFixed(0);\n tp_inst.second = parseFloat(second).toFixed(0);\n tp_inst.ampm = ampm;\n\n tp_inst.formatTime(tp_inst);\n tp_inst.$timeObj.text(tp_inst.formattedTime);\n\n if (hasChanged) {\n tp_inst.updateDateTime(dp_inst, tp_inst);\n tp_inst.timeDefined = true;\n }\n },\n\n \/\/########################################################################\n \/\/ format the time all pretty...\n \/\/########################################################################\n formatTime: function(tp_inst) {\n var tmptime = tp_inst.defaults.timeFormat.toString();\n var hour12 = ((tp_inst.ampm == 'AM') ? (tp_inst.hour) : (tp_inst.hour % 12));\n hour12 = (hour12 === 0) ? 12 : hour12;\n\n if (tp_inst.defaults.ampm === true) {\n tmptime = tmptime.toString()\n .replace(\/hh\/g, ((hour12 < 10) ? '0' : '') + hour12)\n .replace(\/h\/g, hour12)\n .replace(\/mm\/g, ((tp_inst.minute < 10) ? '0' : '') + tp_inst.minute)\n .replace(\/m\/g, tp_inst.minute)\n .replace(\/ss\/g, ((tp_inst.second < 10) ? '0' : '') + tp_inst.second)\n .replace(\/s\/g, tp_inst.second)\n .replace(\/TT\/g, tp_inst.ampm.toUpperCase())\n .replace(\/tt\/g, tp_inst.ampm.toLowerCase())\n .replace(\/T\/g, tp_inst.ampm.charAt(0).toUpperCase())\n .replace(\/t\/g, tp_inst.ampm.charAt(0).toLowerCase());\n\n } else {\n tmptime = tmptime.toString()\n .replace(\/hh\/g, ((tp_inst.hour < 10) ? '0' : '') + tp_inst.hour)\n .replace(\/h\/g, tp_inst.hour)\n .replace(\/mm\/g, ((tp_inst.minute < 10) ? '0' : '') + tp_inst.minute)\n .replace(\/m\/g, tp_inst.minute)\n .replace(\/ss\/g, ((tp_inst.second < 10) ? '0' : '') + tp_inst.second)\n .replace(\/s\/g, tp_inst.second);\n tmptime = $.trim(tmptime.replace(\/t\/gi, ''));\n }\n\n tp_inst.formattedTime = tmptime;\n return tp_inst.formattedTime;\n },\n\n \/\/########################################################################\n \/\/ update our input with the new date time..\n \/\/########################################################################\n updateDateTime: function(dp_inst, tp_inst) {\n \/\/var dt = this.$input.datepicker('getDate');\n var dt = new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay);\n var dateFmt = $.datepicker._get(dp_inst, 'dateFormat');\n var formatCfg = $.datepicker._getFormatConfig(dp_inst);\n this.formattedDate = $.datepicker.formatDate(dateFmt, (dt === null ? new Date() : dt), formatCfg);\n var formattedDateTime = this.formattedDate;\n var timeAvailable = dt !== null && tp_inst.timeDefined;\n\n if(this.defaults.timeOnly === true){\n formattedDateTime = this.formattedTime;\n }\n else if (this.defaults.timeOnly !== true && (this.defaults.alwaysSetTime || timeAvailable)) {\n formattedDateTime += ' ' + this.formattedTime;\n }\n\n this.formattedDateTime = formattedDateTime;\n this.$input.val(formattedDateTime);\n this.$input.trigger(\"change\");\n },\n\n setDefaults: function(settings) {\n extendRemove(this.defaults, settings || {});\n return this;\n }\n };\n\n \/\/########################################################################\n \/\/ extend timepicker to datepicker\n \/\/######################################################################## \n jQuery.fn.datetimepicker = function(o) {\n var opts = (o === undefined ? {} : o);\n var input = $(this);\n var tp = new Timepicker();\n var inlineSettings = {};\n\n for (var attrName in tp.defaults) {\n var attrValue = input.attr('time:' + attrName);\n if (attrValue) {\n try {\n inlineSettings[attrName] = eval(attrValue);\n } catch (err) {\n inlineSettings[attrName] = attrValue;\n }\n }\n }\n tp.defaults = $.extend(tp.defaults, inlineSettings);\n\n var beforeShowFunc = function(input, inst) {\n tp.hour = tp.defaults.hour;\n tp.minute = tp.defaults.minute;\n tp.second = tp.defaults.second;\n tp.ampm = '';\n tp.$input = $(input);\n tp.inst = inst;\n tp.addTimePicker(inst);\n if ($.isFunction(opts.beforeShow)) {\n opts.beforeShow(input, inst);\n }\n };\n\n var onChangeMonthYearFunc = function(year, month, inst) {\n \/\/ Update the time as well : this prevents the time from disappearing from the input field.\n tp.updateDateTime(inst, tp);\n if ($.isFunction(opts.onChangeMonthYear)) {\n opts.onChangeMonthYear(year, month, inst);\n }\n };\n\n var onCloseFunc = function(dateText, inst) {\n if(tp.timeDefined === true && input.val() != '') {\n tp.updateDateTime(inst, tp);\n }\n if ($.isFunction(opts.onClose)) {\n opts.onClose(dateText, inst);\n }\n };\n\n tp.defaults = $.extend({}, tp.defaults, opts, {\n beforeShow: beforeShowFunc,\n onChangeMonthYear: onChangeMonthYearFunc,\n onClose: onCloseFunc,\n timepicker: tp \/\/ add timepicker as a property of datepicker: $.datepicker._get(dp_inst, 'timepicker');\n });\n\n $(this).datepicker(tp.defaults);\n\n };\n\n \/\/########################################################################\n \/\/ shorthand just to use timepicker..\n \/\/########################################################################\n jQuery.fn.timepicker = function(opts) {\n opts = $.extend(opts, { timeOnly: true });\n $(this).datetimepicker(opts);\n };\n\n \/\/########################################################################\n \/\/ the bad hack :\/ override datepicker so it doesnt close on select\n \/\/ inspired: http:\/\/stackoverflow.com\/questions\/1252512\/jquery-datepicker-prevent-closing-picker-when-clicking-a-date\/1762378#1762378\n \/\/########################################################################\n $.datepicker._base_selectDate = $.datepicker._selectDate;\n $.datepicker._selectDate = function (id, dateStr) {\n var target = $(id);\n var inst = this._getInst(target[0]);\n var tp_inst = $.datepicker._get(inst, 'timepicker');\n\n if(tp_inst){\n inst.inline = true;\n inst.stay_open = true;\n $.datepicker._base_selectDate(id, dateStr);\n inst.stay_open = false;\n inst.inline = false;\n this._notifyChange(inst);\n this._updateDatepicker(inst);\n }\n else{\n $.datepicker._base_selectDate(id, dateStr);\n }\n };\n\n \/\/#############################################################################################\n \/\/ second bad hack :\/ override datepicker so it triggers an event when changing the input field\n \/\/ and does not redraw the datepicker on every selectDate event\n \/\/#############################################################################################\n $.datepicker._base_updateDatepicker = $.datepicker._updateDatepicker;\n $.datepicker._updateDatepicker = function(inst) {\n if (typeof(inst.stay_open) !== 'boolean' || inst.stay_open === false) {\n this._base_updateDatepicker(inst);\n \/\/ Reload the time control when changing something in the input text field.\n this._beforeShow(inst.input, inst);\n }\n };\n\n $.datepicker._beforeShow = function(input, inst) {\n var beforeShow = this._get(inst, 'beforeShow');\n if (beforeShow) {\n inst.stay_open = true;\n beforeShow.apply((inst.input ? inst.input[0] : null), [inst.input, inst]);\n inst.stay_open = false;\n }\n };\n\n \/\/#######################################################################################\n \/\/ third bad hack :\/ override datepicker so it allows spaces and colan in the input field\n \/\/#######################################################################################\n $.datepicker._base_doKeyPress = $.datepicker._doKeyPress;\n $.datepicker._doKeyPress = function(event) {\n var inst = $.datepicker._getInst(event.target);\n var tp_inst = $.datepicker._get(inst, 'timepicker');\n\n if(tp_inst){\n if ($.datepicker._get(inst, 'constrainInput')) {\n var dateChars = $.datepicker._possibleChars($.datepicker._get(inst, 'dateFormat'));\n var chr = String.fromCharCode(event.charCode === undefined ? event.keyCode : event.charCode);\n var chrl = chr.toLowerCase();\n \/\/ keyCode == 58 => \":\"\n \/\/ keyCode == 32 => \" \"\n return event.ctrlKey || (chr < ' ' || !dateChars || dateChars.indexOf(chr) > -1 || event.keyCode == 58 || event.keyCode == 32 || chr == ':' || chr == ' ' || chrl == 'a' || chrl == 'p' || charl == 'm');\n }\n }\n else{\n return $.datepicker._base_doKeyPress(event);\n }\n\n };\n\n \/\/#######################################################################################\n \/\/ override \"Today\" button to also grab the time.\n \/\/#######################################################################################\n $.datepicker._base_gotoToday = $.datepicker._gotoToday;\n $.datepicker._gotoToday = function(id) {\n $.datepicker._base_gotoToday(id);\n\n var target = $(id);\n var dp_inst = this._getInst(target[0]);\n var tp_inst = $.datepicker._get(dp_inst, 'timepicker');\n\n if(tp_inst){\n var date = new Date();\n var hour = date.getHours();\n var minute = date.getMinutes();\n var second = date.getSeconds();\n\n \/\/check if within min\/max times..\n if( (hour < tp_inst.defaults.hourMin || hour > tp_inst.defaults.hourMax) || (minute < tp_inst.defaults.minuteMin || minute > tp_inst.defaults.minuteMax) || (second < tp_inst.defaults.secondMin || second > tp_inst.defaults.secondMax) ){ \n hour = tp_inst.defaults.hourMin;\n minute = tp_inst.defaults.minuteMin;\n second = tp_inst.defaults.secondMin; \n }\n\n tp_inst.hour_slider.slider('value', hour );\n tp_inst.minute_slider.slider('value', minute );\n tp_inst.second_slider.slider('value', second );\n\n tp_inst.onTimeChange(dp_inst, tp_inst);\n }\n };\n\n \/\/#######################################################################################\n \/\/ jQuery extend now ignores nulls!\n \/\/#######################################################################################\n function extendRemove(target, props) {\n $.extend(target, props);\n for (var name in props)\n if (props[name] == null || props[name] == undefined)\n target[name] = props[name];\n return target;\n };\n\n $.timepicker = new Timepicker(true); \/\/ singleton instance\n})(jQuery);\n<\/code><\/pre>\n\n- \n
I had put the script inside Joomla, it was conflicting with MooTools. I removed MooTools and it works now.<\/p>\n
If anyone else is using this inside joomla, here’s how to remove mootools from your template.<\/p>\n
$user =& JFactory::getUser();\nif ($user->get('guest') == 1) {\n $headerstuff = $this->getHeadData();\n $headerstuff['scripts'] = array();\n $this->setHeadData($headerstuff); \n};\n<\/code><\/pre>\n<\/li>\n<\/ol>\nOriginally posted 2014-02-03 02:28:20. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
I’m trying to implement the jQuery UI Date Picker with the Time Picker addon (http:\/\/trentrichardson.com\/examples\/timepicker\/) For some reason, I’m getting NaN instead of numbers and the little slider isn’t showing up. I downloaded Redmound theme from the UI, so that might have something to do with it? But I’ve also copied the code from the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2562","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=2562"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/2562\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=2562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=2562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=2562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}