How to use timepicker - 1 common examples

tui.util.defineNamespace("fedoc.content", {});
fedoc.content["timepicker.js.html"] = "      <div class="\&quot;main\&quot;" id="\&quot;main\&quot;">\n\n\n\n    \n    <section>\n        <article>\n            <pre class="\&quot;prettyprint"><code>/**\n * @fileoverview TimePicker Component\n * @author NHN ent FE dev &lt;dl_javascript@nhnent.com&gt; &lt;minkyu.yi@nhnent.com&gt;\n * @dependency jquery-1.8.3, code-snippet-1.0.2, spinbox.js\n */\n\n'use strict';\n\nvar Spinbox = require('./spinbox');\nvar utils = require('./utils');\n\nvar util = tui.util;\nvar timeRegExp = /\\s*(\\d{1,2})\\s*:\\s*(\\d{1,2})\\s*([ap][m])?(?:[\\s\\S]*)/i;\nvar timeSeperator = /\\s+|:/g;\nvar timePickerTag = '&lt;table class=\"timepicker\"&gt;&lt;tr class=\"timepicker-row\"&gt;&lt;/tr&gt;&lt;/table&gt;';\nvar columnTag = '&lt;td class=\"timepicker-column\"&gt;&lt;/td&gt;';\nvar spinBoxTag = '&lt;td class=\"timepicker-column timepicker-spinbox\"&gt;' +\n                '&lt;div&gt;&lt;input type=\"text\" class=\"timepicker-spinbox-input\"&gt;&lt;/div&gt;&lt;/td&gt;';\nvar upBtnTag = '&lt;button type=\"button\" class=\"timepicker-btn timepicker-btn-up\"&gt;&lt;b&gt;+&lt;/b&gt;&lt;/button&gt;';\nvar downBtnTag = '&lt;button type=\"button\" class=\"timepicker-btn timepicker-btn-down\"&gt;&lt;b&gt;-&lt;/b&gt;&lt;/button&gt;';\nvar meridiemTag = '&lt;select&gt;&lt;option value=\"AM\"&gt;AM&lt;/option&gt;&lt;option value=\"PM\"&gt;PM&lt;/option&gt;&lt;/select&gt;';\n\n/**\n * @constructor\n * @param {Object} [option] - option for initialization\n *\n * @param {number} [option.defaultHour = 0] - initial setting value of hour\n * @param {number} [option.defaultMinute = 0] - initial setting value of minute\n * @param {HTMLElement} [option.inputElement = null] - optional input element with timepicker\n * @param {number} [option.hourStep = 1] - step of hour spinbox. if step = 2, hour value 1 -&gt; 3 -&gt; 5 -&gt; ...\n * @param {number} [option.minuteStep = 1] - step of minute spinbox. if step = 2, minute value 1 -&gt; 3 -&gt; 5 -&gt; ...\n * @param {Array} [option.hourExclusion = null] - hour value to be excluded.\n *                                                if hour [1,3] is excluded, hour value 0 -&gt; 2 -&gt; 4 -&gt; 5 -&gt; ...\n * @param {Array} [option.minuteExclusion = null] - minute value to be excluded.\n *                                                  if minute [1,3] is excluded, minute value 0 -&gt; 2 -&gt; 4 -&gt; 5 -&gt; ...\n * @param {boolean} [option.showMeridian = false] - is time expression-\"hh:mm AM/PM\"?\n * @param {Object} [option.position = {}] - left, top position of timepicker element\n */\nvar TimePicker = util.defineClass(/** @lends TimePicker.prototype */ {\n    init: function(option) {\n        /**\n         * @type {jQuery}\n         */\n        this.$timePickerElement = null;\n\n        /**\n         * @type {jQuery}\n         * @private\n         */\n        this._$inputElement = null;\n\n        /**\n         * @type {jQuery}\n         * @private\n         */\n        this._$meridianElement = null;\n\n        /**\n         * @type {Spinbox}\n         * @private\n         */\n        this._hourSpinbox = null;\n\n        /**\n         * @type {Spinbox}\n         * @private\n         */\n        this._minuteSpinbox = null;\n\n        /**\n         * time picker element show up?\n         * @type {boolean}\n         * @private\n         */\n        this._isShown = false;\n\n        /**\n         * @type {Object}\n         * @private\n         */\n        this._option = null;\n\n        /**\n         * @type {number}\n         * @private\n         */\n        this._hour = null;\n\n        /**\n         * @type {number}\n         * @private\n         */\n        this._minute = null;\n\n        this._initialize(option);\n    },\n\n    /**\n     * Initialize with option\n     * @param {Object} option for time picker\n     * @private\n     */\n    _initialize: function(option) {\n        this._setOption(option);\n        this._makeSpinboxes();\n        this._makeTimePickerElement();\n        this._assignDefaultEvents();\n        this._setTime(this._option.defaultHour, this._option.defaultMinute, false);\n    },\n\n    /**\n     * Set option\n     * @param {Object} option for time picker\n     * @private\n     */\n    _setOption: function(option) {\n        this._option = {\n            defaultHour: 0,\n            defaultMinute: 0,\n            inputElement: null,\n            hourStep: 1,\n            minuteStep: 1,\n            hourExclusion: null,\n            minuteExclusion: null,\n            showMeridian: false,\n            position: {}\n        };\n\n        util.extend(this._option, option);\n    },\n\n    /**\n     * make spinboxes (hour &amp; minute)\n     * @private\n     */\n    _makeSpinboxes: function() {\n        var opt = this._option;\n        var defaultHour = opt.defaultHour;\n\n        if (opt.showMeridian) {\n            defaultHour = utils.getMeridiemHour(defaultHour);\n        }\n\n        this._hourSpinbox = new Spinbox(spinBoxTag, {\n            defaultValue: defaultHour,\n            min: (opt.showMeridian) ? 1 : 0,\n            max: (opt.showMeridian) ? 12 : 23,\n            step: opt.hourStep,\n            upBtnTag: upBtnTag,\n            downBtnTag: downBtnTag,\n            exclusion: opt.hourExclusion\n        });\n\n        this._minuteSpinbox = new Spinbox(spinBoxTag, {\n            defaultValue: opt.defaultMinute,\n            min: 0,\n            max: 59,\n            step: opt.minuteStep,\n            upBtnTag: upBtnTag,\n            downBtnTag: downBtnTag,\n            exclusion: opt.minuteExclusion\n        });\n    },\n\n    /**\n     * make timepicker container\n     * @private\n     */\n    _makeTimePickerElement: function() {\n        var opt = this._option;\n        var $tp = $(timePickerTag);\n        var $tpRow = $tp.find('.timepicker-row');\n        var $colon = $(columnTag).addClass('colon').append(':');\n        var $meridian;\n\n        $tpRow.append(this._hourSpinbox.getContainerElement(), $colon, this._minuteSpinbox.getContainerElement());\n\n        if (opt.showMeridian) {\n            $meridian = $(columnTag)\n                .addClass('meridian')\n                .append(meridiemTag);\n            this._$meridianElement = $meridian.find('select').eq(0);\n            $tpRow.append($meridian);\n        }\n\n        $tp.hide();\n        $('body').append($tp);\n        this.$timePickerElement = $tp;\n\n        if (opt.inputElement) {\n            $tp.css('position', 'absolute');\n            this._$inputElement = $(opt.inputElement);\n            this._setDefaultPosition(this._$inputElement);\n        }\n    },\n\n    /**\n     * set position of timepicker container\n     * @param {jQuery} $input jquery-object (element)\n     * @private\n     */\n    _setDefaultPosition: function($input) {\n        var inputEl = $input[0];\n        var position = this._option.position;\n        var x = position.x;\n        var y = position.y;\n\n        if (!util.isNumber(x) || !util.isNumber(y)) {\n            x = inputEl.offsetLeft;\n            y = inputEl.offsetTop + inputEl.offsetHeight + 3;\n        }\n        this.setXYPosition(x, y);\n    },\n\n    /**\n     * assign default events\n     * @private\n     */\n    _assignDefaultEvents: function() {\n        var $input = this._$inputElement;\n\n        if ($input) {\n            this._assignEventsToInputElement();\n            this.on('change', function() {\n                $input.val(this.getTime());\n            }, this);\n        }\n\n        this._hourSpinbox.on('change', util.bind(this._onChangeSpinbox, this));\n        this._minuteSpinbox.on('change', util.bind(this._onChangeSpinbox, this));\n\n        this.$timePickerElement.on('change', 'select', util.bind(this._onChangeMeridiem, this));\n    },\n\n    /**\n     * attach event to Input element\n     * @private\n     */\n    _assignEventsToInputElement: function() {\n        var self = this;\n        var $input = this._$inputElement;\n\n        $input.on('click', function(event) {\n            self.open(event);\n        });\n\n        $input.on('change', function() {\n            if (!self.setTimeFromInputElement()) {\n                $input.val(self.getTime());\n            }\n        });\n    },\n\n    /**\n     * Custom event handler\n     * @param {string} type - Change type on spinbox (type: up, down, defualt)\n     * @private\n     */\n    _onChangeSpinbox: function(type) {\n        var hour = this._hourSpinbox.getValue();\n        var minute = this._minuteSpinbox.getValue();\n\n        if (this._option.showMeridian) {\n            if ((type === 'up' &amp;&amp; hour === 12) ||\n                (type === 'down' &amp;&amp; hour === 11)) {\n                this._isPM = !this._isPM;\n            }\n            hour = this._getOriginalHour(hour);\n        }\n\n        this._setTime(hour, minute, false);\n    },\n\n    /**\n     * DOM event handler\n     * @param {Event} event - Change event on meridiem element\n     * @private\n     */\n    _onChangeMeridiem: function(event) {\n        var isPM = (event.target.value === 'PM');\n        var currentHour = this._hour;\n        var hour = isPM ? (currentHour + 12) : (currentHour % 12);\n\n        this._setTime(hour, this._minuteSpinbox.getValue(), false);\n    },\n\n    /**\n     * is clicked inside of container?\n     * @param {Event} event event-object\n     * @returns {boolean} result\n     * @private\n     */\n    _isClickedInside: function(event) {\n        var isContains = $.contains(this.$timePickerElement[0], event.target);\n        var isInputElement = (this._$inputElement &amp;&amp;\n                            this._$inputElement[0] === event.target);\n\n        return isContains || isInputElement;\n    },\n\n    /**\n     * transform time into formatted string\n     * @returns {string} time string\n     * @private\n     */\n    _formToTimeFormat: function() {\n        var hour = this._hour;\n        var minute = this._minute;\n        var postfix = this._getPostfix();\n        var formattedHour, formattedMinute;\n\n        if (this._option.showMeridian) {\n            hour = utils.getMeridiemHour(hour);\n        }\n\n        formattedHour = (hour &lt; 10) ? '0' + hour : hour;\n        formattedMinute = (minute &lt; 10) ? '0' + minute : minute;\n\n        return formattedHour + ':' + formattedMinute + postfix;\n    },\n\n    /**\n     * set the boolean value 'isPM' when AM/PM option is true.\n     * @private\n     */\n    _setIsPM: function() {\n        this._isPM = (this._hour &gt; 11);\n    },\n\n    /**\n     * get postfix when AM/PM option is true.\n     * @returns {string} postfix (AM/PM)\n     * @private\n     */\n    _getPostfix: function() {\n        var postfix = '';\n\n        if (this._option.showMeridian) {\n            postfix = (this._isPM) ? ' PM' : ' AM';\n        }\n\n        return postfix;\n    },\n\n    /**\n     * set position of container\n     * @param {number} x - it will be offsetLeft of element\n     * @param {number} y - it will be offsetTop of element\n     */\n    setXYPosition: function(x, y) {\n        var position;\n\n        if (!util.isNumber(x) || !util.isNumber(y)) {\n            return;\n        }\n\n        position = this._option.position;\n        position.x = x;\n        position.y = y;\n        this.$timePickerElement.css({left: x, top: y});\n    },\n\n    /**\n     * show time picker element\n     */\n    show: function() {\n        this.$timePickerElement.show();\n        this._isShown = true;\n    },\n\n    /**\n     * hide time picker element\n     */\n    hide: function() {\n        this.$timePickerElement.hide();\n        this._isShown = false;\n    },\n\n    /**\n     * listener to show container\n     * @param {Event} event event-object\n     */\n    open: function(event) {\n        if (this._isShown) {\n            return;\n        }\n\n        $(document).on('click', util.bind(this.close, this));\n        this.show();\n\n        /**\n         * Open event - TimePicker\n         * @event TimePicker#open\n         * @param {(jQuery.Event|undefined)} - Click the input element\n         */\n        this.fire('open', event);\n    },\n\n    /**\n     * listener to hide container\n     * @param {Event} event event-object\n     */\n    close: function(event) {\n        if (!this._isShown || this._isClickedInside(event)) {\n            return;\n        }\n\n        $(document).off(event);\n        this.hide();\n\n        /**\n         * Hide event - Timepicker\n         * @event TimePicker#close\n         * @param {(jQuery.Event|undefined)} - Click the document (not TimePicker)\n         */\n        this.fire('close', event);\n    },\n\n    /**\n     * set values in spinboxes from time\n     */\n    toSpinboxes: function() {\n        var hour = this._hour;\n        var minute = this._minute;\n\n        if (this._option.showMeridian) {\n            hour = utils.getMeridiemHour(hour);\n        }\n\n        this._hourSpinbox.setValue(hour);\n        this._minuteSpinbox.setValue(minute);\n    },\n\n    /**\n     * Get original hour from meridiem hour\n     * @param {hour} hour - Meridiem hour\n     * @returns {number} Original hour\n     */\n    _getOriginalHour: function(hour) {\n        var isPM = this._isPM;\n\n        if (isPM) {\n            hour = (hour &lt; 12) ? (hour + 12) : 12;\n        } else {\n            hour = (hour &lt; 12) ? (hour % 12) : 0;\n        }\n\n        return hour;\n    },\n\n    /**\n     * set time from input element.\n     * @param {HTMLElement|jQuery} [inputElement] jquery object (element)\n     * @returns {boolean} result of set time\n     */\n    setTimeFromInputElement: function(inputElement) {\n        var input = $(inputElement)[0] || this._$inputElement[0];\n\n        return !!(input &amp;&amp; this.setTimeFromString(input.value));\n    },\n\n    /**\n     * set hour\n     * @param {number} hour for time picker\n     * @returns {boolean} result of set time\n     */\n    setHour: function(hour) {\n        return this._setTime(hour, this._minute, true);\n    },\n\n    /**\n     * set minute\n     * @param {number} minute for time picker\n     * @returns {boolean} result of set time\n     */\n    setMinute: function(minute) {\n        return this._setTime(this._hour, minute, true);\n    },\n\n    /**\n     * set time for extenal call\n     * @api\n     * @param {number} hour for time picker\n     * @param {number} minute for time picker\n     * @returns {boolean} result of set time\n     */\n    setTime: function(hour, minute) {\n        return this._setTime(hour, minute);\n    },\n\n    /**\n     * set time\n     * @param {number} hour for time picker\n     * @param {number} minute for time picker\n     * @param {boolean} isSetSpinbox whether spinbox set or not\n     * @returns {boolean} result of set time\n     * @private\n     */\n    _setTime: function(hour, minute, isSetSpinbox) {\n        var isNumber = (util.isNumber(hour) &amp;&amp; util.isNumber(minute));\n        var isValid = (hour &lt; 24 &amp;&amp; minute &lt; 60);\n        var postfix;\n\n        if (!isNumber || !isValid) {\n            return false;\n        }\n\n        this._hour = hour;\n        this._minute = minute;\n\n        this._setIsPM();\n\n        if (isSetSpinbox) {\n            this.toSpinboxes();\n        }\n\n        if (this._$meridianElement) {\n            postfix = this._getPostfix().replace(/\\s+/, '');\n            this._$meridianElement.val(postfix);\n        }\n\n        /**\n         * Change event - TimePicker\n         * @event TimePicker#change\n         */\n        this.fire('change', isSetSpinbox);\n\n        return true;\n    },\n\n    /**\n     * set time from time-string\n     * @param {string} timeString time-string\n     * @returns {boolean} result of set time\n     */\n     /*eslint-disable complexity*/\n    setTimeFromString: function(timeString) {\n        var time, hour, minute, postfix, isPM;\n\n        if (timeRegExp.test(timeString)) {\n            time = timeString.split(timeSeperator);\n            hour = Number(time[0]);\n            minute = Number(time[1]);\n\n            if (hour &lt; 24 &amp;&amp; this._option.showMeridian) {\n                postfix = time[2].toUpperCase();\n\n                if (postfix === 'PM') {\n                    isPM = true;\n                } else if (postfix === 'AM') {\n                    isPM = (hour &gt; 12);\n                } else {\n                    isPM = this._isPM;\n                }\n\n                if (isPM &amp;&amp; hour &lt; 12) {\n                    hour += 12;\n                } else if (!isPM &amp;&amp; hour === 12) {\n                    hour = 0;\n                }\n            }\n        }\n\n        return this._setTime(hour, minute, true);\n    },\n\n    /**\n     * set step of hour\n     * @param {number} step for time picker\n     */\n    setHourStep: function(step) {\n        this._hourSpinbox.setStep(step);\n        this._option.hourStep = this._hourSpinbox.getStep();\n    },\n\n    /**\n     * set step of minute\n     * @param {number} step for time picker\n     */\n    setMinuteStep: function(step) {\n        this._minuteSpinbox.setStep(step);\n        this._option.minuteStep = this._minuteSpinbox.getStep();\n    },\n\n    /**\n     * add a specific hour to exclude\n     * @param {number} hour for exclusion\n     */\n    addHourExclusion: function(hour) {\n        this._hourSpinbox.addExclusion(hour);\n    },\n\n    /**\n     * add a specific minute to exclude\n     * @param {number} minute for exclusion\n     */\n    addMinuteExclusion: function(minute) {\n        this._minuteSpinbox.addExclusion(minute);\n    },\n\n    /**\n     * get step of hour\n     * @returns {number} hour up/down step\n     */\n    getHourStep: function() {\n        return this._option.hourStep;\n    },\n\n    /**\n     * get step of minute\n     * @returns {number} minute up/down step\n     */\n    getMinuteStep: function() {\n        return this._option.minuteStep;\n    },\n\n    /**\n     * remove hour from exclusion list\n     * @param {number} hour that you want to remove\n     */\n    removeHourExclusion: function(hour) {\n        this._hourSpinbox.removeExclusion(hour);\n    },\n\n    /**\n     * remove minute from exclusion list\n     * @param {number} minute that you want to remove\n     */\n    removeMinuteExclusion: function(minute) {\n        this._minuteSpinbox.removeExclusion(minute);\n    },\n\n    /**\n     * get hour\n     * @returns {number} hour\n     */\n    getHour: function() {\n        return this._hour;\n    },\n\n    /**\n     * get minute\n     * @returns {number} minute\n     */\n    getMinute: function() {\n        return this._minute;\n    },\n\n    /**\n     * get time\n     * @api\n     * @returns {string} 'hh:mm (AM/PM)'\n     */\n    getTime: function() {\n        return this._formToTimeFormat();\n    }\n});\ntui.util.CustomEvents.mixin(TimePicker);\n\nmodule.exports = TimePicker;\n</code></pre>\n        </article>\n    </section>\n\n\n\n</div>\n\n"