Spinner: Introduce page option to configure page size. Use that for timespinner demo to spin minutes on cursor up/down, hours on page up/down.

Author: jzaefferer

demos/spinner/time.html

@@ -8,33 +8,38 @@
 	<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
 	<script type="text/javascript" src="../../external/glob.js"></script>
 	<script type="text/javascript" src="../../external/glob.de-DE.js"></script>
-	<script type="text/javascript" src="../../external/glob.ja-JP.js"></script>
 	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
 	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
 	<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
 	<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 	<script type="text/javascript">
 	$.widget("ui.timespinner", $.ui.spinner, {
+		options: {
+			// seconds
+			step: 60 * 1000,
+			// hours
+			page: 60
+		},
+		
 		_parse: function(value) {
 			if (typeof value == 'string') {
-				// TODO use Globalization to parse time
-				var parts = value.split(":");
-				return parseInt(parts[0]) * 60 + parseInt(parts[1]);
+				return +Globalization.parseDate(value)
 			}
 			return value;
 		},
 		_format: function() {
-			if (!this.options.value) {
-				this.element.val( "00:00" );
-			}
-			// TODO use Globalization to format time
-			this.element.val( parseInt(this.options.value / 60) + ":" + (this.options.value % 60) );
+			this.element.val( Globalization.format(new Date(this.options.value), "t") );
 		}
 	})
 	$(function() {
-		$("#spinner").timespinner({
-			step: 60
+		$("#spinner").timespinner();
+		
+		
+		$("#culture").change(function() {
+			var current = $("#spinner").timespinner("value");
+			Globalization.preferCulture($(this).val());
+			$("#spinner").timespinner("value", current);
 		});
 	});
 	</script>
@@ -44,7 +49,14 @@
 <div class="demo">
 <p>
 	<label for="spinner">Decimal spinner:</label>
-	<input id="spinner" name="spinner" value="15:30" />
+	<input id="spinner" name="spinner" value="08:30 PM" />
+</p>
+<p>
+	<label for="culture">Select a culture to use for formatting:</label>
+	<select id="culture">
+		<option value="en-EN" selected="selected">English</option>
+		<option value="de-DE">German</option>
+	</select>
 </p>
 </div>
 

ui/jquery.ui.spinner.js

@@ -13,15 +13,13 @@
  */
 (function($) {
 
-// shortcut constants
-var pageModifier = 10;
-
 $.widget('ui.spinner', {
 	options: {
 		incremental: true,
 		max: null,
 		min: null,
 		numberformat: null,
+		page: 10,
 		step: null,
 		value: null
 	},
@@ -161,10 +159,10 @@ $.widget('ui.spinner', {
 			this._repeat(null, -1, event);
 			return false;
 		case KEYS.PAGE_UP:
-			this._repeat(null, pageModifier, event);
+			this._repeat(null, this.options.page, event);
 			return false;
 		case KEYS.PAGE_DOWN:
-			this._repeat(null, -pageModifier, event);
+			this._repeat(null, -this.options.page, event);
 			return false;
 
 		case KEYS.ENTER:
@@ -340,11 +338,11 @@ $.widget('ui.spinner', {
 	},
 
 	pageUp: function(pages) {
-		this.stepUp((pages || 1) * pageModifier);		
+		this.stepUp((pages || 1) * this.options.page);		
 	},
 
 	pageDown: function(pages) {
-		this.stepDown((pages || 1) * pageModifier);		
+		this.stepDown((pages || 1) * this.options.page);		
 	},
 
 	value: function(newVal) {