From 13875cb979f59e1f3dc9cf935b82918e82dd49df Mon Sep 17 00:00:00 2001 From: Qiu RenBo Date: Thu, 9 Jul 2020 11:40:54 +0800 Subject: [PATCH] feat(module:datapicker): add [nzInputReadOnly] (#4534) (#5488) close #4534 --- components/date-picker/date-picker.component.spec.ts | 12 ++++++++++++ components/date-picker/date-picker.component.ts | 3 +++ components/date-picker/doc/index.en-US.md | 1 + components/date-picker/doc/index.zh-CN.md | 1 + components/date-picker/picker.component.ts | 3 +++ 5 files changed, 20 insertions(+) diff --git a/components/date-picker/date-picker.component.spec.ts b/components/date-picker/date-picker.component.spec.ts index ff874a4aa35..21a7ecc8395 100644 --- 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 index 0f925ab83a9..f3eaceb8240 100644 --- 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 index c5ef34a568a..1e8ea5df878 100644 --- 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 \| string \| ((d: Date) => TemplateRef \| 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 index 64c66b60c33..6022bac42c6 100644 --- 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 \| string \| ((d: Date) => TemplateRef \| 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 index 9024d733a99..7690f4cfd45 100644 --- 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';