fix: fixed a few bugs in the date range picker

entrecode · Aug 9, 2019 · 81f5da3 · 81f5da3
1 parent d2969dc
commit 81f5da3
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/packages/calendar/src/lib/calendar/month.component.ts b/packages/calendar/src/lib/calendar/month.component.ts
@@ -88,8 +88,8 @@ export class MonthComponent implements OnInit, OnChanges {
     return !this.disabled &&
       !this.disableDrag &&
       (
-        !this.disableDragAnywhere || (
-          (day.first && !this.disableDragStart) || day.last && !this.disableDragEnd)
+        (!this.disableDragAnywhere || this.isInTimeSpan(day.date)) ||
+        ((day.first && !this.disableDragStart) || day.last && !this.disableDragEnd)
       );
   }
 
@@ -102,7 +102,9 @@ export class MonthComponent implements OnInit, OnChanges {
     /*  if (day.date.isSame(this.dragged.date)) {
        return;
      } */
-
+    if (!day || !this.isSelectable(day.date)) {
+      return;
+    }
     let newTimespan;
     if (this.move) {
       const moved = day.date.diff(this.dragged.date, 'days');
@@ -200,7 +202,7 @@ export class MonthComponent implements OnInit, OnChanges {
 
   /** When changing the date or selected input, the calendar will update its view to display the month containing it. */
   ngOnChanges(change) {
-    /* if (change.selected) {
+    if (change.selected) {
       this.setDate(this.selected);
       return;
     } else if (change.date) {
@@ -210,7 +212,7 @@ export class MonthComponent implements OnInit, OnChanges {
     }
     if (change.colors || change.heatmap) {
       this.cells = this.getMonth(this.date.clone(), 'current');
-    } */
+    }
   }
 
   /** Returns days of current month */
@@ -272,9 +274,20 @@ export class MonthComponent implements OnInit, OnChanges {
     if (this.disabled || !this.isSelectable(_moment)) {
       return;
     }
-    this.timespan = [_moment, _moment];
+    if (!this.disableDragAnywhere) {
+      this.timespan = [_moment, _moment];
+      this.spanChanged.emit(this.timespan);
+    } /* else if (!this.isInTimeSpan(_moment)) {
+      if (_moment.isBefore(this.timespan[0])) {
+        this.timespan = [_moment, this.timespan[1]];
+      } else if (_moment.isAfter(this.timespan[1])) {
+        this.timespan = [this.timespan[0], _moment];
+      }
+      this.spanChanged.emit(this.timespan);
+    } */ else if (!this.timespan) {
+      this.selected = _moment;
+    }
     this.setDate(_moment);
-    this.selected = _moment;
     if (emit) {
       this.dayClicked.emit(_moment);
     }

diff --git a/packages/calendar/src/lib/heatmap/heatmap.component.ts b/packages/calendar/src/lib/heatmap/heatmap.component.ts
@@ -29,7 +29,6 @@ export class HeatmapComponent extends MonthComponent implements OnInit, OnChange
       });
       this.timespan =
         this.keepTimespan && this.timespan ? this.timespan : [moment(sorted[sorted.length - 1]), moment(sorted[0])];
-      this.date = this.timespan[1];
       this.stats = this.statsInfo();
       this.updateHeatmap();
     }

diff --git a/src/app/form/datetime-demo.component.ts b/src/app/form/datetime-demo.component.ts
@@ -12,7 +12,7 @@ import moment from 'moment-es6';
     <ec-calendar #calendar></ec-calendar>
     <h2>Month Heatmap</h2>
     <ec-heatmap [selectSpan]="selectSpan"
-    [disableDrag]="false" (spanChanged)="changedSpan($event)" [timestamps]="timestamps"></ec-heatmap>
+    [disableDrag]="false" [disableDragAnywhere]="true" (spanChanged)="changedSpan($event)" [timestamps]="timestamps"></ec-heatmap>
     <h2>Month</h2>
     <p>Just month grid</p>
     <ec-month #month></ec-month>
@@ -21,7 +21,7 @@ import moment from 'moment-es6';
 })
 export class DatetimeDemoComponent {
   timestamps;
-  selectSpan = [moment().subtract(32, 'days'), moment().subtract(16, 'days')];
+  selectSpan = [moment().subtract(2, 'months'), moment()];
 
   constructor() {
     /*     this.timestamps = events.map(e => e.timestamp); */