JSFiddle - React, Tailwind, and code Playground

jquery-ui timespinner with Globalize 1.x

by klaus triendl

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.8/cldr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.8/cldr/event.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.8/cldr/supplemental.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.2.3/globalize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.2.3/globalize/number.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.2.3/globalize/date.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/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
  <fieldset>
    <input id="timespinner" type="text" />
  </fieldset>
</div>

JavaScript

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

  _parse: function(value) {
    if (typeof value === "string") {
      // already a timestamp
      if (Number(value) == value) {
        // number only? assume hour of day
        var d = Globalize.parseDate(value, {
          skeleton: 'H'
        });
      } else {
        var d = Globalize.parseDate(value, {
          skeleton: 'hm'
        });
      }
      // take timezone offset into consideration
      value = +d - d.getTimezoneOffset() * 60 * 1000;
    }
    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.formatDate(d, {
      skeleton: 'hm'
    });
  }
});


var promisedCldr = $.when(
//http://www.unicode.org/repos/cldr-aux/json/26/main/en/numbers.json
//http://www.unicode.org/repos/cldr-aux/json/26/main/en/ca-gregorian.json
//http://www.unicode.org/repos/cldr-aux/json/26/supplemental/likelySubtags.json
//http://www.unicode.org/repos/cldr-aux/json/26/supplemental/timeData.json
//http://www.unicode.org/repos/cldr-aux/json/26/supplemental/weekData.json
  $.getJSON("http://www.unicode.org/repos/cldr-aux/json/26/main/en/numbers.json"),
  $.getJSON("http://www.unicode.org/repos/cldr-aux/json/26/main/en/ca-gregorian.json"),
  $.getJSON("http://www.unicode.org/repos/cldr-aux/json/26/supplemental/likelySubtags.json"),
  $.getJSON("http://www.unicode.org/repos/cldr-aux/json/26/supplemental/timeData.json"),
  $.getJSON("http://www.unicode.org/repos/cldr-aux/json/26/supplemental/weekData.json")
)
.then(function() {
  // Normalize $.get results, we only need the JSON, not the request statuses.
  return [].slice.apply(arguments, [0]).map(function (result) {
    return result[0];
  });

})
.then(Globalize.load)
.then(function (){
  Globalize.locale('en');
});

// fetch partials and data...