JSFiddle - React, Tailwind, and code Playground

jQuery UI timeSpinner 0.1 This is a 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.

by Terry Young

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" autocomplete="nope" id="THE_TIME" value="00:00">

<div class="notes">
<h4>Important Notes</h4>

<p>This widget uses jQuery UI 1.12. As officially documented, jQuery UI 1.12 uses Globalize 0.x only (see <a href="https://api.jqueryui.com/spinner/" target="_blank">https://api.jqueryui.com/spinner/</a>)</p>

<p>This widget essentially wraps two jQuery UI spinner widgets and visually combines them to look like one single widget.</p>

<p>CSS Styles of this widget uses the 'ch' (character) unit, which works in all modern browsers (IE is not a modern browser, #roasted. See <a href="http://caniuse.com/#feat=ch-unit">http://caniuse.com/#feat=ch-unit</a>)</p>
</div>

CSS

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

.ui-timespinner .ui-spinner {
  position: absolute;
  border-color: transparent;
  background-color: transparent;
  background: transparent;
  overflow: visible;
  /*z-index: 2;*/
}

.ui-timespinner .ui-spinner .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;
}

span.ui-timespinner-hh {
  width: 8ch;
  height: 1.6em;
}


input.ui-timespinner-hh,
input.ui-timespinner-mm {
  position: absolute;
  left: 0ch;
  border-color: transparent;
  background-color: transparent;
  background: transparent;
  overflow: visible;
  z-index: 2;
}

.ui-timespinner .ui-spinner a.ui-spinner-button {
  width: 1.5ch;
  right:1px;
}

.ui-timespinner .ui-spinner.ui-timespinner-mm a.ui-spinner-button {
  display:block;
  width: 1.5ch;
  right: -5ch;
  margin-right: 2px;
}


.ui-timespinner .ui-spinner a.ui-spinner-up {
  margin-top:-1px;
}

.ui-timespinner .ui-spinner a.ui-spinner-down {
  margin-bottom:1px;
}

span.ui-timespinner-mm {
  width: 3ch;
  height: 1.6em;
}

input.ui-timespinner-mm {
  position: absolute;
  left: 3ch;
  border-color: transparent;
  background-color: transparent;
  background: transparent;
  overflow: visible;
  z-index: 2;
}



/* non essential styles */
div.notes {
  font-family: Arial;
  font-size: 1em;
}

JavaScript

$.widget('ty.timeSpinner', {
    options: {
        hour: 0,
        minute: 0,
        /**
         * The jQuery UI spinner's "stop" event
         * fired from either one of the spinners
         */
        stop: function () {
            // empty function
        }
    },

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

        var _this = this;

        var iWidth = $this.outerWidth();

        $this.hide().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 = $('<input>', {
            'type': 'text',
            'class': 'number ui-timespinner-hh'
        });


        var $mm = $('<input>', {
            'type': 'text',
            'class': 'number ui-timespinner-mm'
        });

        $container.append($hh).append($colon).append($mm);

        $hh
        .spinner({
            'min': 0,
            'max': 23,
            'numberFormat': 'd2',
            'culture': 'en-EN',
            'mouseWheel': true,
            'spin': function (event, ui) {
                if (parseInt(ui.value) == 23 && parseInt(this.value) == 23) {
                    this.value = '00';
                    return false;
                } else if (parseInt(ui.value) == 0 && parseInt(this.value) == 0) {
                    this.value = '23';
                    return false;
                }
            },
            'stop': function (event, ui) {
                _this.options.hour = this.value;
                _this._sync();

                if ($.isFunction(_this.options.stop)) {
                    _this.options.stop.apply(_this, arguments);
                }
            },
            'change': function (event, ui) {
              _this.refresh();
            }
 ...