feat(module:time-picker): support input readonly (#7660)

NG-ZORRO · Oct 9, 2022 · 2dcefe2 · 2dcefe2
1 parent 2d2fe33
commit 2dcefe2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 0 deletions.
diff --git a/components/time-picker/doc/index.en-US.md b/components/time-picker/doc/index.en-US.md
@@ -47,6 +47,7 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 | `[nzSize]` | width of time picker box | `'large' \| 'small' \| 'default'` | `'default'` |
 | `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
 | `[nzBorderless]` | remove the border | `boolean` | `false` | - |
+| `[nzInputReadOnly]` | set the readonly attribute of the input tag (avoids virtual keyboard on touch devices) | `boolean` | `false` | - |
 | `[nzOpen]` | whether to popup panel, double binding | `boolean` | `false` |
 | `[nzPlaceHolder]` | display when there's no value | `string` | `"Select a time"` |
 | `[nzPopupClassName]` | className of panel | `string` | `''` | ✅ |

diff --git a/components/time-picker/doc/index.zh-CN.md b/components/time-picker/doc/index.zh-CN.md
@@ -48,6 +48,7 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 | `[nzSize]` | 时间选择框大小 | `'large'\|'small'\|'default'` | `'default'` |
 | `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
 | `[nzBorderless]` | 移除边框 | `boolean` | `false` | - |
+| `[nzInputReadOnly]` | 为 input 标签设置只读属性（避免在移动设备上触发小键盘） | `boolean` | `false` | - |
 | `[nzOpen]` | 面板是否打开，可双向绑定 | `boolean` | `false` |
 | `[nzPlaceHolder]` | 没有值的时候显示的内容 | `string` | `"请选择时间"` |
 | `[nzPopupClassName]` | 弹出层类名 | `string` | `''` | ✅ |

diff --git a/components/time-picker/time-picker.component.spec.ts b/components/time-picker/time-picker.component.spec.ts
@@ -96,6 +96,15 @@ describe('time-picker', () => {
       fixture.detectChanges();
       expect(timeElement.nativeElement.querySelector('input').attributes.getNamedItem('disabled')).toBeNull();
     });
+    it('should readOnly work', () => {
+      testComponent.nzInputReadOnly = true;
+      fixture.detectChanges();
+      expect(getPickerInput(fixture.debugElement).readOnly).toBeTruthy();
+
+      testComponent.nzInputReadOnly = false;
+      fixture.detectChanges();
+      expect(getPickerInput(fixture.debugElement).readOnly).not.toBeTruthy();
+    });
     it('should open and close work', () => {
       testComponent.open = true;
       fixture.detectChanges();
@@ -397,6 +406,7 @@ describe('time-picker', () => {
       [(nzOpen)]="open"
       (nzOpenChange)="openChange($event)"
       [nzDisabled]="disabled"
+      [nzInputReadOnly]="nzInputReadOnly"
       [nzUse12Hours]="use12Hours"
       [nzSuffixIcon]="nzSuffixIcon"
       [nzBackdrop]="nzBackdrop"
@@ -411,6 +421,7 @@ export class NzTestTimePickerComponent {
   autoFocus = false;
   date: Date | string = new Date();
   disabled = false;
+  nzInputReadOnly = false;
   use12Hours = false;
   nzSuffixIcon?: string;
   nzBackdrop = false;

diff --git a/components/time-picker/time-picker.component.ts b/components/time-picker/time-picker.component.ts
@@ -57,6 +57,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'timePicker';
         [placeholder]="nzPlaceHolder || (i18nPlaceHolder$ | async)"
         [(ngModel)]="inputValue"
         [disabled]="nzDisabled"
+        [readOnly]="nzInputReadOnly"
         (focus)="onFocus(true)"
         (blur)="onFocus(false)"
         (keyup.enter)="onKeyupEnter()"
@@ -143,6 +144,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
   static ngAcceptInputType_nzDisabled: BooleanInput;
   static ngAcceptInputType_nzAutoFocus: BooleanInput;
   static ngAcceptInputType_nzBorderless: BooleanInput;
+  static ngAcceptInputType_nzInputReadOnly: BooleanInput;
 
   private _onChange?: (value: Date | null) => void;
   private _onTouched?: () => void;
@@ -222,6 +224,7 @@ export class NzTimePickerComponent implements ControlValueAccessor, OnInit, Afte
   @Input() @InputBoolean() nzAutoFocus = false;
   @Input() @WithConfig() nzBackdrop = false;
   @Input() @InputBoolean() nzBorderless: boolean = false;
+  @Input() @InputBoolean() nzInputReadOnly: boolean = false;
 
   emitValue(value: Date | null): void {
     this.setValue(value, true);