ngdatepicker.component bugfixes

Author: bojidaryovchev

src/app/ngdatepicker/components/ngdatepicker/ngdatepicker.component.html

@@ -1,6 +1,6 @@
 <div class="ngdatepicker" [class.ngdatepicker-visible]="visible">
  <div class="ngdatepicker-header">
- <div class="ngdatepicker-header-arrow" (click)="backwards()">
+ <div class="ngdatepicker-header-arrow" (click)="backwards($event)">
  <div class="responsive-flex-wrapper">
  <i class="material-icons">keyboard_arrow_left</i>
  </div>
@@ -19,7 +19,7 @@
  </ng-container>
  </ng-container>
  </div>
- <div class="ngdatepicker-header-arrow" (click)="forwards()">
+ <div class="ngdatepicker-header-arrow" (click)="forwards($event)">
  <div class="responsive-flex-wrapper">
  <i class="material-icons">keyboard_arrow_right</i>
  </div>

src/app/ngdatepicker/components/ngdatepicker/ngdatepicker.component.ts

@@ -8,7 +8,7 @@ import { NgDate } from '../../models/ngDate';
  styleUrls: ['./ngdatepicker.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NgDatepickerComponent implements AfterViewChecked {
+export class NgDatepickerComponent {
  private readonly yearCellsCount: number = 16;
  private readonly dayTimespan: number = 24 * 3600 * 1000;
  private readonly datesRows: number = 6;
@@ -29,10 +29,6 @@ export class NgDatepickerComponent implements AfterViewChecked {
 
  constructor(private readonly changeDetectorRef: ChangeDetectorRef) {}
 
- ngAfterViewChecked() {
- this.changeDetectorRef.markForCheck();
- }
-
  get monthString(): string {
  return this.months[this.month];
  }
@@ -158,7 +154,12 @@ export class NgDatepickerComponent implements AfterViewChecked {
  this.year = this.date.getFullYear();
  }
 
- backwards() {
+ backwards(e: Event) {
+ if (e) {
+ e.stopPropagation();
+ e.stopImmediatePropagation();
+ }
+
  switch (this.currentDatepickerView) {
  case DatepickerView.Days:
  this.month--;
@@ -194,7 +195,12 @@ export class NgDatepickerComponent implements AfterViewChecked {
  this.changeDetectorRef.markForCheck();
  }
 
- forwards() {
+ forwards(e: Event) {
+ if (e) {
+ e.stopPropagation();
+ e.stopImmediatePropagation();
+ }
+
  switch (this.currentDatepickerView) {
  case DatepickerView.Days:
  this.month++;
@@ -253,12 +259,12 @@ export class NgDatepickerComponent implements AfterViewChecked {
  (ngDate.date.getMonth() < this.month && ngDate.date.getFullYear() === this.year) ||
  (ngDate.date.getMonth() > this.month && ngDate.date.getFullYear() < this.year)
  ) {
- this.backwards();
+ this.backwards(e);
  } else if (
  (ngDate.date.getMonth() > this.month && ngDate.date.getFullYear() === this.year) ||
  (ngDate.date.getMonth() < this.month && ngDate.date.getFullYear() > this.year)
  ) {
- this.forwards();
+ this.forwards(e);
  }
  } else {
  if (this.minDate) {
@@ -272,7 +278,7 @@ export class NgDatepickerComponent implements AfterViewChecked {
  return;
  }
  }
- 
+
  this.dateChanged.emit(ngDate.date);
  this.hide();
  }

src/app/ngdatepicker/directives/ngdatepicker.directive.ts

@@ -47,8 +47,6 @@ export class NgDatepickerDirective implements OnInit, OnChanges, OnDestroy {
 
  this.appendToBody();
  this.initGlobalScrollHandler();
-
- this.updateInstance();
  }
 
  ngOnChanges() {
@@ -95,6 +93,7 @@ export class NgDatepickerDirective implements OnInit, OnChanges, OnDestroy {
 
  NgDatepickerDirective.ngDatepickerDirectives.forEach(d => d.datepickerInstance.hide());
 
+ this.updateInstance();
  this.datepickerInstance.show();
  }