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

NG-ZORRO · Oct 18, 2017 · 9a58653 · 9a58653
1 parent 704aa45
commit 9a58653
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/src/components/calendar/nz-calendar.component.ts b/src/components/calendar/nz-calendar.component.ts
@@ -19,6 +19,7 @@ export interface MonthInterface {
   name: string;
   isCurrentMonth: boolean;
   isSelectedMonth: boolean;
+  disabled: boolean;
 }
 
 export type QuartersType = Array<MonthInterface>;
@@ -177,6 +178,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}}
@@ -284,6 +286,9 @@ export class NzCalendarComponent implements OnInit {
   _clickMonth($event, month) {
     $event.preventDefault();
     $event.stopPropagation();
+    if (month.disabled) {
+      return;
+    }
     this.nzClickMonth.emit(month);
   };
 
@@ -316,9 +321,9 @@ export class NzCalendarComponent implements OnInit {
         isSelectedDay: date.isSame(this.nzValue, 'day'),
         title        : date.format('YYYY-MM-DD'),
         date         : date,
-        disabled     : this.nzDisabledDate && this.nzDisabledDate(date.toDate()),
-        firstDisabled: this.nzDisabledDate && this.nzDisabledDate(date.toDate()) && (date.day() === 0 || (date.day() !== 0 && this.nzDisabledDate && !this.nzDisabledDate(date.clone().subtract(1, 'day').toDate()))),
-        lastDisabled : this.nzDisabledDate && this.nzDisabledDate(date.toDate()) && (date.day() === 6 || (date.day() !== 6 && this.nzDisabledDate && !this.nzDisabledDate(date.clone().add(1, 'day').toDate())))
+        disabled     : this.nzDisabledDate && this.nzDisabledDate(date.toDate(), 'day'),
+        firstDisabled: this.nzDisabledDate && this.nzDisabledDate(date.toDate(), 'day') && (date.day() === 0 || (date.day() !== 0 && this.nzDisabledDate && !this.nzDisabledDate(date.clone().subtract(1, 'day').toDate()))),
+        lastDisabled : this.nzDisabledDate && this.nzDisabledDate(date.toDate(), 'day') && (date.day() === 6 || (date.day() !== 6 && this.nzDisabledDate && !this.nzDisabledDate(date.clone().add(1, 'day').toDate())))
       });
       date = date.clone();
       date.add(1, 'd');
@@ -334,7 +339,8 @@ export class NzCalendarComponent implements OnInit {
         index          : i,
         name           : this._listOfMonthName[ i ],
         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(), 'month')
       });
       if ((i + 1) % 3 === 0) {
         quarters.push(months);

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() {
   }
 

diff --git a/src/showcase/nz-demo-datepicker/nz-demo-datepicker-start-end.component.ts b/src/showcase/nz-demo-datepicker/nz-demo-datepicker-start-end.component.ts
@@ -34,10 +34,13 @@ export class NzDemoDatePickerStartEndComponent implements OnInit {
     }
     return startValue.getTime() >= this._endDate.getTime();
   };
-  _disabledEndDate = (endValue) => {
+  _disabledEndDate = (endValue, type) => {
     if (!endValue || !this._startDate) {
       return false;
     }
+    if (type === 'month') {
+      return moment(endValue).day(0).valueOf() <= moment(this._startDate).day(0).valueOf()
+    }
     return endValue.getTime() <= this._startDate.getTime();
   };
   get _isSameDay() {

diff --git a/src/showcase/nz-demo-datepicker/nz-demo-datepicker.html b/src/showcase/nz-demo-datepicker/nz-demo-datepicker.html
@@ -105,8 +105,8 @@ <h2 id="API"><span>API</span>
         </tr>
         <tr>
           <td>nzDisabledDate</td>
-          <td>用于禁用日期的回调函数，返回true表示禁用此日期</td>
-          <td>function(date)</td>
+          <td>用于禁用日期的回调函数，其中第一个参数为目标日期，第二个参数为目标类型，返回true表示禁用此日期</td>
+          <td>function(date: Date, type: string)</td>
           <td></td>
         </tr>
         <tr>