<title>jQuery UI 旋转器(Spinner) - 时间</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/jquery.mousewheel.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/globalize.js"></script>
<script src="/static/js/jqueryui/resources/demos/external/globalize.culture.de-DE.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
$.widget( "ui.timespinner", $.ui.spinner, {
_parse: function( value ) {
if ( typeof value === "string" ) {
if ( Number( value ) == value ) {
return +Globalize.parseDate( value );
_format: function( value ) {
return Globalize.format( new Date(value), "t" );
$( "#spinner" ).timespinner();
$( "#culture" ).change(function() {
var current = $( "#spinner" ).timespinner( "value" );
Globalize.culture( $(this).val() );
$( "#spinner" ).timespinner( "value", current );
<label for="spinner">时间旋转器:</label>
<input id="spinner" name="spinner" value="08:30 PM">
<label for="culture">选择一种用于格式化的文化:</label>
<option value="en-EN" selected="selected">English</option>
<option value="de-DE">German</option>