以 hh:mm tt 格式排序字符串 - javascript - datepicker

Posted 2023-05-09

【中文标题】以 hh:mm tt 格式排序字符串 - javascript - datepicker

【英文标题】：Ordering strings in format hh:mm tt - javascript - datepicker

【发布时间】：2019-07-12 09:50:36

【问题描述】：

我正在使用 timepicker 以这种格式 hh:mm:ss tt 设置 textarea 字符串。

这是我从 textarea 中得到的值 ↓

上午 12:20:00；上午 12:00:00；凌晨 1:20:00；上午 12:40:00；凌晨 2:00:00；上午 1:40:00；

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

我试过了：

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

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

看看它在哪里说 MODIFIED ↓ 和 MODIFIED ↑

当我从 timepicker 中选择一个新值时的预期顺序是这样的

上午 12:00:00；上午 12:20:00；上午 12:40:00；凌晨 1:20:00；凌晨 1:40:00；凌晨 2:00:00；

!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);elseif(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();elseu(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>0function 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 ifunction 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)elsep=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+")");elsevar 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);elsevar 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.disableTouchKeyboardfunction 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),afunction 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!0function 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+=ureturn pfunction 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%=24var 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 pe.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>

【问题讨论】：

我可以在这里的选择器中看到正确的时间顺序。你能重新检查一下吗？

我不知道他是否让我解释得很好。我需要的是，当我从 timepicker 列表中选择一个值时，textarea 的值必须根据其内容进行排序，因为它的值是 hh:mm:ss tt 格式的小时类型。因此，如果我有 2 或 3 个小时（05:00:00 am、12:40:00am 和 11:00:00 pm），当我选择一个新值时，我应该按以下方式排序，例如（08:40： 00 pm) 12:40:00 AM、05:00:00 AM、08:40:00 PM、11:00:00 PM

【参考方案1】：

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

【讨论】：

我知道，但我需要以这种方式订购所有值：12:00:00am；上午 12:20:00；上午 12:40:00；凌晨 1:20:00；凌晨 1:40:00；凌晨 2:00:00；从上午 12:00:00 开始到下午 12:00:00 结束，每 20 分钟一班

【参考方案2】：

好吧，我花了一些时间才理解，但我设法执行了订购

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

我从 textarea 中获取值，我使用 timepicker 上定义的分隔符属性将它们拆分。 之后，我将空格替换为空字符串。 我将值拆分为一个新数组 我使用函数 orderByMinutes 对该数组进行排序 在 orderByMinutes 函数中，我得到没有“：”的小时和分钟通讯员 我将小时乘以 60（相当于分钟），然后将分钟相加 在这部分我进行了验证，如果小时结果为 720（12 小时以分钟为单位），则计算中的对应值将被休息，因为 12:00:00 和 12:59:59 之间的小时为 0。 在那之后我休息 hourA 减去 hourB 我再次映射数组以删除数组每个位置的空格 使用时间选择器中的分隔符以连接结束

就是这样。

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);elseif(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();elseu(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>0function 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 ifunction 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)elsep=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+")");elsevar 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);elsevar 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.disableTouchKeyboardfunction 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),afunction 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!0function 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+=ureturn pfunction 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%=24var 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 pe.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>