JIRA AUI duration picker

v.5.7.31

by Malin Jayakody

HTML

<link rel="stylesheet" href="//aui-cdn.atlassian.com/aui-adg/5.7.31/css/aui.css">
<script src="//aui-cdn.atlassian.com/aui-adg/5.7.31/js/aui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>
<form class="aui">
    <div class="field-group duration">
        <label>Duration</label>
        <input data-label="Days" type="text" class="text days" value="0">
        <input data-label="Hours" type="text" class="text hours" value="0">
    </div>
</form>

CSS

body {
    background: #fff;
}

form.aui .field-group .duration-picker {
    position: relative;
    height: 30px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

form.aui .field-group .duration-label {
    margin: 0 15px;
}

form.aui .field-group .duration-picker>input {
    width: 100px;
    border-style: none;
    border-radius: 0;
    text-align: right;
    background-color: #fff;
}

form.aui .field-group .duration-picker>input:hover {
    cursor: default;
}

form.aui .field-group .duration-picker>.handle {
    display: inline-block;
    height: 100%;
    line-height: 30px;
    margin: 0;
    padding: 0 10px;
    cursor: pointer;
    background: #f5f5f5;
    color: #505050;
    font-weight: bold;
}

form.aui .field-group .duration-picker>.handle:hover {
    background: #e9e9e9;
    border-color: #999999;
    color: #000000;
    text-decoration: none;
}

form.aui .field-group .duration-picker>.handle:active {
    box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.1);
    background: #f5f5f5;
}

form.aui .field-group .duration-picker>.handle.add {
    border-left: 1px solid #ccc;
}

form.aui .field-group .duration-picker>.handle.subtract {
    border-right: 1px solid #ccc;
}

JavaScript

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

    var pluginName = 'durationPicker',
        defaults = {
            min: 0,
            max: 9999999,
            controls: [46, 8, 9, 27, 13, 110]
        };

    function Constructor(element, options) {
        this.options = $.extend({}, defaults, options);
        this.element = element;
        this._defaults = defaults;
        this.init();
    }

    var plugin = Constructor.prototype;

    $.fn[pluginName] = function(options, params) {
        var method = String(options),
            element = this.filter('input').first();

        if (element && element.length > 0 && element.data("plugin_" + pluginName) && /^val$/.test(method)) {
            if ($.isNumeric(params)) {
                element.val(Number(params)).trigger('input');
                return this;
            } else {
                return element.val();
            }
        }

        this.filter('input').each(function() {
            var element = $(this);
            if (element && element.length > 0 && !element.data("plugin_" + pluginName)) {
                element.data("plugin_" + pluginName, new Constructor(element, options));
            }
        });
        return this;
    };

    plugin.init = function() {
        var that = this,
            options = that.options,
            element = that.element,
            parent = element.parent(),
            min = options.min,
            max = options.max;
        $('<div class="duration-picker"></div>')
            .appendTo(parent)
            .append('<span class="handle subtract">-</span>')
            .append(element)
            .append('<span class="handle add">+</span>')
            .after('<span class="duration-label">' + element.data('label') + '</span>')
            .on('click', '.handle', function(e) {
                e.preventDefault();
                e.stopPropagation();
                var item = $(this),
                    input = item.parent().find('input'),
            ...