Skip to content

Commit 0d0ec37

Browse files
committed
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.
1 parent 7a85cbe commit 0d0ec37

File tree

2 files changed

+29
-19
lines changed

2 files changed

+29
-19
lines changed

demos/spinner/time.html

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,38 @@
88
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
99
<script type="text/javascript" src="../../external/glob.js"></script>
1010
<script type="text/javascript" src="../../external/glob.de-DE.js"></script>
11-
<script type="text/javascript" src="../../external/glob.ja-JP.js"></script>
1211
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
1312
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
1413
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
1514
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
1615
<link type="text/css" href="../demos.css" rel="stylesheet" />
1716
<script type="text/javascript">
1817
$.widget("ui.timespinner", $.ui.spinner, {
18+
options: {
19+
// seconds
20+
step: 60 * 1000,
21+
// hours
22+
page: 60
23+
},
24+
1925
_parse: function(value) {
2026
if (typeof value == 'string') {
21-
// TODO use Globalization to parse time
22-
var parts = value.split(":");
23-
return parseInt(parts[0]) * 60 + parseInt(parts[1]);
27+
return +Globalization.parseDate(value)
2428
}
2529
return value;
2630
},
2731
_format: function() {
28-
if (!this.options.value) {
29-
this.element.val( "00:00" );
30-
}
31-
// TODO use Globalization to format time
32-
this.element.val( parseInt(this.options.value / 60) + ":" + (this.options.value % 60) );
32+
this.element.val( Globalization.format(new Date(this.options.value), "t") );
3333
}
3434
})
3535
$(function() {
36-
$("#spinner").timespinner({
37-
step: 60
36+
$("#spinner").timespinner();
37+
38+
39+
$("#culture").change(function() {
40+
var current = $("#spinner").timespinner("value");
41+
Globalization.preferCulture($(this).val());
42+
$("#spinner").timespinner("value", current);
3843
});
3944
});
4045
</script>
@@ -44,7 +49,14 @@
4449
<div class="demo">
4550
<p>
4651
<label for="spinner">Decimal spinner:</label>
47-
<input id="spinner" name="spinner" value="15:30" />
52+
<input id="spinner" name="spinner" value="08:30 PM" />
53+
</p>
54+
<p>
55+
<label for="culture">Select a culture to use for formatting:</label>
56+
<select id="culture">
57+
<option value="en-EN" selected="selected">English</option>
58+
<option value="de-DE">German</option>
59+
</select>
4860
</p>
4961
</div>
5062

ui/jquery.ui.spinner.js

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,13 @@
1313
*/
1414
(function($) {
1515

16-
// shortcut constants
17-
var pageModifier = 10;
18-
1916
$.widget('ui.spinner', {
2017
options: {
2118
incremental: true,
2219
max: null,
2320
min: null,
2421
numberformat: null,
22+
page: 10,
2523
step: null,
2624
value: null
2725
},
@@ -161,10 +159,10 @@ $.widget('ui.spinner', {
161159
this._repeat(null, -1, event);
162160
return false;
163161
case KEYS.PAGE_UP:
164-
this._repeat(null, pageModifier, event);
162+
this._repeat(null, this.options.page, event);
165163
return false;
166164
case KEYS.PAGE_DOWN:
167-
this._repeat(null, -pageModifier, event);
165+
this._repeat(null, -this.options.page, event);
168166
return false;
169167

170168
case KEYS.ENTER:
@@ -340,11 +338,11 @@ $.widget('ui.spinner', {
340338
},
341339

342340
pageUp: function(pages) {
343-
this.stepUp((pages || 1) * pageModifier);
341+
this.stepUp((pages || 1) * this.options.page);
344342
},
345343

346344
pageDown: function(pages) {
347-
this.stepDown((pages || 1) * pageModifier);
345+
this.stepDown((pages || 1) * this.options.page);
348346
},
349347

350348
value: function(newVal) {

0 commit comments

Comments
 (0)