feat(module:datepicker): support month picker (#397)

close #351
NG-ZORRO · Sep 30, 2017 · 4cb03fa · 4cb03fa
1 parent 52b4172
commit 4cb03fa
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/src/components/datepicker/nz-datepicker.component.ts b/src/components/datepicker/nz-datepicker.component.ts
@@ -206,6 +206,7 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
   @Input() nzPlaceHolder = '请选择日期';
   @Input() nzFormat = 'YYYY-MM-DD';
   @Input() nzSize = '';
+  @Input() nzMode: 'day' | 'month' = 'day';
   @ViewChild('trigger') trigger;
   @ViewChild(NzTimePickerInnerComponent) timePickerInner: NzTimePickerInnerComponent;
   @HostBinding('class.ant-calendar-picker') _nzCalendarPicker = true;
@@ -281,7 +282,7 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
   _setShowYear(year, $event) {
     $event.stopPropagation();
     this._showYear = year;
-    this._mode = 'year';
+    this._mode = this.nzMode === 'day' ? 'year' : 'month';
   }
 
   _preDecade() {
@@ -318,15 +319,20 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit {
   }
 
   _clickMonth(month) {
-    this._showMonth = month.index;
-    this._mode = 'year';
+    if (this.nzMode === 'month') {
+      this._closeCalendar();
+      this.nzValue = moment(this.nzValue).year(this._showYear).month(month.index).toDate();
+    } else {
+      this._showMonth = month.index;
+      this._mode = 'year';
+    }
   }
 
   _openCalendar() {
     if (this.nzDisabled) {
       return;
     }
-    this._mode = 'year';
+    this._mode = this.nzMode === 'day' ? 'year' : 'month';
     this._open = true;
     this._setTriggerWidth();
   }

diff --git a/src/showcase/nz-demo-datepicker/nz-demo-datepicker-formatter.component.ts b/src/showcase/nz-demo-datepicker/nz-demo-datepicker-formatter.component.ts
@@ -3,12 +3,14 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'nz-demo-datepicker-formatter',
   template: `
-    <nz-datepicker [(ngModel)]="_date" [nzPlaceHolder]="'Select date'" [nzFormat]="'YYYY/MM/DD'"></nz-datepicker>`,
+    <nz-datepicker [(ngModel)]="_date" [nzPlaceHolder]="'Select date'" [nzFormat]="'YYYY/MM/DD'"></nz-datepicker>
+    <nz-datepicker [(ngModel)]="_month" [nzPlaceHolder]="'Select date'" [nzFormat]="'YYYY/MM'" [nzMode]="'month'"></nz-datepicker>
+  `,
   styles  : []
 })
 export class NzDemoDatePickerFormatterComponent implements OnInit {
   _date = new Date();
-
+  _month = new Date();
   constructor() {
   }
 

diff --git a/src/showcase/nz-demo-datepicker/nz-demo-datepicker.html b/src/showcase/nz-demo-datepicker/nz-demo-datepicker.html
@@ -77,6 +77,12 @@ <h2 id="API"><span>API</span>
           <td>Date</td>
           <td>当前日期</td>
         </tr>
+        <tr>
+          <td>nzMode</td>
+          <td>选择器模式， <code>month</code> 只选择到月份，<code>day</code> 选择到天</td>
+          <td>String</td>
+          <td>"day"</td>
+        </tr>
         <tr>
           <td>nzSize</td>
           <td>输入框大小，<code>large</code> 高度为 32px，<code>small</code> 为 22px，默认是 28px</td>