JSFiddle - React, Tailwind, and code Playground

by karim79

HTML

<p>
 <span style="font-weight: bold;">Test by entering times into the inputs</span>
</p>
<p>
 <label>Time: <input type="text" id="customfield_10147" /></label><br/>
 <label>Time: <input type="text" id="customfield_10148" /></label><br/>
 <label>Time: <input type="text" id="customfield_10149" /></label> (Military format)<br/>
 <label>Time: <input type="text" id="customfield_10150" /></label> (Format added, removed)
</p>
<p>
 <span style="font-weight: bold;">Time formatting options (output in parentheses)</span><br/>
 Also, the up/down arrow keys will toggle am/pm.
</p>
<ul>
 <li>1 (1:00 pm)</li>
 <li>1p</li>
 <li>1:05</li>
 <li>1:05 pm</li>
 <li>1:05 PM</li>
 <li>1:05 a</li>
 <li>105 (1:05 am)</li>
 <li>105p (1:05 pm)</li>
 <li>22 (10:00 pm)</li>
 <li>2245 (10:45 pm)</li>
</ul>

JavaScript

(function($){
    var methods = {
        init : function(sel, options) {
            var $sel = $(sel);
            var $options = options;
            return $sel.each(function(){
                var $this = $(this);
                var formatted = $this.data('time_formatted');
                if (typeof $options == 'object') {
                    methods.setOptions(this, $options);
                } else {
                    methods.setOptions(this);
                }
                if (formatted) {
                    return;
                } else {
                    $this.data('time_formatted', true);
                    $this.bind('keydown.time', function(e){
                        if (this.shortcutPeriodToggle === true) {
                            var $this = $(this);
                            if (e.keyCode == 38 || e.keyCode == 40) {
                                var time = methods.getTimeParts($this.val());
                                if (time.error != '') {
                                    return false;
                                }
                                if (time.period == 'pm') {
                                    time.period = 'am';
                                } else {
                                    time.period = 'pm';
                                }
                                $this.val(time.hour+':'+time.minutes+' '+time.period);
                            }
                        }
                    });
                    $this.bind('blur.time', function(e){
                        var $this = $(this);
                        time = $this.val()+"";
                        if (this.allowAbsentPeriod !== true && 
                                this.timeFormat.toLowerCase() != 'military' && 
                                    time.toLowerCase().indexOf('a') < 0 && 
                                        time.toLowerCase().indexOf('p') < 0) {
                            alert('AM/PM required.');
...