Skip to content

Commit 970befc

Browse files
committed
Spinner: Add demo for time spinner
1 parent bd3d324 commit 970befc

File tree

2 files changed

+62
-1
lines changed

2 files changed

+62
-1
lines changed

demos/spinner/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h4>Examples</h4>
1212
<li><a href="decimal.html">Decimal</a></li>
1313
<li><a href="currency.html">Currency</a></li>
1414
<li><a href="latlong.html">Map</a></li>
15-
<li><a href="mousewheel-disabled.html">Mousewheel Disabled</a></li>
15+
<li><a href="time.html">Time</a></li>
1616
<li><a href="overflow.html">Overflow</a></li>
1717
</ul>
1818
</div>

demos/spinner/time.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Spinner - decimal</title>
6+
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7+
<script type="text/javascript" src="../../jquery-1.4.3.js"></script>
8+
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
9+
<script type="text/javascript" src="../../external/glob.js"></script>
10+
<script type="text/javascript" src="../../external/glob.de-DE.js"></script>
11+
<script type="text/javascript" src="../../external/glob.ja-JP.js"></script>
12+
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
13+
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
14+
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
15+
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
16+
<link type="text/css" href="../demos.css" rel="stylesheet" />
17+
<script type="text/javascript">
18+
$.widget("ui.timespinner", $.ui.spinner, {
19+
_parse: function(value) {
20+
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]);
24+
}
25+
return value;
26+
},
27+
_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) );
33+
}
34+
})
35+
$(function() {
36+
$("#spinner").timespinner({
37+
step: 60
38+
});
39+
});
40+
</script>
41+
</head>
42+
<body>
43+
44+
<div class="demo">
45+
<p>
46+
<label for="spinner">Decimal spinner:</label>
47+
<input id="spinner" name="spinner" value="15:30" />
48+
</p>
49+
</div>
50+
51+
<div class="demo-description">
52+
<p>
53+
Example of a decimal spinner. Step is set to 0.01.
54+
<br/>The code handling the culture change reads the current spinner value,
55+
then changes the culture, then sets the value again, resulting in an updated
56+
formatting, based on the new culture.
57+
</p>
58+
</div>
59+
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)