feat(module:datapicker): add [nzInputReadOnly] (NG-ZORRO#4534) (NG-ZO…

…RRO#5488) close NG-ZORRO#4534
vthinkxie · Jul 9, 2020 · 13875cb · 13875cb
1 parent 352e5e7
commit 13875cb
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 0 deletions.
diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts
@@ -198,6 +198,16 @@ describe('NzDatePickerComponent', () => {
       expect(debugElement.query(By.css('.ant-picker-clear'))).not.toBeNull();
     }));
 
+    it('should support nzInputReadOnly', fakeAsync(() => {
+      fixtureInstance.nzInputReadOnly = true;
+      fixture.detectChanges();
+      expect(getPickerInput(fixture.debugElement).readOnly).toBeTruthy();
+
+      fixtureInstance.nzInputReadOnly = false;
+      fixture.detectChanges();
+      expect(getPickerInput(fixture.debugElement).readOnly).not.toBeTruthy();
+    }));
+
     it('should support nzOpen if assigned', fakeAsync(() => {
       fixtureInstance.useSuite = 2;
 
@@ -961,6 +971,7 @@ describe('date-fns testing', () => {
         [nzAllowClear]="nzAllowClear"
         [nzAutoFocus]="nzAutoFocus"
         [nzDisabled]="nzDisabled"
+        [nzInputReadOnly]="nzInputReadOnly"
         [nzClassName]="nzClassName"
         [nzDisabledDate]="nzDisabledDate"
         [nzFormat]="nzFormat"
@@ -1013,6 +1024,7 @@ class NzTestDatePickerComponent {
   nzAllowClear: boolean = false;
   nzAutoFocus: boolean = false;
   nzDisabled: boolean = false;
+  nzInputReadOnly: boolean = false;
   nzClassName!: string;
   nzFormat!: string;
   nzDisabledDate!: (d: Date) => boolean;

diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
@@ -56,6 +56,7 @@ const NZ_CONFIG_COMPONENT_NAME = 'datePicker';
       [open]="nzOpen"
       [separator]="nzSeparator"
       [disabled]="nzDisabled"
+      [inputReadOnly]="nzInputReadOnly"
       [format]="nzFormat"
       [allowClear]="nzAllowClear"
       [autoFocus]="nzAutoFocus"
@@ -113,6 +114,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
   static ngAcceptInputType_nzAllowClear: BooleanInput;
   static ngAcceptInputType_nzAutoFocus: BooleanInput;
   static ngAcceptInputType_nzDisabled: BooleanInput;
+  static ngAcceptInputType_nzInputReadOnly: BooleanInput;
   static ngAcceptInputType_nzOpen: BooleanInput;
   static ngAcceptInputType_nzShowToday: BooleanInput;
   static ngAcceptInputType_nzMode: NzDateMode | NzDateMode[] | string | string[] | null | undefined;
@@ -131,6 +133,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Cont
   @Input() @InputBoolean() nzAllowClear: boolean = true;
   @Input() @InputBoolean() nzAutoFocus: boolean = false;
   @Input() @InputBoolean() nzDisabled: boolean = false;
+  @Input() @InputBoolean() nzInputReadOnly: boolean = false;
   @Input() @InputBoolean() nzOpen?: boolean;
   /**
    * @deprecated 10.0.0. This is deprecated and going to be removed in 10.0.0.

diff --git a/components/date-picker/doc/index.en-US.md b/components/date-picker/doc/index.en-US.md
@@ -45,6 +45,7 @@ The following APIs are shared by nz-date-picker, nz-month-picker, nz-range-picke
 | `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` | - |
 | `[nzDateRender]` | custom rendering function for date cells (Not support by month-picker/year-picker) | - |`TemplateRef<Date> \| string \| ((d: Date) => TemplateRef<Date> \| string)` | - | - |
 | `[nzDisabled]` | determine whether the nz-date-picker is disabled | `boolean` | `false` | - |
+| `[nzInputReadOnly]` | set the readonly attribute of the input tag (avoids virtual keyboard on touch devices) | `boolean` | `false` | - |
 | `[nzDisabledDate]` | specify the date that cannot be selected | `(current: Date) => boolean` | - | - |
 | `[nzLocale]` | localization configuration | `object` | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | - |
 | `[nzOpen]` | open state of picker | `boolean` | - | - |

diff --git a/components/date-picker/doc/index.zh-CN.md b/components/date-picker/doc/index.zh-CN.md
@@ -45,6 +45,7 @@ registerLocaleData(zh);
 | `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` | - |
 | `[nzDateRender]` | 自定义日期单元格的内容（month-picker/year-picker不支持） | `TemplateRef<Date> \| string \| ((d: Date) => TemplateRef<Date> \| string)` | - | - |
 | `[nzDisabled]` | 禁用 | `boolean` | `false` | - |
+| `[nzInputReadOnly]` | 为 input 标签设置只读属性（避免在移动设备上触发小键盘） | `boolean` | `false` | - |
 | `[nzDisabledDate]` | 不可选择的日期 | `(current: Date) => boolean` | - | - |
 | `[nzLocale]` | 国际化配置 | `object` | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | - |
 | `[nzOpen]` | 控制弹层是否展开 | `boolean` | - | - |

diff --git a/components/date-picker/picker.component.ts b/components/date-picker/picker.component.ts
@@ -56,6 +56,7 @@ import { PREFIX_CLASS } from './util';
         #pickerInput
         [class.ant-input-disabled]="disabled"
         [disabled]="disabled"
+        [readOnly]="inputReadOnly"
         [(ngModel)]="inputValue"
         placeholder="{{ getPlaceholder() }}"
         [size]="inputSize"
@@ -90,6 +91,7 @@ import { PREFIX_CLASS } from './util';
       <input
         #rangePickerInput
         [disabled]="disabled"
+        [readOnly]="inputReadOnly"
         [size]="inputSize"
         (click)="onClickInputBox($event, partType)"
         (blur)="onBlur()"
@@ -158,6 +160,7 @@ export class NzPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDe
   @Input() isRange: boolean = false;
   @Input() open: boolean | undefined = undefined;
   @Input() disabled: boolean = false;
+  @Input() inputReadOnly: boolean = false;
   @Input() placeholder!: string | string[];
   @Input() allowClear?: boolean;
   @Input() autoFocus?: boolean;