Skip to content

Commit

Permalink
feat(time-picker): support label api
Browse files Browse the repository at this point in the history
  • Loading branch information
liweijie0812 committed May 16, 2024
1 parent 4106752 commit f1f5258
Show file tree
Hide file tree
Showing 7 changed files with 23 additions and 0 deletions.
4 changes: 4 additions & 0 deletions src/time-picker/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ export default {
inputProps: {
type: Object as PropType<TdTimePickerProps['inputProps']>,
},
/** 左侧文本 */
label: {
type: [String, Function] as PropType<TdTimePickerProps['label']>,
},
/** 占位符 */
placeholder: {
type: String,
Expand Down
3 changes: 3 additions & 0 deletions src/time-picker/time-picker.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ disabled | Boolean | - | \- | N
format | String | HH:mm:ss | \- | N
hideDisabledTime | Boolean | true | \- | N
inputProps | Object | - | Typescript:`InputProps`[Input API Documents](./input?tab=api)[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
label | String / Slot / Function | - | Typescript:`string \| TNode`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
placeholder | String | undefined | \- | N
popupProps | Object | - | Typescript:`PopupProps`[Popup API Documents](./popup?tab=api)[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
presets | Object | - | Typescript:`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
Expand Down Expand Up @@ -51,11 +52,13 @@ pick | `(value: TimePickerValue, context: { e: MouseEvent })` | \-
name | type | default | description | required
-- | -- | -- | -- | --
allowInput | Boolean | false | \- | N
borderless | Boolean | false | \- | N
clearable | Boolean | false | \- | N
disableTime | Function | - | Typescript:`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
disabled | Boolean / Array | - | Typescript:`boolean \| Array<boolean>` | N
format | String | HH:mm:ss | \- | N
hideDisabledTime | Boolean | true | \- | N
label | String / Slot / Function | - | Typescript:`string \| TNode`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
placeholder | String / Array | undefined | Typescript:`string \| Array<string>` | N
popupProps | Object | - | Typescript:`PopupProps`[Popup API Documents](./popup?tab=api)[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
presets | Object | - | Typescript:`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
Expand Down
2 changes: 2 additions & 0 deletions src/time-picker/time-picker.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ disabled | Boolean | - | 是否禁用组件 | N
format | String | HH:mm:ss | 用于格式化时间,[详细文档](https://day.js.org/docs/en/display/format) | N
hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N
inputProps | Object | - | 透传给输入框(Input)组件的参数。TS 类型:`InputProps`[Input API Documents](./input?tab=api)[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
placeholder | String | undefined | 占位符 | N
popupProps | Object | - | 透传给 popup 组件的参数。TS 类型:`PopupProps`[Popup API Documents](./popup?tab=api)[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
presets | Object | - | 预设快捷时间选择,示例:`{ '前一小时': '11:00:00' }`。TS 类型:`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
Expand Down Expand Up @@ -56,6 +57,7 @@ disableTime | Function | - | 禁用时间项。TS 类型:`(h: number, m: numbe
disabled | Boolean / Array | - | 是否禁用组件,值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型:`boolean \| Array<boolean>` | N
format | String | HH:mm:ss | 用于格式化时间,[详细文档](https://day.js.org/docs/en/display/format) | N
hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N
label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
placeholder | String / Array | undefined | 占位符,值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型:`string \| Array<string>` | N
popupProps | Object | - | 透传给 popup 组件的参数。TS 类型:`PopupProps`[Popup API Documents](./popup?tab=api)[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
presets | Object | - | 预设快捷时间范围选择,示例:{ '下午': ['13:00:00', '18:00:00'] }。TS 类型:`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
Expand Down
1 change: 1 addition & 0 deletions src/time-picker/time-picker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ export default defineComponent({
clearable={props.clearable}
allowInput={allowInput.value}
class={inputClasses.value}
label={props.label}
suffixIcon={() => <TimeIcon />}
popupVisible={isShowPanel.value}
onInputChange={handleInputChange}
Expand Down
4 changes: 4 additions & 0 deletions src/time-picker/time-range-picker-props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@ export default {
type: Boolean,
default: true,
},
/** 左侧文本 */
label: {
type: [String, Function] as PropType<TdTimeRangePickerProps['label']>,
},
/** 占位符,值为数组表示可分别为开始日期和结束日期设置占位符 */
placeholder: {
type: [String, Array] as PropType<TdTimeRangePickerProps['placeholder']>,
Expand Down
1 change: 1 addition & 0 deletions src/time-picker/time-range-picker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ export default defineComponent({
activeIndex: currentPanelIdx.value,
...props.rangeInputProps,
}}
label={props.label}
status={props.status}
tips={props.tips}
panel={() => (
Expand Down
8 changes: 8 additions & 0 deletions src/time-picker/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@ export interface TdTimePickerProps {
* 透传给输入框(Input)组件的参数
*/
inputProps?: InputProps;
/**
* 左侧文本
*/
label?: string | TNode;
/**
* 占位符
*/
Expand Down Expand Up @@ -172,6 +176,10 @@ export interface TdTimeRangePickerProps {
* @default true
*/
hideDisabledTime?: boolean;
/**
* 左侧文本
*/
label?: string | TNode;
/**
* 占位符,值为数组表示可分别为开始日期和结束日期设置占位符
*/
Expand Down

0 comments on commit f1f5258

Please sign in to comment.