Time Spinner Step Values

Using a half hour, or a full hour as the step values for the jQuery UI widget.

HTML

<script src="http://jqueryui.com/resources/demos/external/globalize.js"></script>
<div>
    <label for="spinner1" class="ui-widget">Half Hour:</label>
    <input id="spinner1" name="spinner" value="08:30 PM" />
</div>
<div>
    <label for="spinner2" class="ui-widget">Full Hour:</label>
    <input id="spinner2" name="spinner" value="08:00 PM" />
</div>

CSS

body {
    font-size: 0.8em;
    margin: 1em;
}

div {
    margin: 1em;
}

JavaScript

(function ($) {
    
    $.widget( "ui.timespinner", $.ui.spinner, {

        options: {
            step: 1800000,
        },

        _parse: function( value ) {
            
            if ( typeof value === "string" ) {
                if ( Number(value) == value ) {
                    return Number( value );
                }
                return +Globalize.parseDate( value );
            }
            return value;
        },

        _format: function( value ) {
            return Globalize.format( new Date( value ), "t" );
        }
        
    });
    
})( jQuery );

$(function () {
    
    // Defaults to a half hour.
    $( "#spinner1" ).timespinner();
    // Jumps the step up to an hour.
    $( "#spinner2" ).timespinner( { step: 3600000 } );
    
});