A timespinner control for jsviews and jquery-ui

jsviews-jqueryui-timespinner-globalizejs_legacy.js

// utilize globalizejs 0.x
(function($, Globalize) {
    'use strict';

    $.views.tags({
        timespinner: {
            baseTag: 'spinner',
            options: function() {
                var tag = this;
                var opts = tag.baseApply(arguments);
                if (tag.tagCtx.props.trigger === false) {
                    // convert and set value entered by user
                    opts.change = function(evt, ui) {
                        // [note: might trigger another change event]
                        tag.setValue(tag.convert(tag.widget.value()));
                        tag.update(tag.widget.value());
                    };
                }
                opts.step = 60 * 1000;
                opts.page = 60;
                return opts;
            },
            onBind: function timespinnerOnBind() {
                var tag = this;
                tag.tagCtx.props.trigger = false;
                tag.baseApply(arguments);
                tag.widget._format = _format;
                tag.widget._parse = _parse;

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

                function _parse(value) {
                    if (typeof value === 'string') {
                        if (+value == value) {
                            // number string
                            value = +value;
                        } else {
                            // date string
                            var d = Globalize.parseDate(value);
                            value = d ? +d - d.getTimezoneOffset() * 60 * 1000 : 0;
                        }
                    }
                    return value;
                }
            }
        },
    });
})(this.jQuery, this.Globalize);

jsviews-jqueryui-timespinner.js

// utilize globalizejs 1.x
(function($, Globalize) {
    'use strict';

    $.views.tags({
        timespinner: {
            baseTag: 'spinner',
            options: function () {
                var tag = this;
                var opts = tag.baseApply(arguments);
                if (tag.tagCtx.props.trigger === false) {
                    // convert and set value entered by user
                    opts.change = function(evt, ui) {
                        // [note: might trigger another change event]
                        tag.setValue(tag.convert(tag.widget.value()));
                        tag.update(tag.widget.value());
                    };
                }
                opts.step = 60 * 1000;
                opts.page = 60;
                return opts;
            },
            onBind: function timespinnerOnBind() {
                var tag = this;
                tag.tagCtx.props.trigger = false;
                tag.baseApply(arguments);
                tag.widget._format = _format;
                tag.widget._parse = _parse;

                function _format(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'
                    });
                }

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

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