B 269 (#280)

* fixes #269

* reverting demo page

* fixing lint

* fixing e2e

* fixing bugs

Author: vlio20

CHANGELOG.md

@@ -5,8 +5,8 @@ All notable changes to this project will be documented in this file.
 # [2.6.1] (???)
 
 ### Bug Fixed
-- `disableKeypress` doesn't work on the directive ([1c00e48](https://github.com/vlio20/angular-datepicker/commit/1c00e48)) closes [#267](https://github.com/vlio20/angular-datepicker/issues/267)
-
+- Set `min` property dynamically ([???](https://github.com/vlio20/angular-datepicker/commit/???)) closes [#269](https://github.com/vlio20/angular-datepicker/issues/269)
+- `disableKeypress` does not work on the directive ([1c00e48](https://github.com/vlio20/angular-datepicker/commit/1c00e48)) closes [#267](https://github.com/vlio20/angular-datepicker/issues/267)
 - Go to current button not centered ([9b6dc99](https://github.com/vlio20/angular-datepicker/commit/9b6dc99)) closes [#275](https://github.com/vlio20/angular-datepicker/issues/275) - PR by [@KevinJannis](https://github.com/KevinJannis)
 
 <a name="2.6.0"></a>

protractor.conf.js

@@ -12,8 +12,6 @@ exports.config = {
   ],
   capabilities: {
     browserName: 'chrome',
-    shardTestFiles: headless,
-    maxInstances: headless ? 3 : 1,
     chromeOptions: {
       args: headless ? [
         '--headless',
@@ -30,11 +28,6 @@ exports.config = {
     print: function () {
     }
   },
-  // beforeLaunch: function () {
-  //   require('ts-node').register({
-  //     project: 'e2e/tsconfig.e2e.json'
-  //   });
-  // },
   onPrepare() {
     jasmine.getEnv().addReporter(
       new SpecReporter({spec: {displayStacktrace: true}}));

src/app/common/services/utils/utils.service.ts

@@ -1,12 +1,13 @@
 import {ECalendarValue} from '../../types/calendar-value-enum';
 import {SingleCalendarValue} from '../../types/single-calendar-value';
-import {Injectable} from '@angular/core';
+import {Injectable, SimpleChange} from '@angular/core';
 import * as moment from 'moment';
 import {Moment, unitOfTime} from 'moment';
 import {CalendarValue} from '../../types/calendar-value';
 import {IDate} from '../../models/date.model';
 import {CalendarMode} from '../../types/calendar-mode';
 import {DateValidator} from '../../types/validator.type';
+import {ICalendarInternal} from '../../models/calendar.model';
 
 export interface DateLimits {
   minDate?: SingleCalendarValue;
@@ -38,7 +39,7 @@ export class UtilsService {
     } else if (typeof date === 'string') {
       return moment(date, format);
     } else {
-      return date;
+      return date.clone();
     }
   }
 
@@ -99,9 +100,9 @@ export class UtilsService {
       case (ECalendarValue.StringArr):
         return (<string[]>value).map(v => v ? moment(v, format, true) : null).filter(Boolean);
       case (ECalendarValue.Moment):
-        return [<Moment>value];
+        return value ? [(<Moment>value).clone()] : [];
       case (ECalendarValue.MomentArr):
-        return <Moment[]>[].concat(value);
+        return (<Moment[]>value || []).map(v => v.clone());
       default:
         return [];
     }
@@ -117,9 +118,9 @@ export class UtilsService {
       case (ECalendarValue.StringArr):
         return value.filter(Boolean).map(v => v.format(format));
       case (ECalendarValue.Moment):
-        return value[0];
+        return value[0] ? value[0].clone() : value[0];
       case (ECalendarValue.MomentArr):
-        return value;
+        return value ? value.map(v => v.clone()) : value;
       default:
         return value;
     }
@@ -285,4 +286,22 @@ export class UtilsService {
       }
     });
   }
+
+  shouldResetCurrentView<T extends ICalendarInternal>(prevConf: T, currentConf: T): boolean {
+    if (prevConf && currentConf) {
+      if (!prevConf.min && currentConf.min) {
+        return true;
+      } else if (prevConf.min && currentConf.min && !prevConf.min.isSame(currentConf.min, 'd')) {
+        return true;
+      } else if (!prevConf.max && currentConf.max) {
+        return true;
+      } else if (prevConf.max && currentConf.max && !prevConf.max.isSame(currentConf.max, 'd')) {
+        return true;
+      }
+
+      return false;
+    }
+
+    return false;
+  }
 }

src/app/date-picker/date-picker.component.html

@@ -17,7 +17,7 @@
                        *ngSwitchCase="'day'"
                        [config]="dayCalendarConfig"
                        [ngModel]="_selected"
-                       [displayDate]="currentDateView"
+                       [displayDate]="displayDate"
                        (onSelect)="dateSelected($event, 'day')"
                        [theme]="theme">
       </dp-day-calendar>
@@ -26,7 +26,7 @@
                          *ngSwitchCase="'month'"
                          [config]="dayCalendarConfig"
                          [ngModel]="_selected"
-                         [displayDate]="currentDateView"
+                         [displayDate]="displayDate"
                          (onSelect)="dateSelected($event, 'month')"
                          [theme]="theme">
       </dp-month-calendar>
@@ -42,7 +42,7 @@
       <dp-day-time-calendar #daytimeCalendar
                             *ngSwitchCase="'daytime'"
                             [config]="dayTimeCalendarConfig"
-                            [displayDate]="currentDateView"
+                            [displayDate]="displayDate"
                             [ngModel]="_selected && _selected[0]"
                             (onChange)="dateSelected($event, 'second', true)"
                             [theme]="theme">

src/app/date-picker/date-picker.component.ts

@@ -29,10 +29,10 @@ import {
   OnChanges,
   OnDestroy,
   OnInit,
-  Output,
+  Output, QueryList,
   Renderer,
   SimpleChanges,
-  ViewChild,
+  ViewChild, ViewChildren,
   ViewEncapsulation
 } from '@angular/core';
 import {
@@ -46,6 +46,8 @@ import {
 import * as moment from 'moment';
 import {Moment, unitOfTime} from 'moment';
 import {DateValidator} from '../common/types/validator.type';
+import {MonthCalendarComponent} from '../month-calendar/month-calendar.component';
+import {DayTimeCalendarComponent} from '../day-time-calendar/day-time-calendar.component';
 
 @Component({
   selector: 'dp-date-picker',
@@ -93,6 +95,8 @@ export class DatePickerComponent implements OnChanges,
 
   @ViewChild('container') calendarContainer: ElementRef;
   @ViewChild('dayCalendar') dayCalendarRef: DayCalendarComponent;
+  @ViewChild('monthCalendar') monthCalendarRef: MonthCalendarComponent;
+  @ViewChild('daytimeCalendar') dayTimeCalendarRef: DayTimeCalendarComponent;
   @ViewChild('timeSelect') timeSelectRef: TimeSelectComponent;
 
   componentConfig: IDatePickerConfigInternal;
@@ -105,7 +109,7 @@ export class DatePickerComponent implements OnChanges,
   inputValue: CalendarValue;
   inputValueType: ECalendarValue;
   isFocusedTrigger: boolean = false;
-  currentDateView: Moment;
+  _currentDateView: Moment;
   inputElementValue: string;
   calendarWrapper: HTMLElement;
   appendToElement: HTMLElement;
@@ -164,6 +168,26 @@ export class DatePickerComponent implements OnChanges,
     this._areCalendarsShown = value;
   }
 
+  get currentDateView(): Moment {
+    return this._currentDateView;
+  }
+
+  set currentDateView(date: Moment) {
+    this._currentDateView = date;
+
+    if (this.dayCalendarRef) {
+      this.dayCalendarRef.moveCalendarTo(date);
+    }
+
+    if (this.monthCalendarRef) {
+      this.monthCalendarRef.moveCalendarTo(date);
+    }
+
+    if (this.dayTimeCalendarRef) {
+      this.dayTimeCalendarRef.moveCalendarTo(date);
+    }
+  }
+
   constructor(private dayPickerService: DatePickerService,
               private domHelper: DomHelper,
               private elemRef: ElementRef,
@@ -267,6 +291,7 @@ export class DatePickerComponent implements OnChanges,
   ngOnChanges(changes: SimpleChanges) {
     if (this.isInitialized) {
       const {minDate, maxDate, minTime, maxTime} = changes;
+
       this.init();
 
       if (minDate || maxDate || minTime || maxTime) {
@@ -396,10 +421,6 @@ export class DatePickerComponent implements OnChanges,
       this.mode !== 'time';
   }
 
-  moveToCurrent() {
-    this.currentDateView = moment();
-  }
-
   dateSelected(date: IDate, granularity: unitOfTime.Base, ignoreClose?: boolean) {
     this.selected = this.utilsService
       .updateSelected(this.componentConfig.allowMultiSelect, this.selected, date, granularity);

src/app/day-calendar/day-calendar.component.ts

@@ -10,6 +10,7 @@ import {
   OnChanges,
   OnInit,
   Output,
+  SimpleChange,
   SimpleChanges,
   ViewEncapsulation
 } from '@angular/core';
@@ -82,7 +83,8 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
 
   api = {
     moveCalendarsBy: this.moveCalendarsBy.bind(this),
-    toggleCalendar: this.toggleCalendar.bind(this)
+    toggleCalendar: this.toggleCalendar.bind(this),
+    moveCalendarTo: this.moveCalendarTo.bind(this)
   };
 
   set selected(selected: Moment[]) {
@@ -123,7 +125,12 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
     this.currentDateView = this.displayDate
       ? this.utilsService.convertToMoment(this.displayDate, this.componentConfig.format).clone()
       : this.utilsService
-        .getDefaultDisplayDate(this.currentDateView, this.selected, this.componentConfig.allowMultiSelect, this.componentConfig.min);
+        .getDefaultDisplayDate(
+          this.currentDateView,
+          this.selected,
+          this.componentConfig.allowMultiSelect,
+          this.componentConfig.min
+        );
     this.weekdays = this.dayCalendarService
       .generateWeekdays(this.componentConfig.firstDayOfWeek);
     this.inputValueType = this.utilsService.getInputType(this.inputValue, this.componentConfig.allowMultiSelect);
@@ -133,7 +140,9 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
 
   ngOnChanges(changes: SimpleChanges) {
     if (this.isInited) {
-      const {minDate, maxDate} = changes;
+      const {minDate, maxDate, config} = changes;
+
+      this.handleConfigChange(config);
       this.init();
 
       if (minDate || maxDate) {
@@ -254,6 +263,12 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
     this.currentDateView = current.clone().add(amount, granularity);
   }
 
+  moveCalendarTo(to: SingleCalendarValue) {
+    if (to) {
+      this.currentDateView = this.utilsService.convertToMoment(to, this.componentConfig.format);
+    }
+  }
+
   shouldShowCurrent(): boolean {
     return this.utilsService.shouldShowCurrent(
       this.componentConfig.showGoToCurrent,
@@ -266,4 +281,15 @@ export class DayCalendarComponent implements OnInit, OnChanges, ControlValueAcce
   goToCurrent() {
     this.currentDateView = moment();
   }
+
+  handleConfigChange(config: SimpleChange) {
+    if (config) {
+      const prevConf: IDayCalendarConfigInternal = this.dayCalendarService.getConfig(config.previousValue);
+      const currentConf: IDayCalendarConfigInternal = this.dayCalendarService.getConfig(config.currentValue);
+
+      if (this.utilsService.shouldResetCurrentView(prevConf, currentConf)) {
+        this._currentDateView = null;
+      }
+    }
+  }
 }

src/app/day-time-calendar/day-time-calendar.component.ts

@@ -8,8 +8,8 @@ import {
   Input,
   OnChanges,
   OnInit,
-  Output,
-  SimpleChanges,
+  Output, SimpleChange,
+  SimpleChanges, ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import {
@@ -29,6 +29,7 @@ import {TimeSelectService} from '../time-select/time-select.service';
 import {IDayTimeCalendarConfig} from './day-time-calendar-config.model';
 import {DayTimeCalendarService} from './day-time-calendar.service';
 import {DateValidator} from '../common/types/validator.type';
+import {DayCalendarComponent} from '../day-calendar/day-calendar.component';
 
 @Component({
   selector: 'dp-day-time-calendar',
@@ -61,6 +62,8 @@ export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValue
 
   @Output() onChange: EventEmitter<IDate> = new EventEmitter();
 
+  @ViewChild('dayCalendar') dayCalendarRef: DayCalendarComponent;
+
   isInited: boolean = false;
   componentConfig: IDayTimeCalendarConfig;
   _selected: Moment;
@@ -165,4 +168,10 @@ export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValue
   emitChange() {
     this.onChange.emit({date: this.selected, selected: false});
   }
+
+  moveCalendarTo(to: SingleCalendarValue) {
+    if (to) {
+      this.dayCalendarRef.moveCalendarTo(to);
+    }
+  }
 }

src/app/month-calendar/month-calendar.component.ts

@@ -8,6 +8,7 @@ import {
   OnChanges,
   OnInit,
   Output,
+  SimpleChange,
   SimpleChanges,
   ViewEncapsulation
 } from '@angular/core';
@@ -27,6 +28,7 @@ import {
 import {CalendarValue} from '../common/types/calendar-value';
 import {UtilsService} from '../common/services/utils/utils.service';
 import {DateValidator} from '../common/types/validator.type';
+import {SingleCalendarValue} from '../common/types/single-calendar-value';
 
 @Component({
   selector: 'dp-month-calendar',
@@ -72,6 +74,11 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
   showSecondaryLeftNav: boolean;
   showSecondaryRightNav: boolean;
 
+  api = {
+    toggleCalendar: this.toggleCalendar.bind(this),
+    moveCalendarTo: this.moveCalendarTo.bind(this)
+  };
+
   set selected(selected: Moment[]) {
     this._selected = selected;
     this.onChangeCallback(this.processOnChangeCallback(selected));
@@ -108,7 +115,9 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
 
   ngOnChanges(changes: SimpleChanges) {
     if (this.isInited) {
-      const {minDate, maxDate} = changes;
+      const {minDate, maxDate, config} = changes;
+
+      this.handleConfigChange(config);
       this.init();
 
       if (minDate || maxDate) {
@@ -252,4 +261,21 @@ export class MonthCalendarComponent implements OnInit, OnChanges, ControlValueAc
   goToCurrent() {
     this.currentDateView = moment();
   }
+
+  moveCalendarTo(to: SingleCalendarValue) {
+    if (to) {
+      this.currentDateView = this.utilsService.convertToMoment(to, this.componentConfig.format);
+    }
+  }
+
+  handleConfigChange(config: SimpleChange) {
+    if (config) {
+      const prevConf: IMonthCalendarConfigInternal = this.monthCalendarService.getConfig(config.previousValue);
+      const currentConf: IMonthCalendarConfigInternal = this.monthCalendarService.getConfig(config.currentValue);
+
+      if (this.utilsService.shouldResetCurrentView(prevConf, currentConf)) {
+        this._currentDateView = null;
+      }
+    }
+  }
 }