diff --git a/angularjs-datetime-picker.css b/angularjs-datetime-picker.css index 240be45..a27d950 100644 --- a/angularjs-datetime-picker.css +++ b/angularjs-datetime-picker.css @@ -4,6 +4,7 @@ border: 1px solid #ddd; display: inline-block; background: #fff; + z-index: 1; } .angularjs-datetime-picker > .adp-month { text-align: center; @@ -28,9 +29,15 @@ color: #333; } .angularjs-datetime-picker > .adp-month > button.adp-prev { - left: 10px; + top: 12px; + left: 50px; } .angularjs-datetime-picker > .adp-month > button.adp-next { + top: 12px; + right: 50px; +} +.angularjs-datetime-picker > .adp-month > button.close { + top: 12px; right: 10px; } .angularjs-datetime-picker > .adp-days { diff --git a/angularjs-datetime-picker.js b/angularjs-datetime-picker.js index e86247d..f587cb1 100644 --- a/angularjs-datetime-picker.js +++ b/angularjs-datetime-picker.js @@ -40,6 +40,7 @@ this.openDatetimePicker = function(options) { this.closeDatetimePicker(); + var anchor = angular.element(document.querySelector('[datetime-picker]')); var div = angular.element('
'); options.dateFormat && div.attr('date-format', options.dateFormat); options.ngModel && div.attr('ng-model', options.ngModel); @@ -60,27 +61,21 @@ datetimePickerEl = $compile(div)(options.scope)[0]; datetimePickerEl.triggerEl = options.triggerEl; - $document[0].body.appendChild(datetimePickerEl); + anchor.parent().append(datetimePickerEl); //show datetimePicker below triggerEl - var bcr = triggerEl.getBoundingClientRect(); - - options.scope.$apply(); var datePickerElBcr = datetimePickerEl.getBoundingClientRect(); datetimePickerEl.style.position='absolute'; - if(bcr.width > datePickerElBcr.width){ - datetimePickerEl.style.left= (bcr.left + bcr.width - datePickerElBcr.width + window.scrollX) + 'px'; - } else { - datetimePickerEl.style.left= (bcr.left + window.scrollX) + 'px'; - } + + datetimePickerEl.style.left= (triggerEl.offsetLeft + window.scrollX) + 'px'; - if (bcr.top < 300 || window.innerHeight - bcr.bottom > 300) { - datetimePickerEl.style.top = (bcr.bottom + window.scrollY) + 'px'; + if (triggerEl.offsetTop < 300 || window.innerHeight - triggerEl.offsetTop - triggerEl.clientHeight > 300) { + datetimePickerEl.style.top = (triggerEl.offsetTop + triggerEl.clientHeight + 2 * triggerEl.clientTop) + 'px'; } else { - datetimePickerEl.style.top = (bcr.top - datePickerElBcr.height + window.scrollY) + 'px'; + datetimePickerEl.style.top = (triggerEl.offsetTop - datePickerElBcr.height + 2 * triggerEl.clientTop) + 'px'; } $document[0].body.addEventListener('click', this.closeDatetimePicker); @@ -108,9 +103,10 @@ var tmpl = [ '
' , '
', - ' ', + ' ', ' {{months[mv.month].shortName}} {{mv.year}}', - ' ', + ' ', + ' ', '
', '
', '
{{::dayOfWeek.firstLetter}}
', @@ -137,7 +133,7 @@ var days, months, daysOfWeek, firstDayOfWeek; var initVars = function() { - days =[], months=[]; daysOfWeek=[], firstDayOfWeek=0; + days =[], months=[]; daysOfWeek=[], firstDayOfWeek=1; for (var i = 1; i <= 31; i++) { days.push(i); } @@ -157,7 +153,7 @@ firstLetter: day.substr(0, 1) }); } - firstDayOfWeek = 0; + firstDayOfWeek = 1; }; var getMonthView = function(year, month) { @@ -248,6 +244,11 @@ } }); + scope.close = function () { + var popupEl = document.querySelector('div[datetime-picker-popup]'); + popupEl.remove(); + }; + scope.addMonth = function (amount) { scope.mv = getMonthView(scope.mv.year, scope.mv.month + amount); }; diff --git a/angularjs-datetime-picker.min.js b/angularjs-datetime-picker.min.js index fe3a6bc..2c069df 100644 --- a/angularjs-datetime-picker.min.js +++ b/angularjs-datetime-picker.min.js @@ -1 +1 @@ -!function(){"use strict";angular.module("angularjs-datetime-picker",[]);var e=function(e){"string"==typeof e&&(e=new Date(e));var t=new Date(e.getFullYear(),0,1),a=new Date(e.getFullYear(),6,1),n=Math.max(t.getTimezoneOffset(),a.getTimezoneOffset()),l=e.getTimezoneOffset()=0?"-":"+";return r+("0"+i/60).slice(-2)+":"+("0"+i%60).slice(-2)},t=function(e,t,a){var n=a("DatetimePickerCtrl");return{open:function(e){n.openDatetimePicker(e)},close:function(){n.closeDatetimePicker()}}};t.$inject=["$compile","$document","$controller"],angular.module("angularjs-datetime-picker").factory("DatetimePicker",t);var a=function(e,t){var a,n=this,l=function(e){e&&e.remove(),t[0].body.removeEventListener("click",n.closeDatetimePicker)};this.openDatetimePicker=function(n){this.closeDatetimePicker();var l=angular.element("
");n.dateFormat&&l.attr("date-format",n.dateFormat),n.ngModel&&l.attr("ng-model",n.ngModel),n.year&&l.attr("year",parseInt(n.year)),n.month&&l.attr("month",parseInt(n.month)),n.day&&l.attr("day",parseInt(n.day)),n.hour&&l.attr("hour",parseInt(n.hour)),n.minute&&l.attr("minute",parseInt(n.minute)),(""===n.dateOnly||n.dateOnly===!0)&&l.attr("date-only","true"),"false"===n.closeOnSelect&&l.attr("close-on-select","false");var i=n.triggerEl;n.scope=n.scope||angular.element(i).scope(),a=e(l)(n.scope)[0],a.triggerEl=n.triggerEl,t[0].body.appendChild(a);var r=i.getBoundingClientRect();n.scope.$apply();var o=a.getBoundingClientRect();a.style.position="absolute",a.style.left=r.width>o.width?r.left+r.width-o.width+window.scrollX+"px":r.left+window.scrollX+"px",a.style.top=r.top<300||window.innerHeight-r.bottom>300?r.bottom+window.scrollY+"px":r.top-o.height+window.scrollY+"px",t[0].body.addEventListener("click",this.closeDatetimePicker)},this.closeDatetimePicker=function(e){var a=e&&e.target,n=t[0].querySelector("div[datetime-picker-popup]");e&&a?a.hasAttribute("datetime-picker")||n&&n.contains(a)||l(n):l(n)}};a.$inject=["$compile","$document"],angular.module("angularjs-datetime-picker").controller("DatetimePickerCtrl",a);var n=['
','
',' ',' {{months[mv.month].shortName}} {{mv.year}}',' ',"
",'
','
{{::dayOfWeek.firstLetter}}
','
{{::day}}
','
'," {{::day}}","
",'
{{::day}}
',"
",'
',' {{("0"+inputHour).slice(-2)}} : {{("0"+inputMinute).slice(-2)}}
',' ',' ',"
","
"].join("\n"),l=function(t,a){var l,i,r,o,d=function(){l=[],i=[],r=[],o=0;for(var e=1;31>=e;e++)l.push(e);for(var e=0;12>e;e++)i.push({fullName:t.DATETIME_FORMATS.MONTH[e],shortName:t.DATETIME_FORMATS.SHORTMONTH[e]});for(var e=0;7>e;e++){var a=t.DATETIME_FORMATS.DAY[(e+o)%7];r.push({fullName:a,firstLetter:a.substr(0,1)})}o=0},s=function(e,t){t>11?e++:0>t&&e--,t=(t+12)%12;var a=new Date(e,t,1),n=new Date(e,t+1,0),i=new Date(e,t,0),r=n.getDate(),d=i.getDate(),s=a.getDay(),c=(s-o+7)%7||7,u=l.slice(0,42-(c+r));return u.length>7&&(u=u.slice(0,u.length-7)),{year:e,month:t,days:l.slice(0,r),leadingDays:l.slice(-c-(31-d),d),trailingDays:u}},c=function(t,n,l,o){d();var c=l.dateFormat||"short";t.months=i,t.daysOfWeek=r,t.inputHour,t.inputMinute,t.dateOnly===!0&&(n[0].querySelector("#adp-time").style.display="none"),t.$applyAsync(function(){if(o.triggerEl=angular.element(n[0].triggerEl),l.ngModel){var i=""+o.triggerEl.scope().$eval(l.ngModel);if(i){i.match(/[0-9]{2}:/)||(i+=" 00:00:00"),i=i.replace(/([0-9]{2}-[0-9]{2})-([0-9]{4})/,"$2-$1"),i=i.replace(/([\/-][0-9]{2,4})\ ([0-9]{2}\:[0-9]{2}\:)/,"$1T$2"),i=i.replace(/EDT|EST|CDT|CST|MDT|PDT|PST|UT|GMT/g,""),i=i.replace(/\s*\(\)\s*/,""),i=i.replace(/[\-\+][0-9]{2}:?[0-9]{2}$/,""),i+=e(i);var r=new Date(i);t.selectedDate=new Date(r.getFullYear(),r.getMonth(),r.getDate(),r.getHours(),r.getMinutes(),r.getSeconds())}}if(!t.selectedDate||isNaN(t.selectedDate.getTime())){var d=new Date,c=t.year||d.getFullYear(),u=t.month?t.month-1:d.getMonth(),m=t.day||d.getDate(),g=t.hour||d.getHours(),p=t.minute||d.getMinutes();t.selectedDate=new Date(c,u,m,g,p,0)}t.inputHour=t.selectedDate.getHours(),t.inputMinute=t.selectedDate.getMinutes(),t.mv=s(t.selectedDate.getFullYear(),t.selectedDate.getMonth()),t.today=a(new Date,"yyyy-M-d"),t.selectedDay=t.mv.year==t.selectedDate.getFullYear()&&t.mv.month==t.selectedDate.getMonth()?t.selectedDate.getDate():null}),t.addMonth=function(e){t.mv=s(t.mv.year,t.mv.month+e)},t.setDate=function(e){var a=angular.element(e.target)[0];-1!==a.className.indexOf("selectable")&&(t.updateNgModel(parseInt(a.innerHTML)),t.closeOnSelect!==!1&&o.closeDatetimePicker())},t.updateNgModel=function(e){if(e=e?e:t.selectedDate.getDate(),t.selectedDate=new Date(t.mv.year,t.mv.month,e,t.inputHour,t.inputMinute,0),t.selectedDay=t.selectedDate.getDate(),l.ngModel){var n,i=o.triggerEl.scope();n=i.$eval(l.ngModel)&&"Date"===i.$eval(l.ngModel).constructor.name?new Date(a(t.selectedDate,c)):a(t.selectedDate,c),i.$eval(l.ngModel+"= date",{date:n})}},t.$on("$destroy",o.closeDatetimePicker)};return{restrict:"A",template:n,controller:"DatetimePickerCtrl",replace:!0,scope:{year:"=",month:"=",day:"=",hour:"=",minute:"=",dateOnly:"=",closeOnSelect:"="},link:c}};l.$inject=["$locale","dateFilter"],angular.module("angularjs-datetime-picker").directive("datetimePickerPopup",l);var i=function(e,t){return{require:"ngModel",link:function(e,a,n,l){e.$watch(n.ngModel,function(e){if(e&&""!=e){var t=new Date(e);l.$setValidity("date",t?!0:!1);var a=new Date;n.hasOwnProperty("futureOnly")&&l.$setValidity("future-only",a>t?!1:!0)}}),a[0].addEventListener("click",function(){t.open({triggerEl:a[0],dateFormat:n.dateFormat,ngModel:n.ngModel,year:n.year,month:n.month,day:n.day,hour:n.hour,minute:n.minute,dateOnly:n.dateOnly,futureOnly:n.futureOnly,closeOnSelect:n.closeOnSelect})})}}};i.$inject=["$parse","DatetimePicker"],angular.module("angularjs-datetime-picker").directive("datetimePicker",i)}(); \ No newline at end of file +!function(){"use strict";angular.module("angularjs-datetime-picker",[]);var e=function(e){"string"==typeof e&&(e=new Date(e));var t=new Date(e.getFullYear(),0,1),a=new Date(e.getFullYear(),6,1),n=Math.max(t.getTimezoneOffset(),a.getTimezoneOffset()),l=e.getTimezoneOffset()=0?"-":"+";return r+("0"+i/60).slice(-2)+":"+("0"+i%60).slice(-2)},t=function(e,t,a){var n=a("DatetimePickerCtrl");return{open:function(e){n.openDatetimePicker(e)},close:function(){n.closeDatetimePicker()}}};t.$inject=["$compile","$document","$controller"],angular.module("angularjs-datetime-picker").factory("DatetimePicker",t);var a=function(e,t){var a,n=this,l=function(e){e&&e.remove(),t[0].body.removeEventListener("click",n.closeDatetimePicker)};this.openDatetimePicker=function(n){this.closeDatetimePicker();var l=angular.element(document.querySelector("[datetime-picker]")),i=angular.element("
");n.dateFormat&&i.attr("date-format",n.dateFormat),n.ngModel&&i.attr("ng-model",n.ngModel),n.year&&i.attr("year",parseInt(n.year)),n.month&&i.attr("month",parseInt(n.month)),n.day&&i.attr("day",parseInt(n.day)),n.hour&&i.attr("hour",parseInt(n.hour)),n.minute&&i.attr("minute",parseInt(n.minute)),""!==n.dateOnly&&n.dateOnly!==!0||i.attr("date-only","true"),"false"===n.closeOnSelect&&i.attr("close-on-select","false");var r=n.triggerEl;n.scope=n.scope||angular.element(r).scope(),a=e(i)(n.scope)[0],a.triggerEl=n.triggerEl,l.parent().append(a),n.scope.$apply();var o=a.getBoundingClientRect();a.style.position="absolute",a.style.left=r.offsetLeft+window.scrollX+"px",r.offsetTop<300||window.innerHeight-r.offsetTop-r.clientHeight>300?a.style.top=r.offsetTop+r.clientHeight+2*r.clientTop+"px":a.style.top=r.offsetTop-o.height+2*r.clientTop+"px",t[0].body.addEventListener("click",this.closeDatetimePicker)},this.closeDatetimePicker=function(e){var a=e&&e.target,n=t[0].querySelector("div[datetime-picker-popup]");e&&a?a.hasAttribute("datetime-picker")||n&&n.contains(a)||l(n):l(n)}};a.$inject=["$compile","$document"],angular.module("angularjs-datetime-picker").controller("DatetimePickerCtrl",a);var n=['
','
',' ',' {{months[mv.month].shortName}} {{mv.year}}',' ',' ',"
",'
','
{{::dayOfWeek.firstLetter}}
','
{{::day}}
','
'," {{::day}}","
",'
{{::day}}
',"
",'
',' {{("0"+inputHour).slice(-2)}} : {{("0"+inputMinute).slice(-2)}}
',' ',' ',"
","
"].join("\n"),l=function(t,a){var l,i,r,o,s=function(){l=[],i=[],r=[],o=1;for(var e=1;e<=31;e++)l.push(e);for(var e=0;e<12;e++)i.push({fullName:t.DATETIME_FORMATS.MONTH[e],shortName:t.DATETIME_FORMATS.SHORTMONTH[e]});for(var e=0;e<7;e++){var a=t.DATETIME_FORMATS.DAY[(e+o)%7];r.push({fullName:a,firstLetter:a.substr(0,1)})}o=1},c=function(e,t){t>11?e++:t<0&&e--,t=(t+12)%12;var a=new Date(e,t,1),n=new Date(e,t+1,0),i=new Date(e,t,0),r=n.getDate(),s=i.getDate(),c=a.getDay(),d=(c-o+7)%7||7,u=l.slice(0,42-(d+r));return u.length>7&&(u=u.slice(0,u.length-7)),{year:e,month:t,days:l.slice(0,r),leadingDays:l.slice(-d-(31-s),s),trailingDays:u}},d=function(t,n,l,o){s();var d=l.dateFormat||"short";t.months=i,t.daysOfWeek=r,t.inputHour,t.inputMinute,t.dateOnly===!0&&(n[0].querySelector("#adp-time").style.display="none"),t.$applyAsync(function(){if(o.triggerEl=angular.element(n[0].triggerEl),l.ngModel){var i=""+o.triggerEl.scope().$eval(l.ngModel);if(i){i.match(/[0-9]{2}:/)||(i+=" 00:00:00"),i=i.replace(/([0-9]{2}-[0-9]{2})-([0-9]{4})/,"$2-$1"),i=i.replace(/([\/-][0-9]{2,4})\ ([0-9]{2}\:[0-9]{2}\:)/,"$1T$2"),i=i.replace(/EDT|EST|CDT|CST|MDT|PDT|PST|UT|GMT/g,""),i=i.replace(/\s*\(\)\s*/,""),i=i.replace(/[\-\+][0-9]{2}:?[0-9]{2}$/,""),i+=e(i);var r=new Date(i);t.selectedDate=new Date(r.getFullYear(),r.getMonth(),r.getDate(),r.getHours(),r.getMinutes(),r.getSeconds())}}if(!t.selectedDate||isNaN(t.selectedDate.getTime())){var s=new Date,d=t.year||s.getFullYear(),u=t.month?t.month-1:s.getMonth(),m=t.day||s.getDate(),g=t.hour||s.getHours(),p=t.minute||s.getMinutes();t.selectedDate=new Date(d,u,m,g,p,0)}t.inputHour=t.selectedDate.getHours(),t.inputMinute=t.selectedDate.getMinutes(),t.mv=c(t.selectedDate.getFullYear(),t.selectedDate.getMonth()),t.today=a(new Date,"yyyy-M-d"),t.mv.year==t.selectedDate.getFullYear()&&t.mv.month==t.selectedDate.getMonth()?t.selectedDay=t.selectedDate.getDate():t.selectedDay=null}),t.close=function(){var e=document.querySelector("div[datetime-picker-popup]");e.remove()},t.addMonth=function(e){t.mv=c(t.mv.year,t.mv.month+e)},t.setDate=function(e){var a=angular.element(e.target)[0];a.className.indexOf("selectable")!==-1&&(t.updateNgModel(parseInt(a.innerHTML)),t.closeOnSelect!==!1&&o.closeDatetimePicker())},t.updateNgModel=function(e){if(e=e?e:t.selectedDate.getDate(),t.selectedDate=new Date(t.mv.year,t.mv.month,e,t.inputHour,t.inputMinute,0),t.selectedDay=t.selectedDate.getDate(),l.ngModel){var n,i=o.triggerEl.scope();n=i.$eval(l.ngModel)&&"Date"===i.$eval(l.ngModel).constructor.name?new Date(a(t.selectedDate,d)):a(t.selectedDate,d),i.$eval(l.ngModel+"= date",{date:n})}},t.$on("$destroy",o.closeDatetimePicker)};return{restrict:"A",template:n,controller:"DatetimePickerCtrl",replace:!0,scope:{year:"=",month:"=",day:"=",hour:"=",minute:"=",dateOnly:"=",closeOnSelect:"="},link:d}};l.$inject=["$locale","dateFilter"],angular.module("angularjs-datetime-picker").directive("datetimePickerPopup",l);var i=function(e,t){return{require:"ngModel",link:function(e,a,n,l){e.$watch(n.ngModel,function(e){if(e&&""!=e){var t=new Date(e);l.$setValidity("date",!!t);var a=new Date;n.hasOwnProperty("futureOnly")&&l.$setValidity("future-only",!(t