Timepicker: ampm and seconds options

jquery · Sep 14, 2011 · dcf1499 · dcf1499
1 parent ca03a09
commit dcf1499
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 32 deletions.
diff --git a/tests/visual/timepicker/timepicker.html b/tests/visual/timepicker/timepicker.html
@@ -15,6 +15,9 @@
 	$(function() {
 		$("#timepicker").timepicker();
 		$("#timepicker2").timepicker();
+		$("#timepicker3").timepicker({ ampm: false });
+		$("#timepicker4").timepicker({ seconds: false });
+		$("#timepicker5").timepicker({ ampm: false, seconds: false });
 	});
 	</script>
 	<style>
@@ -30,6 +33,12 @@
 		<input id="timepicker">
 		<label>Timepicker - With Initial Value</label>
 		<input id="timepicker2" value="12:00:00 pm">
+		<label>Timepicker - <code>{ ampm: false }</code></label>
+		<input id="timepicker3">
+		<label>Timepicker - <code>{ seconds: false }</code></label>
+		<input id="timepicker4">
+		<label>Timepicker - <code>{ ampm: false, seconds: false }</code></label>
+		<input id="timepicker5">
 	</form>
 </body>
 </html>
diff --git a/ui/jquery.ui.timepicker.js b/ui/jquery.ui.timepicker.js
@@ -24,40 +24,48 @@ function sixty( value ) {
 	}
 }
 
+var maskDefinitions = {
+	hh: function( value ) {
+		value = parseInt( value, 10 );
+		if ( value >= 1 || value <= 12 ) {
+			return ( value < 10 ? "0" : "" ) + value;
+		}
+	},
+	HH: function( value ) {
+		value = parseInt( value, 10 );
+		if ( value >= 0 || value <= 23 ) {
+			return ( value < 10 ? "0" : "" ) + value;
+		}
+	},
+	mm: sixty,
+	ss: sixty,
+	pp: function( value ) {
+		var lower = value.toLowerCase(),
+			character = lower.charAt( 0 );
+		if ( lower.length > 1 && lower.charAt( 1 ) !== "m" ) {
+			return false;
+		}
+		switch ( character ) {
+		case "a":
+			return "am";
+		case "p":
+			return "pm";
+		}
+	}
+};
 
 $.widget( "ui.timepicker", {
 	version: "@VERSION",
 	defaultElement: "<input>",
 	options: {
-
+		ampm: true,
+		seconds: true
 	},
 	_create: function() {
 		this.element.mask({
-			mask: "hh:mm:ss pp",
+			mask: this._generateMask(),
 			clearEmpty: false,
-			definitions: {
-				hh: function( value ) {
-					value = parseInt( value, 10 );
-					if ( value >= 1 || value <= 12 ) {
-						return ( value < 10 ? "0" : "" ) + value;
-					}
-				},
-				mm: sixty,
-				ss: sixty,
-				pp: function( value ) {
-					var lower = value.toLowerCase(),
-						character = lower.charAt( 0 );
-					if ( lower.length > 1 && lower.charAt( 1 ) !== "m" ) {
-						return false;
-					}
-					switch ( character ) {
-					case "a":
-						return "am";
-					case "p":
-						return "pm";
-					}
-				}
-			}
+			definitions: maskDefinitions
 		});
 		this.mask = this.element.data( "mask" );
 		this.element.spinner();
@@ -78,6 +86,18 @@ $.widget( "ui.timepicker", {
 		this._setField( 0 );
 		this._bind( this._events );
 	},
+	_generateMask: function() {
+		var mask = "";
+		mask += this.options.ampm ? "hh" : "HH";
+		mask += ":mm";
+		if ( this.options.seconds ) {
+			mask += ":ss";
+		}
+		if ( this.options.ampm ) {
+			mask += " pp";
+		}
+		return mask;
+	},
 	_events: {
 		keydown: function( event ) {
 			this._delay(function() {
@@ -90,34 +110,33 @@ $.widget( "ui.timepicker", {
 		this.currentField = field;
 		switch( field ) {
 			case 0:
-				this.spinner.options.min = 1;
-				this.spinner.options.max = 12;
+				this.spinner.options.min = this.options.ampm ? 1 : 0;
+				this.spinner.options.max = this.options.ampm ? 12 : 23;
 				break;
 			case 1:
-			case 2:
+			case this.options.seconds ? 2 : -1 :
 				this.spinner.options.min = 0;
 				this.spinner.options.max = 59;
 				break;
-			case 3:
+			case this.options.seconds ? 3 : 2 :
 				this.spinner.options.min = 0;
 				this.spinner.options.max = 1;
 				break;
 		}
 	},
 	_spinnerParse: function( val ) {
 		val = this.mask.buffer[ this.currentField * 3 ].value;
-		if ( this.currentField === 3 ) {
+		if ( this.currentField === ( this.options.seconds ? 3 : 2 ) ) {
 			return val === "am" ? 0 : 1;
 		}
 		return parseInt( val, 10 ) || 0;
 	},
 	_spinnerValue: function( val ) {
 		var bufferObject = this.mask.buffer[ this.currentField * 3 ];
-		if ( this.currentField === 3 ) {
+		if ( this.currentField === ( this.options.seconds ? 3 : 2 ) ) {
 			val = parseInt( val, 10 ) ? "pm" : "am";
 		}
 		bufferObject.value = bufferObject.valid( val );
-		console.log( "setting", val, this.currentField, bufferObject );
 		this.mask._paint();
 		this.spinner._refresh();
 		this.mask._caret( this.currentField * 3, this.currentField * 3 + 2 );