feat(module: datepicker): feat set disabled work (#233)

NG-ZORRO · Jan 10, 2019 · 8f772a9 · 8f772a9
1 parent d719496
commit 8f772a9
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 101 deletions.
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { en_US, zh_CN } from '../locale-provider/languages';
@@ -25,7 +26,7 @@ describe('DatePickerComponent', () => {
     TestBed.configureTestingModule({
       declarations: [TestDatePickerBasicComponent],
       providers: [DatePickerOptions, LocaleProviderService, Toast],
-      imports: [DatePickerModule, LocaleProviderModule, ButtonModule, ListModule, ToastModule]
+      imports: [DatePickerModule, LocaleProviderModule, ButtonModule, ListModule, ToastModule, FormsModule]
     }).compileComponents();
     TestBed.overrideModule(DatePickerModule, {
       set: { entryComponents: [ToastComponent, DatePickerComponent] }
@@ -192,12 +193,12 @@ describe('DatePickerComponent', () => {
     datePickerEle.querySelector('.am-picker-popup-header-right').click();
   });
 
-  it ('should touch event work', () => {
+  it('should touch event work', () => {
     const list = lists[0].nativeElement;
     list.click();
     fixture.detectChanges();
     datePickerEle = document.querySelector('datepicker');
-    const target =  datePickerEle.querySelector('.am-picker-col-mask');
+    const target = datePickerEle.querySelector('.am-picker-col-mask');
     dispatchTouchEvent(target, 'mousedown', 0, 100);
     fixture.detectChanges();
     dispatchTouchEvent(target, 'mousemove', 0, 1000);
@@ -210,63 +211,97 @@ describe('DatePickerComponent', () => {
 @Component({
   selector: 'test-date-picker-basic',
   template: `
-    <div DatePicker
-         [mode]="mode"
-         [mask]="mask"
-         [title]="title"
-         [value]="value1"
-         [locale]="locale"
-         class="nzm-button"
-         [minDate]="minDate"
-         [maxDate]="maxDate"
-         (onOk)="onOk1($event)"
-         (onDismiss)="onDismiss()"
-         (onValueChange)="onValueChange($event)"
-    >Datetime</div>
-    <List [className]="'date-picker-list'">
-    <ListItem DatePicker
-              [extra]="name1"
-              [arrow]="'horizontal'"
-              [mode]="'datetime'"
-              [value]="value1"
-              (onOk)="onOk1($event)"
-              (onValueChange)="onValueChange($event)"
+    <div
+      DatePicker
+      [mode]="mode"
+      [mask]="mask"
+      [title]="title"
+      [value]="value1"
+      [locale]="locale"
+      class="nzm-button"
+      [minDate]="minDate"
+      [maxDate]="maxDate"
+      (onOk)="onOk1($event)"
+      (onDismiss)="onDismiss()"
+      (onValueChange)="onValueChange($event)"
     >
       Datetime
-    </ListItem>
-    <ListItem DatePicker
-              [extra]="name2"
-              [arrow]="'horizontal'"
-              [mode]="'date'"
-              [value]="value2"
-              (onOk)="onOk2($event)"
-    >
-      Date
-    </ListItem>
-    <ListItem DatePicker
-              [extra]="name3"
-              [arrow]="'horizontal'"
-              [mode]="'time'"
-              [value]="value3"
-              (onOk)="onOk3($event)"
-    >
-      Time
-    </ListItem>
-    <ListItem DatePicker
-              [extra]="name4"
-              [arrow]="'horizontal'"
-              [mode]="'time'"
-              [locale]="locale"
-              [value]="value4"
-              (onOk)="onOk4($event)"
-    >
-      UTC Time
-    </ListItem>
-  </List>
+    </div>
+    <List [className]="'date-picker-list'">
+      <ListItem
+        DatePicker
+        [extra]="name1"
+        [arrow]="'horizontal'"
+        [mode]="'datetime'"
+        [value]="value1"
+        (onOk)="onOk1($event)"
+        (onValueChange)="onValueChange($event)"
+      >
+        Datetime
+      </ListItem>
+      <ListItem
+        DatePicker
+        [extra]="name2"
+        [arrow]="'horizontal'"
+        [mode]="'date'"
+        [value]="value2"
+        (onOk)="onOk2($event)"
+      >
+        Date
+      </ListItem>
+      <ListItem
+        DatePicker
+        [extra]="name3"
+        [arrow]="'horizontal'"
+        [mode]="'time'"
+        [value]="value3"
+        (onOk)="onOk3($event)"
+      >
+        Time
+      </ListItem>
+      <ListItem
+        DatePicker
+        [extra]="name4"
+        [arrow]="'horizontal'"
+        [mode]="'time'"
+        [locale]="locale"
+        [value]="value4"
+        (onOk)="onOk4($event)"
+      >
+        UTC Time
+      </ListItem>
+      <ListItem
+        DatePicker
+        [extra]="name4"
+        [arrow]="'horizontal'"
+        [mode]="'time'"
+        [locale]="locale"
+        [value]="value4"
+        [isOpen]="true"
+        [appendToBody]="true"
+        [(ngModel)]="value4"
+        (onOk)="onOk4($event)"
+      >
+        UTC Time
+      </ListItem>
+      <ListItem
+        DatePicker
+        [disabled]="true"
+        [extra]="name4"
+        [arrow]="'horizontal'"
+        [mode]="'time'"
+        [locale]="locale"
+        [value]="value4"
+        [isOpen]="false"
+        [(ngModel)]="value4"
+        (onOk)="onOk4($event)"
+      >
+        UTC Time
+      </ListItem>
+    </List>
   `
 })
 export class TestDatePickerBasicComponent {
-
   name1 = '选择';
   name2 = '选择';
   name3 = '选择';
@@ -288,6 +323,7 @@ export class TestDatePickerBasicComponent {
   mode = 'datetime';
   minDate = new Date(1000, 2, 1, 0, 0, 0);
   maxDate = new Date(2031, 1, 1, 0, 0, 0);
+  isOpen = true;
 
   onOk1(result) {
     this.name1 = result;

diff --git a/components/date-picker/date-picker.directive.ts b/components/date-picker/date-picker.directive.ts
@@ -7,7 +7,6 @@ import {
   OnDestroy,
   Directive,
   forwardRef,
-  ElementRef,
   EventEmitter,
   HostListener,
   ComponentRef,
@@ -85,13 +84,12 @@ export class DatePickerDirective implements OnDestroy, OnChanges, OnInit, Contro
 
   constructor(
     private _viewContainerRef: ViewContainerRef,
-    private _elm: ElementRef,
     private _defaultOptions: DatePickerOptions,
     private _cfr: ComponentFactoryResolver
   ) {}
 
   showPicker(): void {
-    if (!this.picker) {
+    if (!this.picker && !this.disabled) {
       setTimeout(() => {
         this._eventListeners = [];
       });

diff --git a/components/date-picker/demo/basic.ts b/components/date-picker/demo/basic.ts
@@ -6,66 +6,83 @@ import { en_US, ru_RU, zh_CN, sv_SE, da_DK } from 'ng-zorro-antd-mobile';
   encapsulation: ViewEncapsulation.None,
   template: `
     <List [className]="'date-picker-list'">
-      <ListItem DatePicker
-                [extra]="currentDateFormat(value1)"
-                [arrow]="'horizontal'"
-                [mode]="'datetime'"
-                [(ngModel)]="value1"
-                (onOk)="onOk1($event)"
+      <ListItem
+        DatePicker
+        [extra]="currentDateFormat(value1)"
+        [arrow]="'horizontal'"
+        [mode]="'datetime'"
+        [(ngModel)]="value1"
+        (onOk)="onOk1($event)"
       >
         Datetime
-        <Brief>{{name1}}</Brief>
+        <Brief>{{ name1 }}</Brief>
       </ListItem>
-      <ListItem DatePicker
-                [extra]="currentDateFormat(value2, 'yyyy-mm-dd')"
-                [arrow]="'horizontal'"
-                [mode]="'date'"
-                [(ngModel)]="value2"
-                (onOk)="onOk2($event)"
+      <ListItem
+        DatePicker
+        [extra]="currentDateFormat(value2, 'yyyy-mm-dd')"
+        [arrow]="'horizontal'"
+        [mode]="'date'"
+        [(ngModel)]="value2"
+        (onOk)="onOk2($event)"
       >
         Date
-        <Brief>{{name2}}</Brief>
+        <Brief>{{ name2 }}</Brief>
       </ListItem>
-      <ListItem DatePicker
-                [extra]="currentDateFormat(value3)"
-                [arrow]="'horizontal'"
-                [mode]="'time'"
-                [(ngModel)]="value3"
-                (onOk)="onOk3($event)"
+      <ListItem
+        DatePicker
+        [extra]="currentDateFormat(value3)"
+        [arrow]="'horizontal'"
+        [mode]="'time'"
+        [(ngModel)]="value3"
+        (onOk)="onOk3($event)"
       >
         Time
-        <Brief>{{name3}}</Brief>
+        <Brief>{{ name3 }}</Brief>
       </ListItem>
-      <ListItem DatePicker
-                [extra]="currentDateFormat(value4)"
-                [arrow]="'horizontal'"
-                [mode]="'time'"
-                [locale]="locale"
-                [(ngModel)]="value4"
-                (onOk)="onOk4($event)"
+      <ListItem
+        DatePicker
+        [extra]="currentDateFormat(value4)"
+        [arrow]="'horizontal'"
+        [mode]="'time'"
+        [locale]="locale"
+        [(ngModel)]="value4"
+        (onOk)="onOk4($event)"
       >
         UTC Time
-        <Brief>{{name4}}</Brief>
+        <Brief>{{ name4 }}</Brief>
       </ListItem>
-      <ListItem DatePicker
-                [extra]="currentDateFormat(value5)"
-                [arrow]="'horizontal'"
-                [mode]="'datetime'"
-                [(ngModel)]="value5"
-                (onOk)="onOk5($event)"
+      <ListItem
+        DatePicker
+        [extra]="currentDateFormat(value5)"
+        [arrow]="'horizontal'"
+        [mode]="'datetime'"
+        [(ngModel)]="value5"
+        (onOk)="onOk5($event)"
       >
         Datetime
-        <Brief>{{name5}}</Brief>
+        <Brief>{{ name5 }}</Brief>
       </ListItem>
-      <ListItem DatePicker
-                [extra]="currentDateFormat(value6)"
-                [arrow]="'horizontal'"
-                [mode]="'datetime'"
-                [(ngModel)]="value6"
-                (onOk)="onOk6($event)"
+      <ListItem
+        DatePicker
+        [extra]="currentDateFormat(value6)"
+        [arrow]="'horizontal'"
+        [mode]="'datetime'"
+        [(ngModel)]="value6"
+        (onOk)="onOk6($event)"
       >
         Datetime
-        <Brief>{{name6}}</Brief>
+        <Brief>{{ name6 }}</Brief>
+      </ListItem>
+      <ListItem
+        DatePicker
+        [disabled]="true"
+        [extra]="currentDateFormat(value6)"
+        [arrow]="'horizontal'"
+        [mode]="'datetime'"
+        (onOk)="onOk6($event)"
+      >
+        Datetime
+        <Brief>{{ name6 }}</Brief>
       </ListItem>
     </List>
   `,