订购格式为hh：mm tt的字符串-javascript-datepicker

Question

我正在使用时间选择器以hh：mm：ss tt格式设置文本区域字符串。

这是我从文本区域中获得的值↓

12:20:00 am; 12:00:00 am; 1:20:00 am; 12:40:00 am; 2:00:00 am; 1:40:00 am;

但是每次我从时间选择器列表中选择某项时，我都需要以这种方式按时间和tt排序值。

我尝试过：

正则表达式拆分值，但我不知道如何比较拆分后的每个结果

我已经修改了我在项目中使用的jquery.timepicker.js文件。

查看在何处显示已修改↓和已修改↑

我从时间选择器中选择新值时的预期顺序是这样的

12:00:00 am; 12:20:00 am; 12:40:00 am; 1:20:00 am; 1:40:00 am; 2:00:00 am;

!function(e){"object"==typeof exports&&exports&&"object"==typeof module&&module&&module.exports===exports?e(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],e):e(jQuery)}(function(e){var i=86400,t={am:"am",pm:"pm",AM:"AM",PM:"PM",decimal:".",mins:"mins",hr:"hr",hrs:"hrs"},r={init:function(i){return this.each(function(){var n=e(this),o=[];for(var l in e.fn.timepicker.defaults)n.data(l)&&(o[l]=n.data(l));var c=e.extend({},e.fn.timepicker.defaults,o,i);if(c.lang&&(t=e.extend(t,c.lang)),c=a(c),n.data("timepicker-settings",c),n.addClass("ui-timepicker-input"),c.useSelect)s(n);else{if(n.prop("autocomplete","off"),c.showOn)for(var u in c.showOn)n.on(c.showOn[u]+".timepicker",r.show);n.on("change.timepicker",d),n.on("keydown.timepicker",v),n.on("keyup.timepicker",T),c.disableTextInput&&n.on("keydown.timepicker",k),d.call(n.get(0))}})},show:function(i){var t=e(this),a=t.data("timepicker-settings");if(i&&i.preventDefault(),a.useSelect)t.data("timepicker-list").focus();else{u(t)&&t.blur();var o=t.data("timepicker-list");if(!t.prop("readonly")&&(o&&0!==o.length&&"function"!=typeof a.durationTime||(s(t),o=t.data("timepicker-list")),!n(o))){t.data("ui-timepicker-value",t.val()),m(t,o),r.hide(),o.show();var l={};a.orientation.match(/r/)?l.left=t.offset().left+t.outerWidth()-o.outerWidth()+parseInt(o.css("marginLeft").replace("px",""),10):l.left=t.offset().left+parseInt(o.css("marginLeft").replace("px",""),10),"t"==(a.orientation.match(/t/)?"t":a.orientation.match(/b/)?"b":t.offset().top+t.outerHeight(!0)+o.outerHeight()>e(window).height()+e(window).scrollTop()?"t":"b")?(o.addClass("ui-timepicker-positioned-top"),l.top=t.offset().top-o.outerHeight()+parseInt(o.css("marginTop").replace("px",""),10)):(o.removeClass("ui-timepicker-positioned-top"),l.top=t.offset().top+t.outerHeight()+parseInt(o.css("marginTop").replace("px",""),10)),o.offset(l);var d=o.find(".ui-timepicker-selected");if(!d.length){var h=x(f(t));null!==h?d=p(t,o,h):a.scrollDefault&&(d=p(t,o,a.scrollDefault()))}if(d&&d.length){var g=o.scrollTop()+d.position().top-d.outerHeight();o.scrollTop(g)}else o.scrollTop(0);return a.stopScrollPropagation&&e(document).on("wheel.ui-timepicker",".ui-timepicker-wrapper",function(i){i.preventDefault();var t=e(this).scrollTop();e(this).scrollTop(t+i.originalEvent.deltaY)}),e(document).on("touchstart.ui-timepicker mousedown.ui-timepicker",c),e(window).on("resize.ui-timepicker",c),a.closeOnWindowScroll&&e(document).on("scroll.ui-timepicker",c),t.trigger("showTimepicker"),this}}},hide:function(i){var t=e(this),r=t.data("timepicker-settings");return r&&r.useSelect&&t.blur(),e(".ui-timepicker-wrapper").each(function(){var i=e(this);if(n(i)){var t=i.data("timepicker-input"),r=t.data("timepicker-settings");r&&r.selectOnBlur&&w(t),i.hide(),t.trigger("hideTimepicker")}}),this},option:function(i,t){return"string"==typeof i&&void 0===t?e(this).data("timepicker-settings")[i]:this.each(function(){var r=e(this),n=r.data("timepicker-settings"),o=r.data("timepicker-list");"object"==typeof i?n=e.extend(n,i):"string"==typeof i&&(n[i]=t),n=a(n),r.data("timepicker-settings",n),o&&(o.remove(),r.data("timepicker-list",!1)),n.useSelect&&s(r)})},getSecondsFromMidnight:function(){return x(f(this))},getTime:function(e){var i=f(this);if(!i)return null;var t=x(i);if(null===t)return null;e||(e=new Date);var r=new Date(e);return r.setHours(t/3600),r.setMinutes(t%3600/60),r.setSeconds(t%60),r.setMilliseconds(0),r},isVisible:function(){var e=this.data("timepicker-list");return!(!e||!n(e))},setTime:function(e){var i=this,t=i.data("timepicker-settings");if(t.forceRoundTime)var r=l(x(e),t);else r=y(x(e),t);return e&&null===r&&t.noneOption&&(r=e),t.multiple?g(i,r):h(i,r),i.data("timepicker-list")&&m(i,i.data("timepicker-list")),this},remove:function(){var e=this;if(e.hasClass("ui-timepicker-input")){var i=e.data("timepicker-settings");return e.removeAttr("autocomplete","off"),e.removeClass("ui-timepicker-input"),e.removeData("timepicker-settings"),e.off(".timepicker"),e.data("timepicker-list")&&e.data("timepicker-list").remove(),i.useSelect&&e.show(),e.removeData("timepicker-list"),this}}};function n(e){var i=e[0];return i.offsetWidth>0&&i.offsetHeight>0}function a(i){if(i.minTime&&(i.minTime=x(i.minTime)),i.maxTime&&(i.maxTime=x(i.maxTime)),i.durationTime&&"function"!=typeof i.durationTime&&(i.durationTime=x(i.durationTime)),"now"==i.scrollDefault)i.scrollDefault=function(){return i.roundingFunction(x(new Date),i)};else if(i.scrollDefault&&"function"!=typeof i.scrollDefault){var t=i.scrollDefault;i.scrollDefault=function(){return i.roundingFunction(x(t),i)}}else i.minTime&&(i.scrollDefault=function(){return i.roundingFunction(i.minTime,i)});if("string"===e.type(i.timeFormat)&&i.timeFormat.match(/[gh]/)&&(i._twelveHourTime=!0),!1===i.showOnFocus&&-1!=i.showOn.indexOf("focus")&&i.showOn.splice(i.showOn.indexOf("focus"),1),i.disableTimeRanges.length>0){for(var r in i.disableTimeRanges)i.disableTimeRanges[r]=[x(i.disableTimeRanges[r][0]),x(i.disableTimeRanges[r][1])];i.disableTimeRanges=i.disableTimeRanges.sort(function(e,i){return e[0]-i[0]});for(r=i.disableTimeRanges.length-1;r>0;r--)i.disableTimeRanges[r][0]<=i.disableTimeRanges[r-1][1]&&(i.disableTimeRanges[r-1]=[Math.min(i.disableTimeRanges[r][0],i.disableTimeRanges[r-1][0]),Math.max(i.disableTimeRanges[r][1],i.disableTimeRanges[r-1][1])],i.disableTimeRanges.splice(r,1))}return i}function s(t){var n=t.data("timepicker-settings"),a=t.data("timepicker-list");if(a&&a.length&&(a.remove(),t.data("timepicker-list",!1)),n.useSelect)var s=a=e("<select />",{class:"ui-timepicker-select"});else a=e("<ul />",{class:"ui-timepicker-list"}),(s=e("<div />",{class:"ui-timepicker-wrapper",tabindex:-1})).css({display:"none",position:"absolute"}).append(a);if(n.noneOption)if(!0===n.noneOption&&(n.noneOption=n.useSelect?"Time...":"None"),e.isArray(n.noneOption)){for(var c in n.noneOption)if(parseInt(c,10)==c){var p=o(n.noneOption[c],n.useSelect);a.append(p)}}else{p=o(n.noneOption,n.useSelect);a.append(p)}if(n.className&&s.addClass(n.className),(null!==n.minTime||null!==n.durationTime)&&n.showDuration){"function"==typeof n.step||n.step;s.addClass("ui-timepicker-with-duration"),s.addClass("ui-timepicker-step-"+n.step)}var d=n.minTime;"function"==typeof n.durationTime?d=x(n.durationTime()):null!==n.durationTime&&(d=n.durationTime);var f=null!==n.minTime?n.minTime:0,k=null!==n.maxTime?n.maxTime:f+i-1;k<f&&(k+=i),k===i-1&&"string"===e.type(n.timeFormat)&&n.show2400&&(k=i);var v=n.disableTimeRanges,T=0,H=v.length,C=n.step;"function"!=typeof C&&(C=function(){return n.step});c=f;for(var D=0;c<=k;c+=60*C(++D)){var O,R=c,S=y(R,n);if(n.useSelect)(O=e("<option />",{value:S})).text(S);else(O=e("<li />")).addClass(R%86400<43200?"ui-timepicker-am":"ui-timepicker-pm"),O.data("time",R<=86400?R:R%86400),O.text(S);if((null!==n.minTime||null!==n.durationTime)&&n.showDuration){var M=b(c-d,n.step);if(n.useSelect)O.text(O.text()+" ("+M+")");else{var F=e("<span />",{class:"ui-timepicker-duration"});F.text(" ("+M+")"),O.append(F)}}T<H&&(R>=v[T][1]&&(T+=1),v[T]&&R>=v[T][0]&&R<v[T][1]&&(n.useSelect?O.prop("disabled",!0):O.addClass("ui-timepicker-disabled"))),a.append(O)}if(s.data("timepicker-input",t),t.data("timepicker-list",s),n.useSelect)t.val()&&a.val(l(x(t.val()),n)),a.on("focus",function(){e(this).data("timepicker-input").trigger("showTimepicker")}),a.on("blur",function(){e(this).data("timepicker-input").trigger("hideTimepicker")}),a.on("change",function(){n.multiple?g(t,e(this).val(),"select"):h(t,e(this).val(),"select")}),n.multiple?g(t,a.val(),"initial"):h(t,a.val(),"initial"),t.hide().after(a);else{var I=n.appendTo;"string"==typeof I?I=e(I):"function"==typeof I&&(I=I(t)),I.append(s),m(t,a),a.on("mousedown click","li",function(i){t.off("focus.timepicker"),t.on("focus.timepicker-ie-hack",function(){t.off("focus.timepicker-ie-hack"),t.on("focus.timepicker",r.show)}),u(t)||t[0].focus(),a.find("li").removeClass("ui-timepicker-selected"),e(this).addClass("ui-timepicker-selected"),w(t)&&(t.trigger("hideTimepicker"),a.on("mouseup.timepicker click.timepicker","li",function(e){a.off("mouseup.timepicker click.timepicker"),s.hide()}))})}}function o(i,t){var r,n,a;return"object"==typeof i?(r=i.label,n=i.className,a=i.value):"string"==typeof i?r=i:e.error("Invalid noneOption value"),t?e("<option />",{value:a,class:n,text:r}):e("<li />",{class:n,text:r}).data("time",String(a))}function l(e,i){if(null!==(e=i.roundingFunction(e,i)))return y(e,i)}function c(i){if(i.target!=window){var t=e(i.target);t.closest(".ui-timepicker-input").length||t.closest(".ui-timepicker-wrapper").length||(r.hide(),e(document).unbind(".ui-timepicker"),e(window).unbind(".ui-timepicker"))}}function u(e){var i=e.data("timepicker-settings");return(window.navigator.msMaxTouchPoints||"ontouchstart"in document)&&i.disableTouchKeyboard}function p(i,t,r){if(!r&&0!==r)return!1;var n=i.data("timepicker-settings"),a=!1;r=n.roundingFunction(r,n);return t.find("li").each(function(i,t){var n=e(t);if("number"==typeof n.data("time"))return n.data("time")==r?(a=n,!1):void 0}),a}function m(e,i){i.find("li").removeClass("ui-timepicker-selected");var t=x(f(e),e.data("timepicker-settings"));if(null!==t){var r=p(e,i,t);if(r){var n=r.offset().top-i.offset().top;(n+r.outerHeight()>i.outerHeight()||n<0)&&i.scrollTop(i.scrollTop()+r.position().top-r.outerHeight()),r.addClass("ui-timepicker-selected")}}}function d(i,t){if(""!==this.value&&"timepicker"!=t){var r=e(this);if(!r.is(":focus")||i&&"change"==i.type){var n=r.data("timepicker-settings"),a=x(this.value,n);if(null!==a){var s=!1;null!==n.minTime&&a<n.minTime&&null!==n.maxTime&&a>n.maxTime&&(s=!0),e.each(n.disableTimeRanges,function(){if(a>=this[0]&&a<this[1])return s=!0,!1}),n.forceRoundTime&&(a=n.roundingFunction(a,n));var o=y(a,n);s?n.multiple?g(r,o,"error")&&r.trigger("timeRangeError"):h(r,o,"error")&&r.trigger("timeRangeError"):n.multiple?g(r,o):h(r,o)}else r.trigger("timeFormatError")}}}function f(e){return e.is("input")?e.val():e.data("ui-timepicker-value")}function h(e,i,t){if(e.is("input")){e.val(i);var r=e.data("timepicker-settings");r.useSelect&&"select"!=t&&"initial"!=t&&e.data("timepicker-list").val(l(x(i),r))}return e.data("ui-timepicker-value")!=i?(e.data("ui-timepicker-value",i),"select"==t?e.trigger("selectTime").trigger("changeTime").trigger("change","timepicker"):"error"!=t&&e.trigger("changeTime"),!0):(e.trigger("selectTime"),!1)}function g(i,t,r){if(i.is("input")||i.is("textarea")){var n=i.data("timepicker-settings"),a=[];""==i.val()?i.val(i.val()+t):(m=(p=i).data("timepicker-settings"),a=p.val().split(m.separator),u=t,(c=a).some(function(e){for(var i=0;i<c.length;i++)if(u===e)var t=!0;else t=!1;return t})||(a.push(t),i.val((s=a,o="",e.each(s,function(e,i){o+=0==e?i:"; "+i}),o)))),n.useSelect&&"select"!=r&&"initial"!=r&&i.data("timepicker-list").val(l(x(t),n))}var s,o,c,u,p,m;return i.data("ui-timepicker-value")!=t?(i.data("ui-timepicker-value",t),"select"==r?i.trigger("selectTime").trigger("changeTime").trigger("change","timepicker"):"error"!=r&&i.trigger("changeTime"),!0):(i.trigger("selectTime"),!1)}function k(e){switch(e.keyCode){case 13:case 9:return;default:e.preventDefault()}}function v(i){var t=e(this),a=t.data("timepicker-list");if(!a||!n(a)){if(40!=i.keyCode)return!0;r.show.call(t.get(0)),a=t.data("timepicker-list"),u(t)||t.focus()}switch(i.keyCode){case 13:return w(t)&&r.hide.apply(this),i.preventDefault(),!1;case 38:var s=a.find(".ui-timepicker-selected");return s.length?s.is(":first-child")||(s.removeClass("ui-timepicker-selected"),s.prev().addClass("ui-timepicker-selected"),s.prev().position().top<s.outerHeight()&&a.scrollTop(a.scrollTop()-s.outerHeight())):(a.find("li").each(function(i,t){if(e(t).position().top>0)return s=e(t),!1}),s.addClass("ui-timepicker-selected")),!1;case 40:return 0===(s=a.find(".ui-timepicker-selected")).length?(a.find("li").each(function(i,t){if(e(t).position().top>0)return s=e(t),!1}),s.addClass("ui-timepicker-selected")):s.is(":last-child")||(s.removeClass("ui-timepicker-selected"),s.next().addClass("ui-timepicker-selected"),s.next().position().top+2*s.outerHeight()>a.outerHeight()&&a.scrollTop(a.scrollTop()+s.outerHeight())),!1;case 27:a.find("li").removeClass("ui-timepicker-selected"),r.hide();break;case 9:r.hide();break;default:return!0}}function T(i){var t=e(this),r=t.data("timepicker-list"),a=t.data("timepicker-settings");if(!r||!n(r)||a.disableTextInput)return!0;switch(i.keyCode){case 96:case 97:case 98:case 99:case 100:case 101:case 102:case 103:case 104:case 105:case 48:case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:case 65:case 77:case 80:case 186:case 8:case 46:a.typeaheadHighlight?m(t,r):r.hide()}}function w(e){var i=e.data("timepicker-settings"),t=null,r=e.data("timepicker-list").find(".ui-timepicker-selected");return!r.hasClass("ui-timepicker-disabled")&&(r.length&&(t=r.data("time")),null!==t&&("string"!=typeof t&&(t=y(t,i)),i.multiple?g(e,t,"select"):h(e,t,"select")),!0)}function b(e,i){e=Math.abs(e);var r,n,a=Math.round(e/60),s=[];return a<60?s=[a,t.mins]:(r=Math.floor(a/60),n=a%60,30==i&&30==n&&(r+=t.decimal+5),s.push(r),s.push(1==r?t.hr:t.hrs),30!=i&&n&&(s.push(n),s.push(t.mins))),s.join(" ")}function y(r,n){if("number"!=typeof r)return null;var a=parseInt(r%60),s=parseInt(r/60%60),o=parseInt(r/3600%24),l=new Date(1970,0,2,o,s,a,0);if(isNaN(l.getTime()))return null;if("function"===e.type(n.timeFormat))return n.timeFormat(l);for(var c,u,p="",m=0;m<n.timeFormat.length;m++)switch(u=n.timeFormat.charAt(m)){case"a":p+=l.getHours()>11?t.pm:t.am;break;case"A":p+=l.getHours()>11?t.PM:t.AM;break;case"g":p+=0===(c=l.getHours()%12)?"12":c;break;case"G":c=l.getHours(),r===i&&(c=n.show2400?24:0),p+=c;break;case"h":0!==(c=l.getHours()%12)&&c<10&&(c="0"+c),p+=0===c?"12":c;break;case"H":c=l.getHours(),r===i&&(c=n.show2400?24:0),p+=c>9?c:"0"+c;break;case"i":p+=(s=l.getMinutes())>9?s:"0"+s;break;case"s":p+=(a=l.getSeconds())>9?a:"0"+a;break;case"\\":m++,p+=n.timeFormat.charAt(m);break;default:p+=u}return p}function x(e,r){if(""===e||null===e)return null;if("object"==typeof e)return 3600*e.getHours()+60*e.getMinutes()+e.getSeconds();if("string"!=typeof e)return e;"a"!=(e=e.toLowerCase().replace(/[\s\.]/g,"")).slice(-1)&&"p"!=e.slice(-1)||(e+="m");var n="("+t.am.replace(".","")+"|"+t.pm.replace(".","")+"|"+t.AM.replace(".","")+"|"+t.PM.replace(".","")+")?",a=new RegExp("^"+n+"([0-9]?[0-9])\\W?([0-5][0-9])?\\W?([0-5][0-9])?"+n+"$"),s=e.match(a);if(!s)return null;var o=parseInt(1*s[2],10);if(o>24){if(r&&!1===r.wrapHours)return null;o%=24}var l=s[1]||s[5],c=o;if(o<=12&&l){var u=l==t.pm||l==t.PM;c=12==o?u?12:0:o+(u?12:0)}var p=3600*c+60*(1*s[3]||0)+(1*s[4]||0);if(o<12&&!l&&r&&r._twelveHourTime&&r.scrollDefault){var m=p-r.scrollDefault();m<0&&m>=i/-2&&(p=(p+i/2)%i)}return p}e.fn.timepicker=function(i){return this.length?r[i]?this.hasClass("ui-timepicker-input")?r[i].apply(this,Array.prototype.slice.call(arguments,1)):this:"object"!=typeof i&&i?void e.error("Method "+i+" does not exist on jQuery.timepicker"):r.init.apply(this,arguments):this},e.fn.timepicker.defaults={appendTo:"body",className:null,closeOnWindowScroll:!1,disableTextInput:!1,disableTimeRanges:[],disableTouchKeyboard:!1,durationTime:null,forceRoundTime:!1,maxTime:null,minTime:null,noneOption:!1,orientation:"l",roundingFunction:function(e,t){if(null===e)return null;if("number"!=typeof t.step)return e;var r=e%(60*t.step);return r>=30*t.step?e+=60*t.step-r:e-=r,e==i&&t.show2400?e:e%i},scrollDefault:null,selectOnBlur:!1,show2400:!1,showDuration:!1,showOn:["click","focus"],showOnFocus:!0,step:20,stopScrollPropagation:!1,timeFormat:"g:ia",typeaheadHighlight:!0,useSelect:!1,wrapHours:!0,multiple:!1,typeElement:"input",separator:","}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link href="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" rel="stylesheet"/>
        <script type="text/javascript">
        $(document).ready(function(){
        $('#example').timepicker({
            showDuration: true,
            timeFormat: 'g:i:sa',
            typeElement: 'textarea',
            multiple: true,
            separator: '; ',
        });
        $('#example').timepicker('option', 'minTime', '00:00');
        $('#example').timepicker('option', 'maxTime', '11:59');
        })
        </script>
        <textarea id="example"></textarea>
    
    
        <p>The library which i have using is minified.</p>

Answer 1

我认为您可以设置时间选择器的事件选择更改。
在这种情况下，您可以获得textarea的价值。
然后对它们进行排序，并再次为textarea设置值。

Answer 2

我花了一些时间来理解，但是我设法执行了订购

如果我有时间字符串，如果我可以这样命名，则该方法的工作方式如下：

1. 我从textarea中获取值，我使用在时间选择器上定义的分隔符属性将它们拆分。
2. 之后，我用空字符串替换空格。
3. 我将值拆分为一个新数组
4. 我使用orderByMinutes函数对该数组进行排序
5. 在orderByMinutes函数上，我得到的小时和分钟对应的内容没有“：”
6. 我将小时乘以60（相当于分钟），然后将分钟加起来
7. 在这一部分，我进行了验证，如果小时结果为720（以分钟为单位的12小时），则将计算得出的对应值保留下来，因为12:00:00和12:59:59之间的小时为0。
8. 之后我休息小时A减去小时B
9. 我再次映射数组以删除数组每个位置上的空格
10. 使用时间选择器中的分隔符结束连接

仅此而已。

var a = '6:00:00pm; 8:00:00pm; 9:00:00pm; 8:40:00pm; 11:20:00pm; 9:20:00pm; 10:20:00pm; 7:40:00pm'

var times = a.replace(' ','').split(';')

times = $.map(times,function (hora,pos){
    if(hora.replace(' ','').substring(0,2).includes(':')){
        return 0 + hora.replace(' ','')
    }else{
        return hora.replace(' ','')
    }
})

console.log('no ordered')
console.log(times)
console.log('')
console.log('ordered')
console.log(times.sort())

console.log('string returned')
console.log(times.join('; '))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

!function(e){"object"==typeof exports&&exports&&"object"==typeof module&&module&&module.exports===exports?e(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],e):e(jQuery)}(function(e){var i=86400,t={am:"am",pm:"pm",AM:"AM",PM:"PM",decimal:".",mins:"mins",hr:"hr",hrs:"hrs"},r={init:function(i){return this.each(function(){var n=e(this),o=[];for(var l in e.fn.timepicker.defaults)n.data(l)&&(o[l]=n.data(l));var c=e.extend({},e.fn.timepicker.defaults,o,i);if(c.lang&&(t=e.extend(t,c.lang)),c=a(c),n.data("timepicker-settings",c),n.addClass("ui-timepicker-input"),c.useSelect)s(n);else{if(n.prop("autocomplete","off"),c.showOn)for(var u in c.showOn)n.on(c.showOn[u]+".timepicker",r.show);n.on("change.timepicker",d),n.on("keydown.timepicker",v),n.on("keyup.timepicker",T),c.disableTextInput&&n.on("keydown.timepicker",k),d.call(n.get(0))}})},show:function(i){var t=e(this),a=t.data("timepicker-settings");if(i&&i.preventDefault(),a.useSelect)t.data("timepicker-list").focus();else{u(t)&&t.blur();var o=t.data("timepicker-list");if(!t.prop("readonly")&&(o&&0!==o.length&&"function"!=typeof a.durationTime||(s(t),o=t.data("timepicker-list")),!n(o))){t.data("ui-timepicker-value",t.val()),m(t,o),r.hide(),o.show();var l={};a.orientation.match(/r/)?l.left=t.offset().left+t.outerWidth()-o.outerWidth()+parseInt(o.css("marginLeft").replace("px",""),10):l.left=t.offset().left+parseInt(o.css("marginLeft").replace("px",""),10),"t"==(a.orientation.match(/t/)?"t":a.orientation.match(/b/)?"b":t.offset().top+t.outerHeight(!0)+o.outerHeight()>e(window).height()+e(window).scrollTop()?"t":"b")?(o.addClass("ui-timepicker-positioned-top"),l.top=t.offset().top-o.outerHeight()+parseInt(o.css("marginTop").replace("px",""),10)):(o.removeClass("ui-timepicker-positioned-top"),l.top=t.offset().top+t.outerHeight()+parseInt(o.css("marginTop").replace("px",""),10)),o.offset(l);var d=o.find(".ui-timepicker-selected");if(!d.length){var h=x(f(t));null!==h?d=p(t,o,h):a.scrollDefault&&(d=p(t,o,a.scrollDefault()))}if(d&&d.length){var g=o.scrollTop()+d.position().top-d.outerHeight();o.scrollTop(g)}else o.scrollTop(0);return a.stopScrollPropagation&&e(document).on("wheel.ui-timepicker",".ui-timepicker-wrapper",function(i){i.preventDefault();var t=e(this).scrollTop();e(this).scrollTop(t+i.originalEvent.deltaY)}),e(document).on("touchstart.ui-timepicker mousedown.ui-timepicker",c),e(window).on("resize.ui-timepicker",c),a.closeOnWindowScroll&&e(document).on("scroll.ui-timepicker",c),t.trigger("showTimepicker"),this}}},hide:function(i){var t=e(this),r=t.data("timepicker-settings");return r&&r.useSelect&&t.blur(),e(".ui-timepicker-wrapper").each(function(){var i=e(this);if(n(i)){var t=i.data("timepicker-input"),r=t.data("timepicker-settings");r&&r.selectOnBlur&&w(t),i.hide(),t.trigger("hideTimepicker")}}),this},option:function(i,t){return"string"==typeof i&&void 0===t?e(this).data("timepicker-settings")[i]:this.each(function(){var r=e(this),n=r.data("timepicker-settings"),o=r.data("timepicker-list");"object"==typeof i?n=e.extend(n,i):"string"==typeof i&&(n[i]=t),n=a(n),r.data("timepicker-settings",n),o&&(o.remove(),r.data("timepicker-list",!1)),n.useSelect&&s(r)})},getSecondsFromMidnight:function(){return x(f(this))},getTime:function(e){var i=f(this);if(!i)return null;var t=x(i);if(null===t)return null;e||(e=new Date);var r=new Date(e);return r.setHours(t/3600),r.setMinutes(t%3600/60),r.setSeconds(t%60),r.setMilliseconds(0),r},isVisible:function(){var e=this.data("timepicker-list");return!(!e||!n(e))},setTime:function(e){var i=this,t=i.data("timepicker-settings");if(t.forceRoundTime)var r=l(x(e),t);else r=y(x(e),t);return e&&null===r&&t.noneOption&&(r=e),t.multiple?g(i,r):h(i,r),i.data("timepicker-list")&&m(i,i.data("timepicker-list")),this},remove:function(){var e=this;if(e.hasClass("ui-timepicker-input")){var i=e.data("timepicker-settings");return e.removeAttr("autocomplete","off"),e.removeClass("ui-timepicker-input"),e.removeData("timepicker-settings"),e.off(".timepicker"),e.data("timepicker-list")&&e.data("timepicker-list").remove(),i.useSelect&&e.show(),e.removeData("timepicker-list"),this}}};function n(e){var i=e[0];return i.offsetWidth>0&&i.offsetHeight>0}function a(i){if(i.minTime&&(i.minTime=x(i.minTime)),i.maxTime&&(i.maxTime=x(i.maxTime)),i.durationTime&&"function"!=typeof i.durationTime&&(i.durationTime=x(i.durationTime)),"now"==i.scrollDefault)i.scrollDefault=function(){return i.roundingFunction(x(new Date),i)};else if(i.scrollDefault&&"function"!=typeof i.scrollDefault){var t=i.scrollDefault;i.scrollDefault=function(){return i.roundingFunction(x(t),i)}}else i.minTime&&(i.scrollDefault=function(){return i.roundingFunction(i.minTime,i)});if("string"===e.type(i.timeFormat)&&i.timeFormat.match(/[gh]/)&&(i._twelveHourTime=!0),!1===i.showOnFocus&&-1!=i.showOn.indexOf("focus")&&i.showOn.splice(i.showOn.indexOf("focus"),1),i.disableTimeRanges.length>0){for(var r in i.disableTimeRanges)i.disableTimeRanges[r]=[x(i.disableTimeRanges[r][0]),x(i.disableTimeRanges[r][1])];i.disableTimeRanges=i.disableTimeRanges.sort(function(e,i){return e[0]-i[0]});for(r=i.disableTimeRanges.length-1;r>0;r--)i.disableTimeRanges[r][0]<=i.disableTimeRanges[r-1][1]&&(i.disableTimeRanges[r-1]=[Math.min(i.disableTimeRanges[r][0],i.disableTimeRanges[r-1][0]),Math.max(i.disableTimeRanges[r][1],i.disableTimeRanges[r-1][1])],i.disableTimeRanges.splice(r,1))}return i}function s(t){var n=t.data("timepicker-settings"),a=t.data("timepicker-list");if(a&&a.length&&(a.remove(),t.data("timepicker-list",!1)),n.useSelect)var s=a=e("<select />",{class:"ui-timepicker-select"});else a=e("<ul />",{class:"ui-timepicker-list"}),(s=e("<div />",{class:"ui-timepicker-wrapper",tabindex:-1})).css({display:"none",position:"absolute"}).append(a);if(n.noneOption)if(!0===n.noneOption&&(n.noneOption=n.useSelect?"Time...":"None"),e.isArray(n.noneOption)){for(var c in n.noneOption)if(parseInt(c,10)==c){var p=o(n.noneOption[c],n.useSelect);a.append(p)}}else{p=o(n.noneOption,n.useSelect);a.append(p)}if(n.className&&s.addClass(n.className),(null!==n.minTime||null!==n.durationTime)&&n.showDuration){"function"==typeof n.step||n.step;s.addClass("ui-timepicker-with-duration"),s.addClass("ui-timepicker-step-"+n.step)}var d=n.minTime;"function"==typeof n.durationTime?d=x(n.durationTime()):null!==n.durationTime&&(d=n.durationTime);var f=null!==n.minTime?n.minTime:0,k=null!==n.maxTime?n.maxTime:f+i-1;k<f&&(k+=i),k===i-1&&"string"===e.type(n.timeFormat)&&n.show2400&&(k=i);var v=n.disableTimeRanges,T=0,H=v.length,C=n.step;"function"!=typeof C&&(C=function(){return n.step});c=f;for(var D=0;c<=k;c+=60*C(++D)){var O,R=c,S=y(R,n);if(n.useSelect)(O=e("<option />",{value:S})).text(S);else(O=e("<li />")).addClass(R%86400<43200?"ui-timepicker-am":"ui-timepicker-pm"),O.data("time",R<=86400?R:R%86400),O.text(S);if((null!==n.minTime||null!==n.durationTime)&&n.showDuration){var M=b(c-d,n.step);if(n.useSelect)O.text(O.text()+" ("+M+")");else{var F=e("<span />",{class:"ui-timepicker-duration"});F.text(" ("+M+")"),O.append(F)}}T<H&&(R>=v[T][1]&&(T+=1),v[T]&&R>=v[T][0]&&R<v[T][1]&&(n.useSelect?O.prop("disabled",!0):O.addClass("ui-timepicker-disabled"))),a.append(O)}if(s.data("timepicker-input",t),t.data("timepicker-list",s),n.useSelect)t.val()&&a.val(l(x(t.val()),n)),a.on("focus",function(){e(this).data("timepicker-input").trigger("showTimepicker")}),a.on("blur",function(){e(this).data("timepicker-input").trigger("hideTimepicker")}),a.on("change",function(){n.multiple?g(t,e(this).val(),"select"):h(t,e(this).val(),"select")}),n.multiple?g(t,a.val(),"initial"):h(t,a.val(),"initial"),t.hide().after(a);else{var I=n.appendTo;"string"==typeof I?I=e(I):"function"==typeof I&&(I=I(t)),I.append(s),m(t,a),a.on("mousedown click","li",function(i){t.off("focus.timepicker"),t.on("focus.timepicker-ie-hack",function(){t.off("focus.timepicker-ie-hack"),t.on("focus.timepicker",r.show)}),u(t)||t[0].focus(),a.find("li").removeClass("ui-timepicker-selected"),e(this).addClass("ui-timepicker-selected"),w(t)&&(t.trigger("hideTimepicker"),a.on("mouseup.timepicker click.timepicker","li",function(e){a.off("mouseup.timepicker click.timepicker"),s.hide()}))})}}function o(i,t){var r,n,a;return"object"==typeof i?(r=i.label,n=i.className,a=i.value):"string"==typeof i?r=i:e.error("Invalid noneOption value"),t?e("<option />",{value:a,class:n,text:r}):e("<li />",{class:n,text:r}).data("time",String(a))}function l(e,i){if(null!==(e=i.roundingFunction(e,i)))return y(e,i)}function c(i){if(i.target!=window){var t=e(i.target);t.closest(".ui-timepicker-input").length||t.closest(".ui-timepicker-wrapper").length||(r.hide(),e(document).unbind(".ui-timepicker"),e(window).unbind(".ui-timepicker"))}}function u(e){var i=e.data("timepicker-settings");return(window.navigator.msMaxTouchPoints||"ontouchstart"in document)&&i.disableTouchKeyboard}function p(i,t,r){if(!r&&0!==r)return!1;var n=i.data("timepicker-settings"),a=!1;r=n.roundingFunction(r,n);return t.find("li").each(function(i,t){var n=e(t);if("number"==typeof n.data("time"))return n.data("time")==r?(a=n,!1):void 0}),a}function m(e,i){i.find("li").removeClass("ui-timepicker-selected");var t=x(f(e),e.data("timepicker-settings"));if(null!==t){var r=p(e,i,t);if(r){var n=r.offset().top-i.offset().top;(n+r.outerHeight()>i.outerHeight()||n<0)&&i.scrollTop(i.scrollTop()+r.position().top-r.outerHeight()),r.addClass("ui-timepicker-selected")}}}function d(i,t){if(""!==this.value&&"timepicker"!=t){var r=e(this);if(!r.is(":focus")||i&&"change"==i.type){var n=r.data("timepicker-settings"),a=x(this.value,n);if(null!==a){var s=!1;null!==n.minTime&&a<n.minTime&&null!==n.maxTime&&a>n.maxTime&&(s=!0),e.each(n.disableTimeRanges,function(){if(a>=this[0]&&a<this[1])return s=!0,!1}),n.forceRoundTime&&(a=n.roundingFunction(a,n));var o=y(a,n);s?n.multiple?g(r,o,"error")&&r.trigger("timeRangeError"):h(r,o,"error")&&r.trigger("timeRangeError"):n.multiple?g(r,o):h(r,o)}else r.trigger("timeFormatError")}}}function f(e){return e.is("input")?e.val():e.data("ui-timepicker-value")}function h(e,i,t){if(e.is("input")){e.val(i);var r=e.data("timepicker-settings");r.useSelect&&"select"!=t&&"initial"!=t&&e.data("timepicker-list").val(l(x(i),r))}return e.data("ui-timepicker-value")!=i?(e.data("ui-timepicker-value",i),"select"==t?e.trigger("selectTime").trigger("changeTime").trigger("change","timepicker"):"error"!=t&&e.trigger("changeTime"),!0):(e.trigger("selectTime"),!1)}function g(i,t,r){if(i.is("input")||i.is("textarea")){var n=i.data("timepicker-settings"),a=[];""==i.val()?i.val(i.val()+t):(m=(p=i).data("timepicker-settings"),a=p.val().split(m.separator),u=t,(c=a).some(function(e){for(var i=0;i<c.length;i++)if(u===e)var t=!0;else t=!1;return t})||(a.push(t),i.val((s=a,o="",e.each(s,function(e,i){o+=0==e?i:"; "+i}),o)))),n.useSelect&&"select"!=r&&"initial"!=r&&i.data("timepicker-list").val(l(x(t),n))}var s,o,c,u,p,m;return i.data("ui-timepicker-value")!=t?(i.data("ui-timepicker-value",t),"select"==r?i.trigger("selectTime").trigger("changeTime").trigger("change","timepicker"):"error"!=r&&i.trigger("changeTime"),!0):(i.trigger("selectTime"),!1)}function k(e){switch(e.keyCode){case 13:case 9:return;default:e.preventDefault()}}function v(i){var t=e(this),a=t.data("timepicker-list");if(!a||!n(a)){if(40!=i.keyCode)return!0;r.show.call(t.get(0)),a=t.data("timepicker-list"),u(t)||t.focus()}switch(i.keyCode){case 13:return w(t)&&r.hide.apply(this),i.preventDefault(),!1;case 38:var s=a.find(".ui-timepicker-selected");return s.length?s.is(":first-child")||(s.removeClass("ui-timepicker-selected"),s.prev().addClass("ui-timepicker-selected"),s.prev().position().top<s.outerHeight()&&a.scrollTop(a.scrollTop()-s.outerHeight())):(a.find("li").each(function(i,t){if(e(t).position().top>0)return s=e(t),!1}),s.addClass("ui-timepicker-selected")),!1;case 40:return 0===(s=a.find(".ui-timepicker-selected")).length?(a.find("li").each(function(i,t){if(e(t).position().top>0)return s=e(t),!1}),s.addClass("ui-timepicker-selected")):s.is(":last-child")||(s.removeClass("ui-timepicker-selected"),s.next().addClass("ui-timepicker-selected"),s.next().position().top+2*s.outerHeight()>a.outerHeight()&&a.scrollTop(a.scrollTop()+s.outerHeight())),!1;case 27:a.find("li").removeClass("ui-timepicker-selected"),r.hide();break;case 9:r.hide();break;default:return!0}}function T(i){var t=e(this),r=t.data("timepicker-list"),a=t.data("timepicker-settings");if(!r||!n(r)||a.disableTextInput)return!0;switch(i.keyCode){case 96:case 97:case 98:case 99:case 100:case 101:case 102:case 103:case 104:case 105:case 48:case 49:case 50:case 51:case 52:case 53:case 54:case 55:case 56:case 57:case 65:case 77:case 80:case 186:case 8:case 46:a.typeaheadHighlight?m(t,r):r.hide()}}function w(e){var i=e.data("timepicker-settings"),t=null,r=e.data("timepicker-list").find(".ui-timepicker-selected");return!r.hasClass("ui-timepicker-disabled")&&(r.length&&(t=r.data("time")),null!==t&&("string"!=typeof t&&(t=y(t,i)),i.multiple?g(e,t,"select"):h(e,t,"select")),!0)}function b(e,i){e=Math.abs(e);var r,n,a=Math.round(e/60),s=[];return a<60?s=[a,t.mins]:(r=Math.floor(a/60),n=a%60,30==i&&30==n&&(r+=t.decimal+5),s.push(r),s.push(1==r?t.hr:t.hrs),30!=i&&n&&(s.push(n),s.push(t.mins))),s.join(" ")}function y(r,n){if("number"!=typeof r)return null;var a=parseInt(r%60),s=parseInt(r/60%60),o=parseInt(r/3600%24),l=new Date(1970,0,2,o,s,a,0);if(isNaN(l.getTime()))return null;if("function"===e.type(n.timeFormat))return n.timeFormat(l);for(var c,u,p="",m=0;m<n.timeFormat.length;m++)switch(u=n.timeFormat.charAt(m)){case"a":p+=l.getHours()>11?t.pm:t.am;break;case"A":p+=l.getHours()>11?t.PM:t.AM;break;case"g":p+=0===(c=l.getHours()%12)?"12":c;break;case"G":c=l.getHours(),r===i&&(c=n.show2400?24:0),p+=c;break;case"h":0!==(c=l.getHours()%12)&&c<10&&(c="0"+c),p+=0===c?"12":c;break;case"H":c=l.getHours(),r===i&&(c=n.show2400?24:0),p+=c>9?c:"0"+c;break;case"i":p+=(s=l.getMinutes())>9?s:"0"+s;break;case"s":p+=(a=l.getSeconds())>9?a:"0"+a;break;case"\\":m++,p+=n.timeFormat.charAt(m);break;default:p+=u}return p}function x(e,r){if(""===e||null===e)return null;if("object"==typeof e)return 3600*e.getHours()+60*e.getMinutes()+e.getSeconds();if("string"!=typeof e)return e;"a"!=(e=e.toLowerCase().replace(/[\s\.]/g,"")).slice(-1)&&"p"!=e.slice(-1)||(e+="m");var n="("+t.am.replace(".","")+"|"+t.pm.replace(".","")+"|"+t.AM.replace(".","")+"|"+t.PM.replace(".","")+")?",a=new RegExp("^"+n+"([0-9]?[0-9])\\W?([0-5][0-9])?\\W?([0-5][0-9])?"+n+"$"),s=e.match(a);if(!s)return null;var o=parseInt(1*s[2],10);if(o>24){if(r&&!1===r.wrapHours)return null;o%=24}var l=s[1]||s[5],c=o;if(o<=12&&l){var u=l==t.pm||l==t.PM;c=12==o?u?12:0:o+(u?12:0)}var p=3600*c+60*(1*s[3]||0)+(1*s[4]||0);if(o<12&&!l&&r&&r._twelveHourTime&&r.scrollDefault){var m=p-r.scrollDefault();m<0&&m>=i/-2&&(p=(p+i/2)%i)}return p}e.fn.timepicker=function(i){return this.length?r[i]?this.hasClass("ui-timepicker-input")?r[i].apply(this,Array.prototype.slice.call(arguments,1)):this:"object"!=typeof i&&i?void e.error("Method "+i+" does not exist on jQuery.timepicker"):r.init.apply(this,arguments):this},e.fn.timepicker.defaults={appendTo:"body",className:null,closeOnWindowScroll:!1,disableTextInput:!1,disableTimeRanges:[],disableTouchKeyboard:!1,durationTime:null,forceRoundTime:!1,maxTime:null,minTime:null,noneOption:!1,orientation:"l",roundingFunction:function(e,t){if(null===e)return null;if("number"!=typeof t.step)return e;var r=e%(60*t.step);return r>=30*t.step?e+=60*t.step-r:e-=r,e==i&&t.show2400?e:e%i},scrollDefault:null,selectOnBlur:!1,show2400:!1,showDuration:!1,showOn:["click","focus"],showOnFocus:!0,step:20,stopScrollPropagation:!1,timeFormat:"g:ia",typeaheadHighlight:!0,useSelect:!1,wrapHours:!0,multiple:!1,typeElement:"input",separator:","}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link href="http://jonthornton.github.io/jquery-timepicker/jquery.timepicker.css" rel="stylesheet"/>
        <script type="text/javascript">
        $(document).ready(function(){
    
    $('#example').timepicker({
        showDuration: true,
        timeFormat: 'g:i:sa',
        typeElement: 'textarea',
        multiple: true,
        separator: '; ',
    });
    $('#example').timepicker('option', 'minTime', '00:00');
    $('#example').timepicker('option', 'maxTime', '11:59');

    $('#example').on('changeTime', function() {
        $('#example').val(getValue('#example'));
        $('#result').text(getValue('#example'));
    });

    $('#example').on('change', function() {
        $('#example').val(getValue('#example'));
        $('#result').text(getValue('#example'));
    });
})

function orderByMinutes(a,b){
    var hourA = "", hourB = "", minuteA = "", minuteB = ""
    
    hourA = (a.replace(' ','').substring(0,2).includes(':') ? a.replace(' ','').substring(0,2).replace(':','') : a.replace(' ','').substring(0,2) )
    minuteA = (a.replace(' ','').substring(0,2).includes(':') ? a.replace(' ','').substring(2).substring(0,2).replace(':','') : a.replace(' ','').substring(3).substring(0,2) )

    hourB = (b.replace(' ','').substring(0,2).includes(':') ? b.replace(' ','').substring(0,2).replace(':','') : b.replace(' ','').substring(0,2) )
    minuteB = (b.replace(' ','').substring(0,2).includes(':') ? b.replace(' ','').substring(2).substring(0,2).replace(':','') : b.replace(' ','').substring(3).substring(0,2) )

    // minuteutesA = parseInt((((parseInt(hourA) == 12 ? 0 : parseInt(hourA)) * 60) + parseInt(minuteA)))
    // minuteutesB = parseInt((((parseInt(hourB) == 12 ? 0 : parseInt(hourB)) * 60) + parseInt(minuteB)))

    minuteutesA = parseInt(((parseInt(hourA) * 60) + parseInt(minuteA)))
    minuteutesB = parseInt(((parseInt(hourB) * 60) + parseInt(minuteB)))

    if ((parseInt(hourA) * 60) == 720) { // 12
        minuteutesA = minuteutesA - 720
    }

    if ((parseInt(hourB) * 60) == 720) { // 12
        minuteutesB = minuteutesB - 720
    }

    return minuteutesA - minuteutesB
}

function getValue(selector){
    var value = $(selector).val()
    var  times = value.replace(' ','').split(';')

    times.sort(orderByMinutes)
    times = $.map(times,function(hour){
        return hour.replace(' ','')
    })

    var result = times.join('; ')
    return result
}
        </script>
        <textarea id="example"></textarea>
    
        
        <p id="result"></p>