fixing displayDate on the directive resolves - #254 (#262)

* fixing displayDate on the directive resolves - #254

* fixing ts error

* fixing e2e run

CHANGELOG.md

@@ -14,6 +14,7 @@ All notable changes to this project will be documented in this file.
 - Stop using getters in template ([3858dde](https://github.com/vlio20/angular-datepicker/commit/3858dde)) closes [#239](https://github.com/vlio20/angular-datepicker/issues/239)
 
 ### Bug Fixed
+- `displayDate` on the directive bug fix ([???](https://github.com/vlio20/angular-datepicker/commit/ad98d1b)) closes [#254](https://github.com/vlio20/angular-datepicker/issues/254)
 - `max`/`min` date support for strings ([ad98d1b](https://github.com/vlio20/angular-datepicker/commit/ad98d1b)) closes [#250](https://github.com/vlio20/angular-datepicker/issues/250)
 - `value.split` is not a function bug fix ([38f6ce2](https://github.com/vlio20/angular-datepicker/commit/38f6ce2)) closes [#225](https://github.com/vlio20/angular-datepicker/issues/245)
 - Add outputs of each component to docs ([9ee8035](https://github.com/vlio20/angular-datepicker/commit/9ee8035)) closes [#224](https://github.com/vlio20/angular-datepicker/issues/224)

README.md

@@ -38,7 +38,7 @@ Put the dp-date-picker component wherever you need it.
 | Name                 | Type                                | Default            | Applies To                | Description                                                                                                                                                                                                                                        |
 |----------------------|:-----------------------------------:|:------------------:|:-------------------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | mode                 | `"day"\|"month"\|"time"\|"daytime"` | `"day"`            | All                       | The mode of the calender which will be displayed in the picker                                                                                                                                                                                     |
-| displayDate          | `Moment\|String`                    | current date       | `day\|month\|daytime`     | Indicates on what date to open the calendar                                                                                                                                                                                                        |
+| displayDate          | `Moment\|String`                    | current date       | `day\|month\|daytime`     | Indicates on what date to open the calendar on                                                                                                                                                                                                        |
 | disabled             | `Boolean`                           | `false`            | All                       | If set to true the input would be disabled                                                                                                                                                                                                         |
 | placeholder          | `String`                            | `""`               | All                       | The date-picker input placeholder                                                                                                                                                                                                                  |
 | required             | `Boolean`                           | `undefined`        | All                       | This is a validation rule, if there won't be any selected date then the containing form will be invalid.                                                                                                                                           |

protractor.conf.js

@@ -13,7 +13,7 @@ exports.config = {
   capabilities: {
     browserName: 'chrome',
     shardTestFiles: headless,
-    maxInstances: headless ? 4 : 1,
+    maxInstances: headless ? 3 : 1,
     chromeOptions: {
       args: headless ? [
         '--headless',

src/app/common/models/calendar.model.ts

@@ -1,8 +1,9 @@
 import {Moment} from 'moment';
+import {SingleCalendarValue} from '../types/single-calendar-value';
 
 export interface ICalendar {
   locale?: string;
-  min?: Moment | string;
+  min?: SingleCalendarValue;
   max?: Moment | string;
 }
 

src/app/common/types/single-calendar-value.ts

@@ -1,3 +1,3 @@
 import {Moment} from 'moment';
 
-export type SingleCalendarValue = Moment | string;
+export type SingleCalendarValue = Moment | string;

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

@@ -82,10 +82,10 @@ export class DatePickerComponent implements OnChanges,
   @Input() disabled: boolean = false;
   @Input() displayDate: SingleCalendarValue;
   @HostBinding('class') @Input() theme: string;
-  @Input() minDate: Moment | string;
-  @Input() maxDate: Moment | string;
-  @Input() minTime: Moment | string;
-  @Input() maxTime: Moment | string;
+  @Input() minDate: SingleCalendarValue;
+  @Input() maxDate: SingleCalendarValue;
+  @Input() minTime: SingleCalendarValue;
+  @Input() maxTime: SingleCalendarValue;
 
   @Output() open = new EventEmitter<void>();
   @Output() close = new EventEmitter<void>();

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

@@ -18,6 +18,7 @@ import {
 import {NgControl} from '@angular/forms';
 import {Moment} from 'moment';
 import {CalendarValue} from '../common/types/calendar-value';
+import {SingleCalendarValue} from '../common/types/single-calendar-value';
 
 @Directive({
   exportAs: 'dpDayPicker',
@@ -29,10 +30,11 @@ export class DatePickerDirective implements OnInit {
   private _attachTo: ElementRef | string;
   private _theme: string;
   private _mode: CalendarMode = 'day';
-  private _minDate: Moment | string;
-  private _maxDate: Moment | string;
-  private _minTime: Moment | string;
-  private _maxTime: Moment | string;
+  private _minDate: SingleCalendarValue;
+  private _maxDate: SingleCalendarValue;
+  private _minTime: SingleCalendarValue;
+  private _maxTime: SingleCalendarValue;
+  private _displayDate: SingleCalendarValue;
 
   get config(): IDatePickerDirectiveConfig {
     return this._config;
@@ -75,58 +77,67 @@ export class DatePickerDirective implements OnInit {
     }
   }
 
-  @Input() set minDate(minDate: Moment | string) {
+  @Input() set minDate(minDate: SingleCalendarValue) {
     this._minDate = minDate;
     if (this.datePicker) {
       this.datePicker.minDate = minDate;
       this.datePicker.ngOnInit();
     }
   }
 
-  get minDate(): Moment | string {
+  get minDate(): SingleCalendarValue {
     return this._minDate;
   }
 
-  @Input() set maxDate(maxDate: Moment | string) {
+  @Input() set maxDate(maxDate: SingleCalendarValue) {
     this._maxDate = maxDate;
     if (this.datePicker) {
       this.datePicker.maxDate = maxDate;
       this.datePicker.ngOnInit();
     }
   }
 
-  get maxDate(): Moment | string {
+  get maxDate(): SingleCalendarValue {
     return this._maxDate;
   }
 
-  @Input() set minTime(minTime: Moment | string) {
+  @Input() set minTime(minTime: SingleCalendarValue) {
     this._minTime = minTime;
     if (this.datePicker) {
       this.datePicker.minTime = minTime;
       this.datePicker.ngOnInit();
     }
   }
 
-  get minTime(): Moment | string {
+  get minTime(): SingleCalendarValue {
     return this._minTime;
   }
 
-  @Input() set maxTime(maxTime: Moment | string) {
+  @Input() set maxTime(maxTime: SingleCalendarValue) {
     this._maxTime = maxTime;
     if (this.datePicker) {
       this.datePicker.maxTime = maxTime;
       this.datePicker.ngOnInit();
     }
   }
 
+  get maxTime(): SingleCalendarValue {
+    return this._maxTime;
+  }
+
+  get displayDate(): SingleCalendarValue {
+    return this._displayDate;
+  }
+
+  @Input() set displayDate(displayDate: SingleCalendarValue) {
+    this._displayDate = displayDate;
+    this.updateDatepickerConfig();
+  }
+
   @Output() open = new EventEmitter<void>();
   @Output() close = new EventEmitter<void>();
   @Output() onChange = new EventEmitter<CalendarValue>();
 
-  get maxTime(): Moment | string {
-    return this._maxTime;
-  }
-
   public datePicker: DatePickerComponent;
   public api: IDpDayPickerApi;
 
@@ -211,6 +222,7 @@ export class DatePickerDirective implements OnInit {
       this.datePicker.minTime = this.minTime;
       this.datePicker.maxTime = this.maxTime;
       this.datePicker.mode = this.mode || 'day';
+      this.datePicker.displayDate = this.displayDate;
       this.datePicker.config = this.config;
       this.datePicker.open = this.open;
       this.datePicker.close = this.close;

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

@@ -55,8 +55,8 @@ export class DayTimeCalendarComponent implements OnInit, OnChanges, ControlValue
 
   @Input() config: IDayTimeCalendarConfig;
   @Input() displayDate: SingleCalendarValue;
-  @Input() minDate: Moment | string;
-  @Input() maxDate: Moment | string;
+  @Input() minDate: SingleCalendarValue;
+  @Input() maxDate: SingleCalendarValue;
   @HostBinding('class') @Input() theme: string;
 
   @Output() onChange: EventEmitter<IDate> = new EventEmitter();

src/app/demo/demo/demo.component.html

@@ -525,6 +525,7 @@ <h3 class="dp-options-section">Attribute options</h3>
           <dp-date-picker id="displayDate"
                           theme="dp-material"
                           [(ngModel)]="displayDate"
+                          [displayDate]="displayDate"
                           mode="day"
                           placeholder="Select a display date">
           </dp-date-picker>

src/app/demo/demo/demo.component.ts

@@ -8,18 +8,19 @@ import * as moment from 'moment';
 import {Moment} from 'moment';
 import {GaService} from '../services/ga/ga.service';
 import {ECalendarValue} from '../../common/types/calendar-value-enum';
+import {SingleCalendarValue} from '../../common/types/single-calendar-value';
 
 const GLOBAL_OPTION_KEYS = [
   'theme',
   'locale',
-  'returnedValueType'
+  'returnedValueType',
+  'displayDate'
 ];
 const PICKER_OPTION_KEYS = [
   'apiclose',
   'apiopen',
   'appendTo',
   'disabled',
-  'displayDate',
   'disableKeypress',
   'drops',
   'format',
@@ -140,7 +141,7 @@ export class DemoComponent {
   validationMinTime: Moment;
   validationMaxTime: Moment;
   placeholder: string = 'Choose a date...';
-  displayDate: Moment;
+  displayDate: Moment | string;
   dateTypes: {name: string, value: ECalendarValue}[] = [
     {
       name: 'Guess',

src/app/time-select/time-select.component.ts

@@ -52,10 +52,10 @@ export class TimeSelectComponent implements OnInit, OnChanges, ControlValueAcces
 
   @Input() config: ITimeSelectConfig;
   @Input() displayDate: SingleCalendarValue;
-  @Input() minDate: Moment | string;
-  @Input() maxDate: Moment | string;
-  @Input() minTime: Moment | string;
-  @Input() maxTime: Moment | string;
+  @Input() minDate: SingleCalendarValue;
+  @Input() maxDate: SingleCalendarValue;
+  @Input() minTime: SingleCalendarValue;
+  @Input() maxTime: SingleCalendarValue;
   @HostBinding('class') @Input() theme: string;
 
   @Output() onChange: EventEmitter<IDate> = new EventEmitter();