aboutsummaryrefslogtreecommitdiffstats
path: root/demos/datepicker/index.html
blob: d9c8dfc10da40ed18e4401ed432db056d6d843cc (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Spinner - Time</title>
	<link rel="stylesheet" href="../../themes/base/all.css">
	<script src="../../external/jquery/jquery.js"></script>
	<script src="../../external/jquery-mousewheel/jquery.mousewheel.js"></script>
	<script src="../../external/globalize/globalize.js"></script>
	<script src="../../external/globalize/globalize.culture.de-DE.js"></script>
	<script src="../../ui/core.js"></script>
	<script src="../../ui/widget.js"></script>
	<script src="../../ui/button.js"></script>
	<script src="../../ui/spinner.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$.widget( "ui.timespinner", $.ui.spinner, {
		options: {
			// seconds
			step: 60 * 1000,
			// hours
			page: 60
		},

		_parse: function( value ) {
			if ( typeof value === "string" ) {
				// already a timestamp
				if ( Number( value ) ==<
/span> value ); } return +Globalize.parseDate( value ); } return value; }, _format: function( value ) { return Globalize.format( new Date(value), "t" ); } }); $(function() { $( "#spinner" ).timespinner(); $( "#culture" ).change(function() { var current = $( "#spinner" ).timespinner( "value" ); Globalize.culture( $(this).val() ); $( "#spinner" ).timespinner( "value", current ); }); }); </script> </head> <body> <p> <label for="spinner">Time spinner:</label> <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 class="demo-description"> <p> A custom widget extending spinner. Use the Globalization plugin to parse and output a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down spins hours. </p> </div> </body> </html>