Skip to content

Commit

Permalink
feat(module:time-picker): support standalone component (#8211)
Browse files Browse the repository at this point in the history
* feat(module:time-picker): support standalone component

* feat(module:time-picker): support standalone component

* feat(module:time-picker): support standalone component

* feat(module:time-picker): support standalone component

* feat(module:time-picker): support standalone component
  • Loading branch information
ParsaArvanehPA authored Dec 7, 2023
1 parent 64ec76a commit 641ebb2
Show file tree
Hide file tree
Showing 7 changed files with 141 additions and 124 deletions.
75 changes: 37 additions & 38 deletions components/time-picker/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,45 +21,44 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
<nz-time-picker [(ngModel)]="someTime"></nz-time-picker>
```

### nz-time-picker

| Property | Description | Type | Default | Global Config |
| -------- | ----------- | ---- | ------- | ------------- |
| `[nzId]` | input id attribute inside the component| `string` | - |
| `[ngModel]` | to set time | `Date` | - |
| `[nzAddOn]` | called from timepicker panel to render some addon to its bottom | `TemplateRef<void>` | - |
| `[nzAllowEmpty]` | allow clearing text | `boolean` | `true` ||
| `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` |
| `[nzBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` |
| `[nzClearText]` | clear tooltip of icon | `string` | `'clear'` ||
| `[nzNowText]` | text of the Now button | `string` | `'Now'` ||
| `[nzOkText]` | text of the Ok button | `string` | `'Ok'` ||
| `[nzDefaultOpenValue]` | default open panel value if `[ngModel]` is null | `Date` | `new Date()` |
| `[nzDisabled]` | determine whether the TimePicker is disabled | `boolean` | `false` |
| `[nzDisabledHours]` | to specify the hours that cannot be selected | `() => number[]` | - |
| `[nzDisabledMinutes]` | to specify the minutes that cannot be selected | `(hour: number) => number[]` | - |
| `[nzDisabledSeconds]` | to specify the seconds that cannot be selected | `(hour: number, minute: number) => number[]` | - |
| `[nzFormat]` | to set the time format | [DatePipe](https://angular.io/api/common/DatePipe) | `"HH:mm:ss"` ||
| `[nzHideDisabledOptions]` | hide the options that can not be selected | `boolean` | `false` |
| `[nzHourStep]` | interval between hours in picker | `number` | `1` ||
| `[nzMinuteStep]` | interval between minutes in picker | `number` | `1` ||
| `[nzSecondStep]` | interval between seconds in picker | `number` | `1` ||
| `[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` | `''` ||
| `[nzUse12Hours]` | display as 12 hours format, with default format `h:mm:ss a` | `boolean` | `false` ||
| `[nzSuffixIcon]` | the custom suffix icon | `string` \| `TemplateRef` | - ||
| `(ngModelChange)` | a callback function, can be executed when the selected time is changing | `EventEmitter<Date>` | - |
| `(nzOpenChange)` | a callback function which will be called while panel opening/closing | `EventEmitter<boolean>` | - |
### nz-time-picker:standalone

| Property | Description | Type | Default | Global Config |
| ------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------- | ----------------- | ------------- |
| `[nzId]` | input id attribute inside the component | `string` | - |
| `[ngModel]` | to set time | `Date` | - |
| `[nzAddOn]` | called from timepicker panel to render some addon to its bottom | `TemplateRef<void>` | - |
| `[nzAllowEmpty]` | allow clearing text | `boolean` | `true` ||
| `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` |
| `[nzBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` |
| `[nzClearText]` | clear tooltip of icon | `string` | `'clear'` ||
| `[nzNowText]` | text of the Now button | `string` | `'Now'` ||
| `[nzOkText]` | text of the Ok button | `string` | `'Ok'` ||
| `[nzDefaultOpenValue]` | default open panel value if `[ngModel]` is null | `Date` | `new Date()` |
| `[nzDisabled]` | determine whether the TimePicker is disabled | `boolean` | `false` |
| `[nzDisabledHours]` | to specify the hours that cannot be selected | `() => number[]` | - |
| `[nzDisabledMinutes]` | to specify the minutes that cannot be selected | `(hour: number) => number[]` | - |
| `[nzDisabledSeconds]` | to specify the seconds that cannot be selected | `(hour: number, minute: number) => number[]` | - |
| `[nzFormat]` | to set the time format | [DatePipe](https://angular.io/api/common/DatePipe) | `"HH:mm:ss"` ||
| `[nzHideDisabledOptions]` | hide the options that can not be selected | `boolean` | `false` |
| `[nzHourStep]` | interval between hours in picker | `number` | `1` ||
| `[nzMinuteStep]` | interval between minutes in picker | `number` | `1` ||
| `[nzSecondStep]` | interval between seconds in picker | `number` | `1` ||
| `[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` | `''` ||
| `[nzUse12Hours]` | display as 12 hours format, with default format `h:mm:ss a` | `boolean` | `false` ||
| `[nzSuffixIcon]` | the custom suffix icon | `string` \| `TemplateRef` | - ||
| `(ngModelChange)` | a callback function, can be executed when the selected time is changing | `EventEmitter<Date>` | - |
| `(nzOpenChange)` | a callback function which will be called while panel opening/closing | `EventEmitter<boolean>` | - |

#### Methods

| Name | Description |
| ---- | ----------- |
| blur() | remove focus |
| focus() | get focus |
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |
73 changes: 36 additions & 37 deletions components/time-picker/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,45 +22,44 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
<nz-time-picker [(ngModel)]="someTime"></nz-time-picker>
```

### nz-time-picker
### nz-time-picker:standalone

| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
| --- | --- | --- | --- | --- |
| `[nzId]` | 组件内部 input 的 id 值 | `string` | - |
| `[ngModel]` | 当前时间 | `Date` | - |
| `[nzAddOn]` | 选择框底部显示自定义的内容 | `TemplateRef<void>` | - |
| `[nzAllowEmpty]` | 是否展示清除按钮 | `boolean` | `true` ||
| `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` |
| `[nzBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` |
| `[nzClearText]` | 清除按钮的提示文案 | `string` | `'clear'` ||
| `[nzNowText]` | 此刻按钮文本 | `string` | `"此刻"` ||
| `[nzOkText]` | 确认按钮文本 | `string` | `"确定"` ||
| `[nzDefaultOpenValue]` |`[ngModel]` 不存在时,可以设置面板打开时默认选中的值 | `Date` | `new Date()` |
| `[nzDisabled]` | 禁用全部操作 | `boolean` | `false` |
| `[nzDisabledHours]` | 禁止选择部分小时选项 | `() => number[]` | - |
| `[nzDisabledMinutes]` | 禁止选择部分分钟选项 | `(hour: number) => number[]` | - |
| `[nzDisabledSeconds]` | 禁止选择部分秒选项 | `(hour: number, minute: number) => number[]` | - |
| `[nzFormat]` | 展示的时间格式 | [DatePipe](https://angular.io/api/common/DatePipe) | `"HH:mm:ss"` ||
| `[nzHideDisabledOptions]` | 隐藏禁止选择的选项 | `boolean` | `false` |
| `[nzHourStep]` | 小时选项间隔 | `number` | `1` ||
| `[nzMinuteStep]` | 分钟选项间隔 | `number` | `1` ||
| `[nzSecondStep]` | 秒选项间隔 | `number` | `1` ||
| `[nzSize]` | 时间选择框大小 | `'large'\|'small'\|'default'` | `'default'` |
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
| `[nzBorderless]` | 移除边框 | `boolean` | `false` | - |
| `[nzInputReadOnly]` | 为 input 标签设置只读属性(避免在移动设备上触发小键盘) | `boolean` | `false` | - |
| `[nzOpen]` | 面板是否打开,可双向绑定 | `boolean` | `false` |
| `[nzPlaceHolder]` | 没有值的时候显示的内容 | `string` | `"请选择时间"` |
| `[nzPopupClassName]` | 弹出层类名 | `string` | `''` ||
| `[nzUse12Hours]` | 使用12小时制,为true时format默认为`h:mm:ss a` | `boolean` | `false` ||
| `[nzSuffixIcon]` | 自定义的后缀图标 | `string` \| `TemplateRef` | - ||
| `(ngModelChange)` | 时间发生变化的回调 | `EventEmitter<Date>` | - |
| `(nzOpenChange)` | 面板打开/关闭时的回调 | `EventEmitter<boolean>` | - |
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
| ------------------------- | ------------------------------------------------------- | -------------------------------------------------- | -------------- | -------- |
| `[nzId]` | 组件内部 input 的 id 值 | `string` | - |
| `[ngModel]` | 当前时间 | `Date` | - |
| `[nzAddOn]` | 选择框底部显示自定义的内容 | `TemplateRef<void>` | - |
| `[nzAllowEmpty]` | 是否展示清除按钮 | `boolean` | `true` | |
| `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` |
| `[nzBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` |
| `[nzClearText]` | 清除按钮的提示文案 | `string` | `'clear'` | |
| `[nzNowText]` | 此刻按钮文本 | `string` | `"此刻"` | |
| `[nzOkText]` | 确认按钮文本 | `string` | `"确定"` | |
| `[nzDefaultOpenValue]` |`[ngModel]` 不存在时,可以设置面板打开时默认选中的值 | `Date` | `new Date()` |
| `[nzDisabled]` | 禁用全部操作 | `boolean` | `false` |
| `[nzDisabledHours]` | 禁止选择部分小时选项 | `() => number[]` | - |
| `[nzDisabledMinutes]` | 禁止选择部分分钟选项 | `(hour: number) => number[]` | - |
| `[nzDisabledSeconds]` | 禁止选择部分秒选项 | `(hour: number, minute: number) => number[]` | - |
| `[nzFormat]` | 展示的时间格式 | [DatePipe](https://angular.io/api/common/DatePipe) | `"HH:mm:ss"` | |
| `[nzHideDisabledOptions]` | 隐藏禁止选择的选项 | `boolean` | `false` |
| `[nzHourStep]` | 小时选项间隔 | `number` | `1` | |
| `[nzMinuteStep]` | 分钟选项间隔 | `number` | `1` | |
| `[nzSecondStep]` | 秒选项间隔 | `number` | `1` | |
| `[nzSize]` | 时间选择框大小 | `'large'\|'small'\|'default'` | `'default'` |
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
| `[nzBorderless]` | 移除边框 | `boolean` | `false` | - |
| `[nzInputReadOnly]` | 为 input 标签设置只读属性(避免在移动设备上触发小键盘) | `boolean` | `false` | - |
| `[nzOpen]` | 面板是否打开,可双向绑定 | `boolean` | `false` |
| `[nzPlaceHolder]` | 没有值的时候显示的内容 | `string` | `"请选择时间"` |
| `[nzPopupClassName]` | 弹出层类名 | `string` | `''` | |
| `[nzUse12Hours]` | 使用 12 小时制,为 true 时 format 默认为`h:mm:ss a` | `boolean` | `false` | |
| `[nzSuffixIcon]` | 自定义的后缀图标 | `string` \| `TemplateRef` | - | |
| `(ngModelChange)` | 时间发生变化的回调 | `EventEmitter<Date>` | - |
| `(nzOpenChange)` | 面板打开/关闭时的回调 | `EventEmitter<boolean>` | - |

#### 方法

| 名称 | 描述 |
| --- | --- |
| blur() | 移除焦点 |
| 名称 | 描述 |
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |

Loading

0 comments on commit 641ebb2

Please sign in to comment.