Adds pickerTimeFormat and pickerTimeSuffix options

Author: trentrichardson

index.html

@@ -157,7 +157,7 @@ <h3>Localization Options</h3>
 							<dd><em>Default: ['PM', 'P'], A Localization Setting</em> - Array of strings to try and parse against to determine PM.</dd>
 
 						<dt>timeFormat</dt>
-							<dd><em>Default: "hh:mm tt", A Localization Setting</em> - String of format tokens to be replaced with the time. <a href="#tp-formatting" title="Formatting" onclick="$('#tabs').tabs('select',2);">See Formatting</a>.</dd>
+							<dd><em>Default: "HH:mm", A Localization Setting</em> - String of format tokens to be replaced with the time. <a href="#tp-formatting" title="Formatting" onclick="$('#tabs').tabs('select',2);">See Formatting</a>.</dd>
 
 						<dt>timeSuffix</dt>
 							<dd><em>Default: "", A Localization Setting</em> - String to place after the formatted time.</dd>
@@ -228,6 +228,12 @@ <h3>Time Field Options</h3>
 						<dt>controlType</dt>
 							<dd><em>Default: 'slider'</em> - Whether to use 'slider' or 'select'. If 'slider' is unavailable through jQueryUI, 'select' will be used. For advanced usage you may pass an object which implements "create", "options", "value" methods to use controls other than sliders or selects.  See the _controls property in the source code for more details.</dd>
 
+						<dt>pickerTimeFormat</dt>
+							<dd><em>Default: (timeFormat option)</em> - How to format the time displayed within the timepicker.</dd>
+						
+						<dt>pickerTimeSuffix</dt>
+							<dd><em>Default: (timeSuffix option)</em> - String to place after the formatted time within the timepicker.</dd>
+
 						<dt>showHour</dt>
 							<dd><em>Default: true</em> - Whether to show the hour slider.</dd>
 
@@ -501,6 +507,7 @@ <h3 id="basic_examples">Basic Initializations</h3>
 <pre>
 $('#basic_example_3').datetimepicker({
 	timeFormat: "h:m t",
+	pickerTimeFormat: "HH:mm",
 	ampm: true
 });
 </pre>

jquery-ui-timepicker-addon.js

@@ -98,6 +98,8 @@
 			altAmpm: null,
 			altSeparator: null,
 			altTimeSuffix: null,
+			pickerTimeFormat: null,
+			pickerTimeSuffix: null,
 			showTimepicker: true,
 			timezoneIso8601: false,
 			timezoneList: null,
@@ -731,10 +733,19 @@
 				this.ampm = ampm;
 			}
 
+			// Updates the time within the timepicker
 			this.formattedTime = $.datepicker.formatTime(this._defaults.timeFormat, this, this._defaults);
 			if (this.$timeObj) {
-				this.$timeObj.text(this.formattedTime + o.timeSuffix);
+				var pickerTimeFormat = this._defaults.pickerTimeFormat || this._defaults.timeFormat,
+					pickerTimeSuffix = this._defaults.pickerTimeSuffix || this._defaults.timeSuffix;
+				if(pickerTimeFormat === this._defaults.timeFormat){
+					this.$timeObj.text(this.formattedTime + pickerTimeSuffix);
+				}
+				else{
+					this.$timeObj.text($.datepicker.formatTime(pickerTimeFormat, this, this._defaults) + pickerTimeSuffix);
+				}
 			}
+
 			this.timeDefined = true;
 			if (hasChanged) {
 				this._updateDateTime();
@@ -1167,10 +1178,9 @@
 			timezone: '+0000'
 		}, time);
 
-		var tmptime = format;
-		var ampmName = options.amNames[0];
-
-		var hour = parseInt(time.hour, 10);
+		var tmptime = format,
+			ampmName = options.amNames[0],
+			hour = parseInt(time.hour, 10);
 		if (options.ampm) {
 			if (hour > 11) {
 				ampmName = options.pmNames[0];
@@ -1179,13 +1189,13 @@
 		tmptime = tmptime.replace(/(?:HH?|hh?|mm?|ss?|[tT]{1,2}|[lz]|('.*?'|".*?"))/g, function(match) {
 		switch (match) {
 			case 'HH':
-				return _convert24to12(hour).slice(-2);
+				return ('0' + hour).slice(-2);
 			case 'H':
-				return _convert24to12(hour);
+				return hour;
 			case 'hh':
-				return ('0' + hour).slice(-2);
+				return _convert24to12(hour).slice(-2);
 			case 'h':
-				return hour;
+				return _convert24to12(hour);
 			case 'mm':
 				return ('0' + time.minute).slice(-2);
 			case 'm':
@@ -1198,15 +1208,14 @@
 				return ('00' + time.millisec).slice(-3);
 			case 'z':
 				return time.timezone === null? options.defaultTimezone : time.timezone;
+			case 'T': 
+				return ampmName.charAt(0).toUpperCase();
+			case 'TT': 
+				return ampmName.toUpperCase();
 			case 't':
+				return ampmName.charAt(0).toLowerCase();
 			case 'tt':
-				if (options.ampm) {
-					if (match.length == 1) {
-						ampmName = ampmName.charAt(0);
-					}
-					return match.charAt(0) === 'T' ? ampmName.toUpperCase() : ampmName.toLowerCase();
-				}
-				return '';
+				return ampmName.toLowerCase();
 			default:
 				return match.replace(/\'/g, "") || "'";
 			}