JSFiddle - React, Tailwind, and code Playground

jsviews issue 374 - jsviews timespinner tag control with Globalize 0.1.1 https://github.com/BorisMoore/jsviews/issues/374

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/0.1.1/globalize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.84/jsviews.min.js"></script>
<script src="https://www.jsviews.com/download/sample-tag-controls/jsviews-jqueryui-widgets.js"></script>
<script id="TimeSpinnerTemplate" type="text/x-jsrender">
	<div>
	  <input value="{{:ts}}" type="text" data-link="{timespinner ts}"/>
  </div>
  <div>
  	data value:
  	<span data-link="ts"></span>
  </div>
  <div>
  	{^{on ~increment #data}}Increment observably{{/on}}
  </div>
</script>

<div id="target">
  ...
</div>

<script>
  $.templates('TimeSpinnerTemplate', '#TimeSpinnerTemplate');

  $.link.TimeSpinnerTemplate('#target', {
    ts: 60000,
  }, {
  	increment: function (data) {
    	$.observable(data).setProperty({ ts: +data.ts + 60*1000 });
    }
  });

</script>

JavaScript

// jquery-ui timespinner widget
(function($, Globalize) {
  "use strict";

  $.widget("ui.timespinner", $.ui.spinner, {
    options: {
      // seconds
      step: 60 * 1000,
      // hours
      page: 60
    },

    _parse: function(value) {
      if (typeof value === "string") {
        // already a number?
        if (Number(value) == value) {
          value = +value;
        } else {
        	var d;
          if (d = Globalize.parseDate(value)) {
            value = +d - d.getTimezoneOffset() * 60 * 1000;
          } else {
          	value = 0;
          }
        }
      }
      return value;
    },

    _format: function(value) {
	    var d = new Date(value);
	    // take timezone offset into consideration
	    d = new Date(+d + d.getTimezoneOffset() * 60 * 1000);
      return Globalize.format(d, "t");
    }
  });
})(this.jQuery, this.Globalize);

// jsviews timespinner tag control
(function($) {
  "use strict";

  $.views.tags({
    timespinner: {
      baseTag: "widget",
      widgetName: "ui-timespinner",
      linkedElement: "input",
      elem: "input",
      setSize: true,
      options: function() {
        var tag = this;
        return {
          spin: function(evt, ui) {
            tag.update(ui.value);
          },
          change: function(evt, ui) {
            tag.setValue(tag.widget.value());
            tag.update(tag.widget.value());
          },
          // seconds
          step: 60 * 1000,
          // hours
          page: 60,
        };
      },
      onBind: function(tagCtx) {
        var tag = this;
        
        // solution #1: 
        /*var initialValue;
        if ((initialValue = tag.linkedElem.val()))
	        tag.linkCtx._val = +initialValue;*/
          
        tag.baseApply(arguments);
        
        // solution #2: possible but requires knowledge about data-to-rendering conversion
        // and doesn't work well with date to timestamp conversions
        /*tag.linkCtx._val =...