jQuery UI timeSpinner 0.2

jQuery UI timeSpinner 0.2 This is an opinionated jQuery UI widget for setting 24-hour format time (HH:MM) HH:MM is simple and universal, and I have no intention of adding localization support.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/0.1.1/globalize.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css">
<input type="text" id="THE_TIME2" value="01:00">

CSS

.ui-timespinner {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  height: 1.6em; /* 28px; */
}

.ui-timespinner-value {
  display: none;

  /*
  This is for debugging only:

  If you set the above to display:block,
  the original element should appear right above the spinner
  */
  position: absolute;
  top: -10px;
  height: 8px;
  line-height: 8px;
  font-size: 8px !important;
  width:8ch;
  border: 1px solid #ccc;
  border-radius: 5px;
}

span.ui-timespinner-ampm {
  display: none;
}

.ui-timespinner-ampm span.ui-timespinner-ampm {
  display: block;
}

span.ui-timespinner-hh,
span.ui-timespinner-mm,
span.ui-timespinner-ampm {
  height: 1.6em;
}


.ui-timespinner .ui-spinner {
  position: absolute;
  border-color: transparent;
  background-color: transparent;
  background: transparent;
  overflow: visible;
}

.ui-timespinner .ui-spinner-input {
  width: 2ch;
  padding: 0;
  margin: 0.2em;
}

.ui-timespinner-colon {
  position: absolute;
  width: 1ch;
  padding: 0;
  margin: 0.2em;
  left: 2.5ch;
  z-index: 10;
}

.ui-state-disabled .ui-timespinner-colon {
  opacity: .35;
  filter: Alpha(Opacity=35);
  background-image: none;
}


.ui-timespinner {
  width: 8ch;
  min-width: 8ch;
}

.ui-timespinner.ui-timespinner-ampm {
  width: 11ch;
  min-width: 11ch;
}

.ui-timespinner .ui-spinner-button {
  width: 1.6ch;
}

span.ui-timespinner-hh {
    left: 0;
}

.ui-timespinner-hh .ui-spinner-button {
    right: -7.6ch;
}
.ui-timespinner-ampm .ui-timespinner-hh .ui-spinner-button {
    right: -10.4ch;
}

span.ui-timespinner-mm {
    left: 3.3ch;
}

.ui-timespinner-mm .ui-spinner-button {
    right: -4.8ch;
}
.ui-timespinner-ampm .ui-timespinner-mm .ui-spinner-button {
    right: -7.6ch;
}

span.ui-timespinner-ampm {
    left: 5.7ch;
}

.ui-timespinner .ui-spinner-input.ui-timespinner-ampm {
    width: 2.6ch;
}

.ui-timespinner-ampm .ui-spinner-button {
    right: -7.6ch;
}
.ui-timespinner-ampm .ui-timespinner-ampm .ui-spinner-button {
    right:...

JavaScript

/*
 * jQuery UI timeSpinner 0.2
 *
 * This is an opinionated jQuery UI widget for setting
 * 24-hour formatted time (HH:MM) or
 * AM/PM formatted time (HH:MM AM/PM)
 *
 * There are 2 widgets: textSpinner and timeSpinner
 *
 * textSpinner is a generic spinner that spins through text values
 * instead of numbers.
 * Default values are "AM" and "PM".
 *
 * timeSpinner combines textSpinner and the native jQuery UI Spinner
 * to complete the entire widget.
 */

$.widget('ty.textSpinner', $.ui.spinner, {
    options: {
        values: ['AM', 'PM']
    },
    _parse: function(value) {
        if (typeof value === "string") {
            return this.options.values.indexOf(value);
        }
        return value;
    },
    _format: function(value) {
        //wrap around
        if (value < 0) {
            value = this.options.values.length - 1;
        }
        if (value > this.options.values.length - 1) {
            value = 0;
        }
        var format = this.options.values[value];
        return format;
    }
});

$.widget('ty.timeSpinner', {

    options: {
        /**
         * 'value' is ALWAYS in 24-hour format
         */
        value: '00:00',

        /**
         * 'ampm' toggles the UI between 24-hour and 12-hour formats
         */
        ampm: false,

        /**
         * The jQuery UI spinner's "stop" event
         * fired from any one of the spinners: HH, MM or AMPM
         */
        stop: function(event, ui) {
            //
        }
    },

    _create: function() {
        var $this = this.element;

        var _this = this;

        var iWidth = $this.outerWidth();

        $this.addClass('ui-timespinner-value');

        var $container = $('<div>', {
            'class': 'ui-timespinner ui-widget ui-widget-content ui-corner-all'
        });

        $this.wrap($container);

        $container = $this.parent();

        var $colon = $('<div>', {
            'class': 'ui-timespinner-colon'
        }).text(':');

        var $hh =...