jsviews keepDay

Note that the ts_timespinner jsviews control is a bit more complex because the underlying data actually is a computed timestamp from timezone-unaware hour/minute values

by klaus triendl

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
<script src="https://www.jsviews.com/download/sample-tag-controls/jsviews-jqueryui-widgets.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script id="pageTmpl" type="text/x-jsrender">
  Time: {^{ts_timespinner ts keepDay=true /}}<br/><br/>
  Date: {^{datepicker ts elem="div" dataFormat=0 /}}<br/><br/>
  <b>Underlying data (timestamp):</b><br/><br/> <em>{^{:ts}}</em>
</script>

<div id="page"></div>

<script>
  'use strict';
  var pageTmpl = $.templates('#pageTmpl');

  var model = {
    // note: timezone-unaware timestamp value
    ts: 0,
  };

  pageTmpl.link('#page', model);

</script>

JavaScript

(function($, Globalize) {
  'use strict';

  var tagDefs = {
    ts_timespinner: {
      baseTag: 'timespinner',
      dataFormat: 0,
      displayFormat: {
        format: function format(value, props) {
          var d = new Date(+value);
          // take timezone offset into consideration
          d = new Date(+d - -d.getTimezoneOffset() * 60 * 1000);
          return Globalize.format(d, 't', props._culture);
        },

        parse: function parse(value, props) {
          if (typeof value === 'string') {
            // already a number?
            if (+value == value) {
              if (value <= 24) {
                // assume hour of day
                var d = Globalize.parseDate(value || '0', 'HH', props._culture);
                // take timezone offset into consideration
                value = +d - d.getTimezoneOffset() * 60 * 1000;
              } else {
                value = +value;
              }
            } else {
              var d = Globalize.parseDate(value, 't', props._culture);
              // take timezone offset into consideration
              if (d) {
                value = +d - d.getTimezoneOffset() * 60 * 1000;
              } else {
                value = 0;
              }
            }
          }
          return new Date(value);
        }
      }
    },
  };

  $.views.tags(tagDefs);

})(this.jQuery, this.Globalize);