From 979131172035f768ce5b065b5aee505f91f13bb9 Mon Sep 17 00:00:00 2001 From: Derick Kemp Date: Fri, 9 Jun 2017 16:11:05 +0200 Subject: [PATCH 1/3] ngModel binding updates The displayed date is now updated when the ngModel binding is changed and the bound model is also updated when a date is picked in the widget --- js/datepicker-directive.js | 55 ++++++++++++++++++++++++++------------ 1 file changed, 38 insertions(+), 17 deletions(-) diff --git a/js/datepicker-directive.js b/js/datepicker-directive.js index 97fe506..6f5af9b 100644 --- a/js/datepicker-directive.js +++ b/js/datepicker-directive.js @@ -20,7 +20,7 @@ angular.module("cuppaDatepickerDirective",[])
{{myDate | date: 'dd'}}
-
{{myDate | date: 'MMM'}}
+
{{myDate | date: 'MMM'}}
{{myDate | date: 'yyyy'}}
@@ -52,12 +52,12 @@ angular.module("cuppaDatepickerDirective",[])
{{myDate | date: 'MMMM'}} -
+
- {{myDate | date: 'MMMM'}}   + {{myDate | date: 'MMMM'}}   - +
@@ -132,7 +132,7 @@ angular.module("cuppaDatepickerDirective",[]) {{day}} - +
@@ -144,7 +144,7 @@ angular.module("cuppaDatepickerDirective",[])
`, link: function(scope, elem, attr){ - + scope.cal_days_labels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; scope.cal_full_days_lables = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; scope.cal_months_labels = ['January', 'February', 'March', 'April', @@ -153,8 +153,8 @@ angular.module("cuppaDatepickerDirective",[]) scope.cal_months_labels_short = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']; - - scope.cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; + + scope.cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; scope.myDate = new Date(scope.defaultDate); scope.timeViewDate = new Date(scope.myDate); @@ -183,6 +183,12 @@ angular.module("cuppaDatepickerDirective",[]) else{ scope.popover = false; } + + scope.$watch('defaultDate', function() { + scope.myDate = new Date(scope.defaultDate); + scope.callback({"selectedDate":scope.myDate}); + }); + scope.generateDays = function(){ scope.monthDays = []; var year = scope.myDate.getFullYear(), @@ -199,7 +205,7 @@ angular.module("cuppaDatepickerDirective",[]) for (var i = 0; i < 9; i++) { // this loop is for weekdays (cells) dateRow = []; - for (var j = 0; j <= 6; j++) { + for (var j = 0; j <= 6; j++) { var dateCell = 0; if (day <= monthLength && (i > 0 || j >= startingDay)) { dateCell = day; @@ -226,7 +232,7 @@ angular.module("cuppaDatepickerDirective",[]) scope.getMonthLength = function(month,year){ var monthLength = scope.cal_days_in_month[month]; - + // compensate for leap year if (month == 1) { // February only! if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0){ @@ -266,7 +272,7 @@ angular.module("cuppaDatepickerDirective",[]) scope.myDate.setDate(nextmonthLength); } scope.myDate.setMonth(scope.myDate.getMonth() + 1); - + } scope.generateDays(); } @@ -295,20 +301,23 @@ angular.module("cuppaDatepickerDirective",[]) console.log( evt.target ); var selectedYear = parseInt(evt.target.getAttribute('value')); scope.myDate.setYear(selectedYear); - scope.yearView = !scope.yearView; + scope.defaultDate = scope.myDate; + scope.yearView = !scope.yearView; } scope.setMonth = function(evt){ if(evt.target.getAttribute('value')){ var selectedMonth = parseInt(scope.cal_months_labels_short.indexOf(evt.target.getAttribute('value'))); scope.myDate.setMonth(selectedMonth); + scope.defaultDate = scope.myDate; scope.monthsView = !scope.monthsView; } } scope.setDay = function(evt){ if(evt.target.getAttribute('value')){ var selectedDay = parseInt(evt.target.getAttribute('value')); - scope.myDate.setDate(selectedDay); - // scope.popover = false; + scope.myDate.setDate(selectedDay); + scope.defaultDate = scope.myDate; + // scope.popover = false; console.log(scope.myDate); scope.callback({"selectedDate":scope.myDate}); } @@ -327,18 +336,22 @@ angular.module("cuppaDatepickerDirective",[]) if(type == "increment"){ var hours = scope.myDate.getHours() + 1; scope.myDate.setHours(hours); + scope.defaultDate = scope.myDate; } else{ scope.myDate.setHours(scope.myDate.getHours() - 1); + scope.defaultDate = scope.myDate; } } scope.updateMinutes = function(type){ if(type == "increment"){ var minutes = scope.myDate.getMinutes() + 1; scope.myDate.setMinutes(minutes); + scope.defaultDate = scope.myDate; } else{ scope.myDate.setMinutes(scope.myDate.getMinutes() - 1); + scope.defaultDate = scope.myDate; } } scope.setMeridian = function(type){ @@ -347,10 +360,12 @@ angular.module("cuppaDatepickerDirective",[]) if(type == "AM" && hour > 11){ var hourstoSet = hour - 12; scope.myDate.setHours(hourstoSet); + scope.defaultDate = scope.myDate; } if(type == "PM" && hour <= 11){ var hourstoSet = hour + 12; scope.myDate.setHours(hourstoSet); + scope.defaultDate = scope.myDate; } } scope.toggleTimeView = function(){ @@ -385,30 +400,36 @@ angular.module("cuppaDatepickerDirective",[]) if(scope.timeViewMeridian == "AM"){ if(scope.hourValue == 12){ scope.myDate.setHours(0); + scope.defaultDate = scope.myDate; } else{ scope.myDate.setHours(scope.hourValue); + scope.defaultDate = scope.myDate; } scope.myDate.setMinutes(scope.minValue); + scope.defaultDate = scope.myDate; } else{ if(scope.hourValue == 12){ scope.myDate.setHours(scope.hourValue); + scope.defaultDate = scope.myDate; } else{ scope.myDate.setHours(scope.hourValue + 12); + scope.defaultDate = scope.myDate; } scope.myDate.setMinutes(scope.minValue); + scope.defaultDate = scope.myDate; } scope.timeView = !scope.timeView; } $document.on('click',function(e){ if(!angular.element(elem)[0].contains(e.target)){ - scope.popover = false; - scope.timeView = false; + scope.popover = false; + scope.timeView = false; scope.monthsView = false; scope.yearView = false; - scope.$apply(); + scope.$apply(); } }); } From a4c1a93d0695b8ccd2cb43304a3c26733ad242fa Mon Sep 17 00:00:00 2001 From: Derick Kemp Date: Fri, 9 Jun 2017 17:09:37 +0200 Subject: [PATCH 2/3] Changing month now also changes the model --- js/datepicker-directive.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/js/datepicker-directive.js b/js/datepicker-directive.js index 6f5af9b..b3983de 100644 --- a/js/datepicker-directive.js +++ b/js/datepicker-directive.js @@ -257,7 +257,9 @@ angular.module("cuppaDatepickerDirective",[]) } scope.myDate.setMonth(scope.myDate.getMonth() - 1); } - scope.generateDays(); + + scope.defaultDate = scope.myDate; + scope.generateDays(); } scope.nextMonth = function(e){ e.stopPropagation(); @@ -274,6 +276,8 @@ angular.module("cuppaDatepickerDirective",[]) scope.myDate.setMonth(scope.myDate.getMonth() + 1); } + + scope.defaultDate = scope.myDate; scope.generateDays(); } scope.generateYearList = function(param){ @@ -336,23 +340,23 @@ angular.module("cuppaDatepickerDirective",[]) if(type == "increment"){ var hours = scope.myDate.getHours() + 1; scope.myDate.setHours(hours); - scope.defaultDate = scope.myDate; } else{ scope.myDate.setHours(scope.myDate.getHours() - 1); - scope.defaultDate = scope.myDate; } + + scope.defaultDate = scope.myDate; } scope.updateMinutes = function(type){ if(type == "increment"){ var minutes = scope.myDate.getMinutes() + 1; scope.myDate.setMinutes(minutes); - scope.defaultDate = scope.myDate; } else{ scope.myDate.setMinutes(scope.myDate.getMinutes() - 1); - scope.defaultDate = scope.myDate; } + + scope.defaultDate = scope.myDate; } scope.setMeridian = function(type){ var hour = scope.myDate.getHours(); @@ -360,13 +364,13 @@ angular.module("cuppaDatepickerDirective",[]) if(type == "AM" && hour > 11){ var hourstoSet = hour - 12; scope.myDate.setHours(hourstoSet); - scope.defaultDate = scope.myDate; } if(type == "PM" && hour <= 11){ var hourstoSet = hour + 12; scope.myDate.setHours(hourstoSet); - scope.defaultDate = scope.myDate; } + + scope.defaultDate = scope.myDate; } scope.toggleTimeView = function(){ // if(scope.timeView == false){ @@ -400,27 +404,23 @@ angular.module("cuppaDatepickerDirective",[]) if(scope.timeViewMeridian == "AM"){ if(scope.hourValue == 12){ scope.myDate.setHours(0); - scope.defaultDate = scope.myDate; } else{ scope.myDate.setHours(scope.hourValue); - scope.defaultDate = scope.myDate; } scope.myDate.setMinutes(scope.minValue); - scope.defaultDate = scope.myDate; } else{ if(scope.hourValue == 12){ scope.myDate.setHours(scope.hourValue); - scope.defaultDate = scope.myDate; } else{ scope.myDate.setHours(scope.hourValue + 12); - scope.defaultDate = scope.myDate; } scope.myDate.setMinutes(scope.minValue); - scope.defaultDate = scope.myDate; } + + scope.defaultDate = scope.myDate; scope.timeView = !scope.timeView; } $document.on('click',function(e){ From 5c6aaa923e8b6d7fcf86282fb11237ab056aa264 Mon Sep 17 00:00:00 2001 From: Derick Kemp Date: Sun, 18 Jun 2017 21:55:19 +0200 Subject: [PATCH 3/3] Added propper cleanup of watch --- js/datepicker-directive.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/js/datepicker-directive.js b/js/datepicker-directive.js index b3983de..6364b24 100644 --- a/js/datepicker-directive.js +++ b/js/datepicker-directive.js @@ -184,11 +184,21 @@ angular.module("cuppaDatepickerDirective",[]) scope.popover = false; } - scope.$watch('defaultDate', function() { + var unwatchDefaultDate = scope.$watch('defaultDate', function() { scope.myDate = new Date(scope.defaultDate); scope.callback({"selectedDate":scope.myDate}); }); + scope.$on('$destroy', function() { + try { + unwatchDefaultDate(); + } catch (e) { + if (! (e instanceof ReferenceError)) { + throw e; + } + } + }); + scope.generateDays = function(){ scope.monthDays = []; var year = scope.myDate.getFullYear(), @@ -302,7 +312,6 @@ angular.module("cuppaDatepickerDirective",[]) } } scope.setYear = function(evt){ - console.log( evt.target ); var selectedYear = parseInt(evt.target.getAttribute('value')); scope.myDate.setYear(selectedYear); scope.defaultDate = scope.myDate; @@ -322,7 +331,6 @@ angular.module("cuppaDatepickerDirective",[]) scope.myDate.setDate(selectedDay); scope.defaultDate = scope.myDate; // scope.popover = false; - console.log(scope.myDate); scope.callback({"selectedDate":scope.myDate}); } } @@ -550,7 +558,6 @@ angular.module("cuppaDatepickerDirective",[]) if (currentMode === modes.single) { scope.ngModelLow = scope.ngModel; scope.onChange({"val":scope.ngModelLow}); - console.log(scope.ngModelLow); } scope.local[low] = scope[low];