feat(module:datepicker): support [nzDisabledDate] property in month m…

…ode (#451) close #442
NG-ZORRO · Nov 4, 2017 · cdc0716 · cdc0716
1 parent 50b2606
commit cdc0716
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/src/components/calendar/nz-calendar.component.ts b/src/components/calendar/nz-calendar.component.ts
@@ -21,6 +21,7 @@ export interface MonthInterface {
   year: number;
   isCurrentMonth: boolean;
   isSelectedMonth: boolean;
+  disabled: boolean;
 }
 
 export type QuartersType = Array<MonthInterface>;
@@ -179,6 +180,7 @@ export interface WeekInterface {
                     [attr.title]="month.name"
                     class="ant-calendar-month-panel-cell"
                     [class.ant-calendar-month-panel-selected-cell]="month.isSelectedMonth"
+                    [class.ant-calendar-month-panel-cell-disabled]="month.disabled"
                     [class.ant-calendar-month-panel-current-cell]="month.isCurrentMonth">
                     <div class="ant-calendar-month-panel-month" (click)="_clickMonth($event,month)">
                       {{month.name}}
@@ -286,6 +288,9 @@ export class NzCalendarComponent implements OnInit {
   _clickMonth($event, month) {
     $event.preventDefault();
     $event.stopPropagation();
+    if (month.disabled) {
+      return;
+    }
     this.nzClickMonth.emit(month);
   };
 
@@ -337,7 +342,8 @@ export class NzCalendarComponent implements OnInit {
         name           : this._listOfMonthName[ i ],
         year           : date.year(),
         isCurrentMonth : moment(new Date()).month() === i && date.isSame(new Date(), 'year'),
-        isSelectedMonth: this._showMonth === i
+        isSelectedMonth: this._showMonth === i,
+        disabled       : this.nzDisabledDate && this.nzDisabledDate(date.month(i).toDate())
       });
       if ((i + 1) % 3 === 0) {
         quarters.push(months);

diff --git a/src/components/datepicker/nz-datepicker.component.ts b/src/components/datepicker/nz-datepicker.component.ts
@@ -190,6 +190,7 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
   _triggerWidth = 0;
   _value = null;
   _disabled = false;
+  _disabledDate;
   _today = new Date();
   _selectedMonth = moment(this.nzValue).month();
   _selectedYear = moment(this.nzValue).year();
@@ -202,7 +203,6 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
   // ngModel Access
   onChange: any = Function.prototype;
   onTouched: any = Function.prototype;
-  @Input() nzDisabledDate;
   @Input() nzAllowClear = true;
   @Input() nzShowTime: any = null;
   @Input() nzPlaceHolder = this._locale.translate('DateTime.chooseDatePlease');
@@ -223,6 +223,18 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
     this._closeCalendar();
   }
 
+  @Input()
+  get nzDisabledDate(): Function {
+    if (this._mode === 'month' && this.nzMode === 'day') {
+      return;
+    }
+    return this._disabledDate;
+  };
+
+  set nzDisabledDate(value: Function) {
+    this._disabledDate = value;
+  }
+
   _setTriggerWidth(): void {
     this._triggerWidth = this.trigger.nativeElement.getBoundingClientRect().width;
   }

diff --git a/src/showcase/nz-demo-datepicker/nz-demo-datepicker-disable-date.component.ts b/src/showcase/nz-demo-datepicker/nz-demo-datepicker-disable-date.component.ts
@@ -1,17 +1,25 @@
 import { Component, OnInit } from '@angular/core';
+import * as moment from 'moment';
 
 @Component({
   selector: 'nz-demo-datepicker-disable-date',
   template: `
-    <nz-datepicker [(ngModel)]="_date" [nzPlaceHolder]="'Select date'" [nzDisabledDate]="_disabledDate"></nz-datepicker>`,
+    <nz-datepicker [(ngModel)]="_date" [nzPlaceHolder]="'Select date'" [nzDisabledDate]="_disabledDate"></nz-datepicker>
+    <nz-datepicker [(ngModel)]="_moment" [nzPlaceHolder]="'Select month'" [nzMode]="'month'" [nzDisabledDate]="_disabledMonth" [nzFormat]="'YYYY-MM'"></nz-datepicker>
+  `,
   styles  : []
 })
 export class NzDemoDatePickerDisableDateComponent implements OnInit {
   _date = null;
+  _moment = null;
   _disabledDate = function (current) {
     return current && current.getTime() > Date.now();
   };
 
+  _disabledMonth = function (current) {
+    return current && moment(current).day(0).valueOf() > moment().valueOf();
+  };
+
   constructor() {
   }