diff --git a/modules/backend/formwidgets/datepicker/assets/js/build-min.js b/modules/backend/formwidgets/datepicker/assets/js/build-min.js index d13d83722..adf5f9a40 100644 --- a/modules/backend/formwidgets/datepicker/assets/js/build-min.js +++ b/modules/backend/formwidgets/datepicker/assets/js/build-min.js @@ -138,8 +138,8 @@ return this.each(function() {var self=$(this),plugin=self.data('pikaday');if(!(plugin instanceof Pikaday)){if(typeof args[0]==='object'){var options=$.extend({},args[0]);options.field=self[0];self.data('pikaday',new Pikaday(options));}}else{if(typeof args[0]==='string'&&typeof plugin[args[0]]==='function'){plugin[args[0]].apply(plugin,Array.prototype.slice.call(args,1));}}});};}));;(function(){var $=window.jQuery,$win=$(window),$doc=$(document),$body;var svgNS='http://www.w3.org/2000/svg',svgSupported='SVGAngle'in window&&(function(){var supported,el=document.createElement('div');el.innerHTML='';supported=(el.firstChild&&el.firstChild.namespaceURI)==svgNS;el.innerHTML='';return supported;})();var transitionSupported=(function(){var style=document.createElement('div').style;return'transition'in style||'WebkitTransition'in style||'MozTransition'in style||'msTransition'in style||'OTransition'in style;})();var touchSupported='ontouchstart'in window,mousedownEvent='mousedown'+(touchSupported?' touchstart':''),mousemoveEvent='mousemove.clockpicker'+(touchSupported?' touchmove.clockpicker':''),mouseupEvent='mouseup.clockpicker'+(touchSupported?' touchend.clockpicker':'');var vibrate=navigator.vibrate?'vibrate':navigator.webkitVibrate?'webkitVibrate':null;function createSvgElement(name){return document.createElementNS(svgNS,name);} function leadingZero(num){return(num<10?'0':'')+num;} var idCounter=0;function uniqueId(prefix){var id=++idCounter+'';return prefix?prefix+id:id;} -var dialRadius=100,outerRadius=80,innerRadius=54,tickRadius=13,diameter=dialRadius*2,duration=transitionSupported?350:1;var tpl=['
','
','
','',' : ','','','
','
','
','
','
','
','
','','','
','
'].join('');function ClockPicker(element,options){var popover=$(tpl),plate=popover.find('.clockpicker-plate'),hoursView=popover.find('.clockpicker-hours'),minutesView=popover.find('.clockpicker-minutes'),amPmBlock=popover.find('.clockpicker-am-pm-block'),isInput=element.prop('tagName')==='INPUT',input=isInput?element:element.find('input'),addon=element.find('.input-group-addon'),self=this,timer;this.id=uniqueId('cp');this.element=element;this.options=options;this.isAppended=false;this.isShown=false;this.currentView='hours';this.isInput=isInput;this.input=input;this.addon=addon;this.popover=popover;this.plate=plate;this.hoursView=hoursView;this.minutesView=minutesView;this.amPmBlock=amPmBlock;this.spanHours=popover.find('.clockpicker-span-hours');this.spanMinutes=popover.find('.clockpicker-span-minutes');this.spanAmPm=popover.find('.clockpicker-span-am-pm');this.amOrPm="PM";if(options.twelvehour){var amPmButtonsTemplate=['
','','','
'].join('');var amPmButtons=$(amPmButtonsTemplate);$('').on("click",function(){self.amOrPm="AM";$('.clockpicker-span-am-pm').empty().append('AM');}).appendTo(this.amPmBlock);$('').on("click",function(){self.amOrPm='PM';$('.clockpicker-span-am-pm').empty().append('PM');}).appendTo(this.amPmBlock);} -if(!options.autoclose){$('').click($.proxy(this.done,this)).appendTo(popover);} +var dialRadius=100,outerRadius=80,innerRadius=54,tickRadius=13,diameter=dialRadius*2,duration=transitionSupported?350:1;var tpl=['
','
','
','',':',' ','','
','
','
','
','
','
','
','','','
','
'].join('');function ClockPicker(element,options){var popover=$(tpl),plate=popover.find('.clockpicker-plate'),hoursView=popover.find('.clockpicker-hours'),minutesView=popover.find('.clockpicker-minutes'),amPmBlock=popover.find('.clockpicker-am-pm-block'),isInput=element.prop('tagName')==='INPUT',input=isInput?element:element.find('input'),addon=element.find('.input-group-addon'),self=this,timer;this.id=uniqueId('cp');this.element=element;this.options=options;this.isAppended=false;this.isShown=false;this.currentView='hours';this.isInput=isInput;this.input=input;this.addon=addon;this.popover=popover;this.plate=plate;this.hoursView=hoursView;this.minutesView=minutesView;this.amPmBlock=amPmBlock;this.spanHours=popover.find('.clockpicker-span-hours');this.spanMinutes=popover.find('.clockpicker-span-minutes');this.spanAmPm=popover.find('.clockpicker-span-am-pm');this.amOrPm="PM";if(options.twelvehour){var amPmButtonsTemplate=['
','','','
'].join('');var amPmButtons=$(amPmButtonsTemplate);$('').on("click",function(){self.amOrPm="AM";$('.clockpicker-span-am-pm').empty().append('AM');}).appendTo(this.amPmBlock);$('').on("click",function(){self.amOrPm='PM';$('.clockpicker-span-am-pm').empty().append('PM');}).appendTo(this.amPmBlock);} +if(!options.autoclose){$('').click($.proxy(this.done,this)).appendTo(popover);} if((options.placement==='top'||options.placement==='bottom')&&(options.align==='top'||options.align==='bottom'))options.align='left';if((options.placement==='left'||options.placement==='right')&&(options.align==='left'||options.align==='right'))options.align='top';popover.addClass(options.placement);popover.addClass('clockpicker-align-'+options.align);this.spanHours.click($.proxy(this.toggleView,this,'hours'));this.spanMinutes.click($.proxy(this.toggleView,this,'minutes'));input.on('focus.clockpicker click.clockpicker',$.proxy(this.show,this));addon.on('click.clockpicker',$.proxy(this.toggle,this));var tickTpl=$('
'),i,tick,radian,radius;if(options.twelvehour){for(i=1;i<13;i+=1){tick=tickTpl.clone();radian=i/6*Math.PI;radius=outerRadius;tick.css('font-size','120%');tick.css({left:dialRadius+Math.sin(radian)*radius-tickRadius,top:dialRadius-Math.cos(radian)*radius-tickRadius});tick.html(i===0?'00':i);hoursView.append(tick);tick.on(mousedownEvent,mousedown);}}else{for(i=0;i<24;i+=1){tick=tickTpl.clone();radian=i/6*Math.PI;var inner=i>0&&i<13;radius=inner?innerRadius:outerRadius;tick.css({left:dialRadius+Math.sin(radian)*radius-tickRadius,top:dialRadius-Math.cos(radian)*radius-tickRadius});if(inner){tick.css('font-size','120%');} tick.html(i===0?'00':i);hoursView.append(tick);tick.on(mousedownEvent,mousedown);}} for(i=0;i<60;i+=5){tick=tickTpl.clone();radian=i/30*Math.PI;tick.css({left:dialRadius+Math.sin(radian)*outerRadius-tickRadius,top:dialRadius-Math.cos(radian)*outerRadius-tickRadius});tick.css('font-size','120%');tick.html(leadingZero(i));minutesView.append(tick);tick.on(mousedownEvent,mousedown);} @@ -156,8 +156,10 @@ ClockPicker.DEFAULTS={'default':'',fromnow:0,placement:'bottom',align:'left',don switch(align){case'left':styles.left=offset.left;break;case'right':styles.left=offset.left+width-popover.outerWidth();break;case'top':styles.top=offset.top;break;case'bottom':styles.top=offset.top+height-popover.outerHeight();break;} popover.css(styles);};ClockPicker.prototype.show=function(e){if(this.isShown){return;} raiseCallback(this.options.beforeShow);var self=this;if(!this.isAppended){$body=$(document.body).append(this.popover);$win.on('resize.clockpicker'+this.id,function(){if(self.isShown){self.locate();}});this.isAppended=true;} -var value=((this.input.prop('value')||this.options['default']||'')+'').split(':');if(value[0]==='now'){var now=new Date(+new Date()+this.options.fromnow);value=[now.getHours(),now.getMinutes()];} -this.hours=+value[0]||0;this.minutes=+value[1]||0;this.spanHours.html(leadingZero(this.hours));this.spanMinutes.html(leadingZero(this.minutes));this.toggleView('hours');this.locate();this.isShown=true;$doc.on('click.clockpicker.'+this.id+' focusin.clockpicker.'+this.id,function(e){var target=$(e.target);if(target.closest(self.popover).length===0&&target.closest(self.addon).length===0&&target.closest(self.input).length===0){self.hide();}});$doc.on('keyup.clockpicker.'+this.id,function(e){if(e.keyCode===27){self.hide();}});raiseCallback(this.options.afterShow);};ClockPicker.prototype.hide=function(){raiseCallback(this.options.beforeHide);this.isShown=false;$doc.off('click.clockpicker.'+this.id+' focusin.clockpicker.'+this.id);$doc.off('keyup.clockpicker.'+this.id);this.popover.hide();raiseCallback(this.options.afterHide);};ClockPicker.prototype.toggleView=function(view,delay){var raiseAfterHourSelect=false;if(view==='minutes'&&$(this.hoursView).css("visibility")==="visible"){raiseCallback(this.options.beforeHourSelect);raiseAfterHourSelect=true;} +var value=((this.input.prop('value')||this.options['default']||'')+'');if(this.options.twelvehour){var amPmValue=value.split(' ');if(amPmValue[1]){value=amPmValue[0];this.amOrPm=amPmValue[1];}} +value=value.split(':');if(value[0]==='now'){var now=new Date(+new Date()+this.options.fromnow);value=[now.getHours(),now.getMinutes()];} +this.hours=+value[0]||0;this.minutes=+value[1]||0;this.spanHours.html(leadingZero(this.hours));this.spanMinutes.html(leadingZero(this.minutes));if(this.options.twelvehour){this.spanAmPm.html(this.amOrPm);} +this.toggleView('hours');this.locate();this.isShown=true;$doc.on('click.clockpicker.'+this.id+' focusin.clockpicker.'+this.id,function(e){var target=$(e.target);if(target.closest(self.popover).length===0&&target.closest(self.addon).length===0&&target.closest(self.input).length===0){self.hide();}});$doc.on('keyup.clockpicker.'+this.id,function(e){if(e.keyCode===27){self.hide();}});raiseCallback(this.options.afterShow);};ClockPicker.prototype.hide=function(){raiseCallback(this.options.beforeHide);this.isShown=false;$doc.off('click.clockpicker.'+this.id+' focusin.clockpicker.'+this.id);$doc.off('keyup.clockpicker.'+this.id);this.popover.hide();raiseCallback(this.options.afterHide);};ClockPicker.prototype.toggleView=function(view,delay){var raiseAfterHourSelect=false;if(view==='minutes'&&$(this.hoursView).css("visibility")==="visible"){raiseCallback(this.options.beforeHourSelect);raiseAfterHourSelect=true;} var isHours=view==='hours',nextView=isHours?this.hoursView:this.minutesView,hideView=isHours?this.minutesView:this.hoursView;this.currentView=view;this.spanHours.toggleClass('text-primary',isHours);this.spanMinutes.toggleClass('text-primary',!isHours);hideView.addClass('clockpicker-dial-out');nextView.css('visibility','visible').removeClass('clockpicker-dial-out');this.resetClock(delay);clearTimeout(this.toggleViewTimer);this.toggleViewTimer=setTimeout(function(){hideView.css('visibility','hidden');},duration);if(raiseAfterHourSelect){raiseCallback(this.options.afterHourSelect);}};ClockPicker.prototype.resetClock=function(delay){var view=this.currentView,value=this[view],isHours=view==='hours',unit=Math.PI/(isHours?6:30),radian=value*unit,radius=isHours&&value>0&&value<13?innerRadius:outerRadius,x=Math.sin(radian)*radius,y=-Math.cos(radian)*radius,self=this;if(svgSupported&&delay){self.canvas.addClass('clockpicker-canvas-out');setTimeout(function(){self.canvas.removeClass('clockpicker-canvas-out');self.setHand(x,y);},delay);}else{this.setHand(x,y);}};ClockPicker.prototype.setHand=function(x,y,roundBy5,dragging){var radian=Math.atan2(x,-y),isHours=this.currentView==='hours',unit=Math.PI/(isHours||roundBy5?6:30),z=Math.sqrt(x*x+y*y),options=this.options,inner=isHours&&z<(outerRadius+innerRadius)/2,radius=inner?innerRadius:outerRadius,value;if(options.twelvehour){radius=outerRadius;} if(radian<0){radian=Math.PI*2+radian;} value=Math.round(radian/unit);radian=value*unit;if(options.twelvehour){if(isHours){if(value===0){value=12;}}else{if(roundBy5){value*=5;} @@ -193,7 +195,8 @@ this.initRegion() if(this.hasDate){this.initDatePicker()} if(this.hasTime){this.initTimePicker()} if(changeMonitor!==undefined){changeMonitor.resume()} -this.$timePicker.on('change.oc.datepicker',function(){if(!$.trim($(this).val())){self.emptyValues()}}) +this.$timePicker.on('change.oc.datepicker',function(){if(!$.trim($(this).val())){self.emptyValues()} +else{self.onSelectTimePicker()}}) this.$datePicker.on('change.oc.datepicker',function(){if(!$.trim($(this).val())){self.emptyValues()}}) this.$el.one('dispose-control',this.proxy(this.dispose))} DatePicker.prototype.dispose=function(){this.$timePicker.off('change.oc.datepicker') @@ -221,7 +224,7 @@ return moment(value,this.getDateFormat()).format(this.dbDateFormat)} DatePicker.prototype.getDateFormat=function(){var format=this.options.format if(this.locale){format=moment().locale(this.locale).localeData().longDateFormat('l')} return format} -DatePicker.prototype.initTimePicker=function(){this.$timePicker.clockpicker({autoclose:'true',placement:'bottom',align:'right',twelvehour:this.isTimeTwelveHour(),afterDone:this.proxy(this.onSelectTimePicker)}) +DatePicker.prototype.initTimePicker=function(){this.$timePicker.clockpicker({autoclose:'true',placement:'bottom',align:'right',twelvehour:this.isTimeTwelveHour()}) this.$timePicker.val(this.getDataLockerValue(this.getTimeFormat()))} DatePicker.prototype.onSelectTimePicker=function(){var pickerValue=this.$timePicker.val() var timeValue=moment(pickerValue,this.getTimeFormat()).format(this.dbTimeFormat) diff --git a/modules/backend/formwidgets/datepicker/assets/js/datepicker.js b/modules/backend/formwidgets/datepicker/assets/js/datepicker.js index e00277090..31e83a862 100644 --- a/modules/backend/formwidgets/datepicker/assets/js/datepicker.js +++ b/modules/backend/formwidgets/datepicker/assets/js/datepicker.js @@ -72,6 +72,9 @@ if (!$.trim($(this).val())) { self.emptyValues() } + else { + self.onSelectTimePicker() + } }) this.$datePicker.on('change.oc.datepicker', function() { @@ -182,8 +185,8 @@ autoclose: 'true', placement: 'bottom', align: 'right', - twelvehour: this.isTimeTwelveHour(), - afterDone: this.proxy(this.onSelectTimePicker) + twelvehour: this.isTimeTwelveHour() + // afterDone: this.proxy(this.onSelectTimePicker) }) this.$timePicker.val(this.getDataLockerValue(this.getTimeFormat())) diff --git a/modules/backend/formwidgets/datepicker/assets/vendor/clockpicker/css/jquery-clockpicker.css b/modules/backend/formwidgets/datepicker/assets/vendor/clockpicker/css/jquery-clockpicker.css index cfccc5732..ed1470a00 100644 --- a/modules/backend/formwidgets/datepicker/assets/vendor/clockpicker/css/jquery-clockpicker.css +++ b/modules/backend/formwidgets/datepicker/assets/vendor/clockpicker/css/jquery-clockpicker.css @@ -232,6 +232,7 @@ background-color: rgb(192, 229, 247); background-color: rgba(0, 149, 221, .25); } +/* .clockpicker-button { background-image: none; background-color: #fff; @@ -247,8 +248,9 @@ background-color: #ebebeb; } .clockpicker-button:focus { - outline: none!important; + outline: none!important; } +*/ .clockpicker-dial { -webkit-transition: -webkit-transform 350ms, opacity 350ms; -moz-transition: -moz-transform 350ms, opacity 350ms; diff --git a/modules/backend/formwidgets/datepicker/assets/vendor/clockpicker/js/jquery-clockpicker.js b/modules/backend/formwidgets/datepicker/assets/vendor/clockpicker/js/jquery-clockpicker.js index 05eab6f1e..7d9afa7ae 100644 --- a/modules/backend/formwidgets/datepicker/assets/vendor/clockpicker/js/jquery-clockpicker.js +++ b/modules/backend/formwidgets/datepicker/assets/vendor/clockpicker/js/jquery-clockpicker.js @@ -74,8 +74,8 @@ '
', '
', '', - ' : ', - '', + ':', + ' ', '', '
', '
', @@ -126,9 +126,9 @@ if (options.twelvehour) { var amPmButtonsTemplate = ['
', - '', - '', '
'].join(''); @@ -148,14 +148,14 @@ // $('.clockpicker-span-am-pm').empty().append('PM'); // }); - $('') + $('') .on("click", function() { self.amOrPm = "AM"; $('.clockpicker-span-am-pm').empty().append('AM'); }).appendTo(this.amPmBlock); - $('') + $('') .on("click", function() { self.amOrPm = 'PM'; $('.clockpicker-span-am-pm').empty().append('PM'); @@ -165,7 +165,7 @@ if (! options.autoclose) { // If autoclose is not setted, append a button - $('') + $('') .click($.proxy(this.done, this)) .appendTo(popover); } @@ -458,7 +458,17 @@ } // Get the time - var value = ((this.input.prop('value') || this.options['default'] || '') + '').split(':'); + var value = ((this.input.prop('value') || this.options['default'] || '') + ''); + + if (this.options.twelvehour) { + var amPmValue = value.split(' '); + if (amPmValue[1]) { + value = amPmValue[0]; + this.amOrPm = amPmValue[1]; + } + } + + value = value.split(':'); if (value[0] === 'now') { var now = new Date(+ new Date() + this.options.fromnow); value = [ @@ -466,10 +476,14 @@ now.getMinutes() ]; } + this.hours = + value[0] || 0; this.minutes = + value[1] || 0; this.spanHours.html(leadingZero(this.hours)); this.spanMinutes.html(leadingZero(this.minutes)); + if (this.options.twelvehour) { + this.spanAmPm.html(this.amOrPm); + } // Toggle to hours view this.toggleView('hours');