JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://jqueryui.com/resources/demos/external/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="http://jqueryui.com/resources/demos/external/globalize/globalize.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<p>
	<label for="spinner">Time spinner:</label>
    <input id="spinner" name="spinner" value="08:30 PM"/>
</p>

JavaScript

$.widget( "ui.timespinner", $.ui.spinner, {
		options: {
			// seconds
			step: 60 * 1000,
			// hours
			page: 60 //,
            //change: function (event, ui) {alert("funcchange");}            
		},

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

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

$(function() {
		$( "#spinner" ).timespinner();
        $("#spinner").on("spinchange", function () {alert("spinchange");})
	});