feat(datepicker): disable datepicker dates based on dateDisabled prop…

…erty (valor-software#799) * Implemented dateDisabled property on date picker in day, month and year mode. * Added Disable Tomorrow example to demo app
sdolier · Oct 15, 2016 · 2df72df · 2df72df
1 parent fe6ad23
commit 2df72df
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 7 deletions.
diff --git a/components/datepicker/datepicker-inner.component.ts b/components/datepicker/datepicker-inner.component.ts
@@ -63,8 +63,7 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
   @Input() public onlyCurrentMonth: boolean;
   @Input() public shortcutPropagation: boolean;
   @Input() public customClass: Array<{date: Date, mode: string, clazz: string}>;
-  // todo: change type during implementation
-  @Input() public dateDisabled: any;
+  @Input() public dateDisabled: Array<{date:Date, mode:string}>;
   @Input() public initDate: Date;
 
   @Output() public selectionDone: EventEmitter<Date> = new EventEmitter<Date>(undefined);
@@ -310,9 +309,37 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
     return customClassObject === undefined ? '' : customClassObject.clazz;
   }
 
+  private compareDateDisabled(date1Disabled: {date: Date, mode: string}, date2: Date): number {
+    if (date1Disabled === undefined || date2 === undefined) {
+      return undefined;
+    }
+
+    if (date1Disabled.mode === 'day' && this.compareHandlerDay) {
+      return this.compareHandlerDay(date1Disabled.date, date2);
+    }
+
+    if (date1Disabled.mode === 'month' && this.compareHandlerMonth) {
+      return this.compareHandlerMonth(date1Disabled.date, date2);
+    }
+
+    if (date1Disabled.mode === 'year' && this.compareHandlerYear) {
+      return this.compareHandlerYear(date1Disabled.date, date2);
+    }
+
+    return undefined;
+  }
+
   private isDisabled(date: Date): boolean {
-    // todo: implement dateDisabled attribute
-    return ((this.minDate && this.compare(date, this.minDate) < 0) ||
+    let isDateDisabled: boolean = false;
+    if (this.dateDisabled) {
+      this.dateDisabled.forEach((disabledDate: {date: Date, mode: string}) => {
+        if (this.compareDateDisabled(disabledDate, date) === 0) {
+          isDateDisabled = true;
+        }
+      });
+    }
+
+    return (isDateDisabled || (this.minDate && this.compare(date, this.minDate) < 0) ||
     (this.maxDate && this.compare(date, this.maxDate) > 0));
   }
 }
diff --git a/components/datepicker/datepicker.component.ts b/components/datepicker/datepicker.component.ts
@@ -55,8 +55,7 @@ export class DatePickerComponent implements ControlValueAccessor {
   @Input() public onlyCurrentMonth:boolean;
   @Input() public shortcutPropagation:boolean;
   @Input() public customClass:Array<{date:Date, mode:string, clazz:string}>;
-// todo: change type during implementation
-  @Input() public dateDisabled:any;
+  @Input() public dateDisabled:Array<{date:Date, mode:string}>;
 
   @Output() public selectionDone:EventEmitter<Date> = new EventEmitter<Date>(undefined);
 

diff --git a/demo/components/datepicker/datepicker-demo.html b/demo/components/datepicker/datepicker-demo.html
@@ -15,12 +15,13 @@
   <pre class="card card-block card-header">Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
   <h4>Inline</h4>
   <div style="display:inline-block; min-height:290px;">
-    <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true"></datepicker>
+    <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true" [dateDisabled]="dateDisabled"></datepicker>
   </div>
 
   <hr />
   <button type="button" class="btn btn-sm btn-info" (click)="today()">Today</button>
   <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="d20090824();">2009-08-24</button>
   <button type="button" class="btn btn-sm btn-danger" (click)="clear()">Clear</button>
   <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="toggleMin()" tooltip="After today restriction">Min date</button>
+  <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="disableTomorrow()">Disable Tomorrow</button>
 </div>
diff --git a/demo/components/datepicker/datepicker-demo.ts b/demo/components/datepicker/datepicker-demo.ts
@@ -14,6 +14,7 @@ export class DatepickerDemoComponent {
   public events:Array<any>;
   public tomorrow:Date;
   public afterTomorrow:Date;
+  public dateDisabled: Array<{date: Date, mode: string}>;
   public formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];
   public format:string = this.formats[0];
   public dateOptions:any = {
@@ -26,6 +27,7 @@ export class DatepickerDemoComponent {
     (this.tomorrow = new Date()).setDate(this.tomorrow.getDate() + 1);
     (this.afterTomorrow = new Date()).setDate(this.tomorrow.getDate() + 2);
     (this.minDate = new Date()).setDate(this.minDate.getDate() - 1000);
+    (this.dateDisabled = []);
     this.events = [
       {date: this.tomorrow, status: 'full'},
       {date: this.afterTomorrow, status: 'partially'}
@@ -44,6 +46,10 @@ export class DatepickerDemoComponent {
     this.dt = moment('2009-08-24', 'YYYY-MM-DD').toDate();
   }
 
+  public disableTomorrow(): void {
+    this.dateDisabled = [{date: this.tomorrow, mode: 'day'}];
+  }
+
   // todo: implement custom class cases
   public getDayClass(date:any, mode:string):string {
     if (mode === 'day') {
@@ -71,6 +77,7 @@ export class DatepickerDemoComponent {
 
   public clear():void {
     this.dt = void 0;
+    this.dateDisabled = undefined;
   }
 
   public toggleMin():void {