Fixing future-only date selection feature

kineticsocial#14
subramaniam-s17 · Nov 21, 2016 · ffef861 · ffef861
1 parent d103818
commit ffef861
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -32,16 +32,16 @@ Attributes
   -  date-format: optional, date format e.g. 'yyyy-MM-dd'
   -  year: optional, year selected, e.g. 2015
   -  month: optional, month selected, e.g. 5
-  -  day: optiona, day selected, e.g. 31
+  -  day: optional, day selected, e.g. 31
   -  hour: optional, hour selected, 23
   -  minute: optional, minute selected, 59
   -  date-only: optional, if set, timepicker will be hidden
-  -  future-only: optional, if set, forces validation errors on dates earlier than now
+  -  future-only: optional, if set, Date which is older than today's Date will be not be selectable (Past time for same date is not handled)
 
 Examples
 --------
 
-    <input ng-model="date1" datetime-picker date-only />
+    <input ng-model="date0" datetime-picker date-only />
 
     <input ng-model="date1" datetime-picker date-only future-only />
 

diff --git a/angularjs-datetime-picker.js b/angularjs-datetime-picker.js
@@ -51,6 +51,9 @@
       if (options.dateOnly === '' || options.dateOnly === true) {
         div.attr('date-only', 'true');
       }
+      if (options.futureOnly === '' || options.futureOnly === true) {
+        div.attr('future-only', 'true');
+      }
       if (options.closeOnSelect === 'false') {
         div.attr('close-on-select', 'false');
       }
@@ -115,9 +118,10 @@
     '  <div class="adp-days" ng-click="setDate($event)">',
     '    <div class="adp-day-of-week" ng-repeat="dayOfWeek in ::daysOfWeek" title="{{dayOfWeek.fullName}}">{{::dayOfWeek.firstLetter}}</div>',
     '    <div class="adp-day" ng-show="mv.leadingDays.length < 7" ng-repeat="day in mv.leadingDays">{{::day}}</div>',
-    '    <div class="adp-day selectable" ng-repeat="day in mv.days" ',
+    '    <div class="adp-day" ng-repeat="day in mv.days" ',
     '      today="{{today}}" d2="{{mv.year + \'-\' + (mv.month + 1) + \'-\' + day}}"',
     '      ng-class="{',
+    '        selectable: !futureOnly || (futureOnly && mv.year > todayDate.year) || (futureOnly && mv.year >= todayDate.year && mv.month > todayDate.month) || (futureOnly && mv.year >= todayDate.year && mv.month >= todayDate.month && day >= todayDate.day),',
     '        selected: (day == selectedDay),',
     '        today: (today == (mv.year + \'-\' + (mv.month + 1) + \'-\' + day)),',
     '        weekend: (mv.leadingDays.length + day)%7 == 1 || (mv.leadingDays.length + day)%7 == 0',
@@ -226,8 +230,8 @@
           }
         }
 
+        var today = new Date();
         if (!scope.selectedDate || isNaN(scope.selectedDate.getTime())) { // no predefined date
-          var today = new Date();
           var year = scope.year || today.getFullYear();
           var month = scope.month ? (scope.month-1) : today.getMonth();
           var day = scope.day || today.getDate();
@@ -243,12 +247,18 @@
         var preSelectedDate = dateFilter(elScope.$eval(attrs.ngModel), dateFormat);
         scope.selectedDate = preSelectedDate ? new Date(preSelectedDate) : scope.selectedDate;
         scope.mv = getMonthView(scope.selectedDate.getFullYear(), scope.selectedDate.getMonth());
-        scope.today = dateFilter(new Date(), 'yyyy-M-d');
+        scope.today = dateFilter(today, 'yyyy-M-d');
         if (scope.mv.year == scope.selectedDate.getFullYear() && scope.mv.month == scope.selectedDate.getMonth()) {
           scope.selectedDay = scope.selectedDate.getDate();
         } else {
           scope.selectedDay = null;
         }
+        scope.todayDate = {
+          day: today.getDate(),
+          month: today.getMonth(),
+          year: today.getFullYear()
+        };
+        scope.futureOnly = attrs.futureOnly;
       });
 
       scope.addMonth = function (amount) {

diff --git a/index.html b/index.html
@@ -12,14 +12,17 @@
   </script>
 </head>
 <body ng-app="myApp" ng-init="
-  date1='01-01-2015 00:00:00';
+  date0='01-01-2015 00:00:00';
   date2='Thu Jan 01 2015 00:00:00 GMT-0500 (EST)';
   date3='2015-01-01T00:00:00-0400';
   date4='2015-01-01';">
   <h1>Datetime Picker</h1>
 
-  &lt;input ng-model="date4" datetime-picker date-only /> <br/>
-  <input ng-model="date1" datetime-picker date-only size="30" /> <br/> <br/>
+  &lt;input ng-model="date0" datetime-picker date-only /> <br/>
+  <input ng-model="date0" datetime-picker date-only size="30" /> <br/> <br/>
+
+  &lt;input ng-model="date1" datetime-picker date-only future-only /> <br/>
+  <input ng-model="date1" datetime-picker date-only future-only size="30" /> <br/> <br/>
 
   &lt;input ng-model="date2" datetime-picker date-format="yyyy-MM-dd" date-only /> <br/>
   <input ng-model="date2" datetime-picker date-format="yyyy-MM-dd" size="30"  date-only /> <br/> <br/> <br/>