diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
index a3b6da517..69c6f9324 100644
--- a/src/date-picker/DatePicker.tsx
+++ b/src/date-picker/DatePicker.tsx
@@ -289,6 +289,7 @@ export default defineComponent({
}
/>
diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md
index a04cb7b39..21a45eb56 100644
--- a/src/date-picker/date-picker.en-US.md
+++ b/src/date-picker/date-picker.en-US.md
@@ -23,6 +23,7 @@ popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./po
prefixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
presets | Object | - | Typescript:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
presetsPlacement | String | bottom | options: left/top/right/bottom | N
+readonly | Boolean | false | \- | N
size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
status | String | default | options: default/success/warning/error | N
suffixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md
index c2a07f3be..54c693dd3 100644
--- a/src/date-picker/date-picker.md
+++ b/src/date-picker/date-picker.md
@@ -23,6 +23,7 @@ popupProps | Object | - | 透传给 popup 组件的参数。TS 类型:`PopupPr
prefixIcon | Slot / Function | - | 用于自定义组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
presets | Object | - | 预设快捷日期选择,示例:`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型:`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
presetsPlacement | String | bottom | 预设面板展示区域(包含确定按钮)。可选项:left/top/right/bottom | N
+readonly | Boolean | false | 只读状态,值为真会隐藏输入框,且无法打开下拉框 | N
size | String | medium | 输入框尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
status | String | default | 输入框状态。可选项:default/success/warning/error | N
suffixIcon | Slot / Function | - | 用于自定义组件后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
diff --git a/src/date-picker/date-range-picker-props.ts b/src/date-picker/date-range-picker-props.ts
index 6a53709b2..619792390 100644
--- a/src/date-picker/date-range-picker-props.ts
+++ b/src/date-picker/date-range-picker-props.ts
@@ -25,6 +25,11 @@ export default {
},
/** 是否禁用组件 */
disabled: Boolean,
+ /** 只读状态,值为真会隐藏输入框,且无法打开下拉框 */
+ readonly: {
+ type: Boolean,
+ default: undefined,
+ },
/** 是否显示时间选择 */
enableTimePicker: Boolean,
/** 第一天从星期几开始 */
diff --git a/src/date-picker/hooks/useRange.ts b/src/date-picker/hooks/useRange.ts
index 8ba92b08f..a36a485f4 100644
--- a/src/date-picker/hooks/useRange.ts
+++ b/src/date-picker/hooks/useRange.ts
@@ -40,7 +40,7 @@ export default function useRange(props: TdDateRangePickerProps, { emit }: any) {
size: props.size,
clearable: props.clearable,
prefixIcon: props.prefixIcon,
- readonly: !props.allowInput,
+ readonly: !props.allowInput || props.readonly,
separator: props.separator || global.value.rangeSeparator,
placeholder: props.placeholder || global.value.placeholder[props.mode],
activeIndex: popupVisible.value ? activeIndex.value : undefined,
diff --git a/src/date-picker/props.ts b/src/date-picker/props.ts
index a96d8a8bc..b9ba422ae 100644
--- a/src/date-picker/props.ts
+++ b/src/date-picker/props.ts
@@ -25,6 +25,11 @@ export default {
},
/** 是否禁用组件 */
disabled: Boolean,
+ /** 只读状态,值为真会隐藏输入框,且无法打开下拉框 */
+ readonly: {
+ type: Boolean,
+ default: undefined,
+ },
/** 是否显示时间选择 */
enableTimePicker: Boolean,
/** 第一天从星期几开始 */
diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts
index ca27c784d..08d8b1373 100644
--- a/src/date-picker/type.ts
+++ b/src/date-picker/type.ts
@@ -40,6 +40,10 @@ export interface TdDatePickerProps {
* 是否禁用组件
*/
disabled?: boolean;
+ /**
+ * 是否只读
+ */
+ readonly?: Boolean;
/**
* 是否显示时间选择
* @default false
@@ -179,6 +183,10 @@ export interface TdDateRangePickerProps {
* 是否禁用组件
*/
disabled?: boolean;
+ /**
+ * 是否只读
+ */
+ readonly?: Boolean;
/**
* 是否显示时间选择
* @default false
diff --git a/src/range-input/range-input-popup.tsx b/src/range-input/range-input-popup.tsx
index aca02bb34..544bc0f42 100644
--- a/src/range-input/range-input-popup.tsx
+++ b/src/range-input/range-input-popup.tsx
@@ -45,7 +45,7 @@ export default defineComponent({
visible={this.popupVisible || innerPopupVisible}
{...{
props: {
- disabled: this.disabled,
+ disabled: this.disabled || this.readonly,
overlayInnerStyle: tOverlayInnerStyle,
onVisibleChange: onInnerPopupVisibleChange,
...(this.popupProps as Object),
diff --git a/src/select-input/select-input.tsx b/src/select-input/select-input.tsx
index 6fec2f412..d43439858 100644
--- a/src/select-input/select-input.tsx
+++ b/src/select-input/select-input.tsx
@@ -124,7 +124,7 @@ export default defineComponent({
scopedSlots={{ ...this.$scopedSlots, content: this.$scopedSlots.panel }}
hideEmptyPopup={true}
key={this.multiple ? 'multiple' : 'single'}
- disabled={this.disabled}
+ disabled={this.disabled || this.readonly}
on={{
'visible-change': this.onInnerPopupVisibleChange,
}}
diff --git a/src/select-input/useSingle.tsx b/src/select-input/useSingle.tsx
index d8f924562..a8a2f5968 100644
--- a/src/select-input/useSingle.tsx
+++ b/src/select-input/useSingle.tsx
@@ -105,7 +105,7 @@ export default function useSingle(props: TdSelectInputProps, context: SetupConte
label: () => prefixContent,
autoWidth: props.autoWidth,
autofocus: props.autofocus,
- readonly: !props.allowInput,
+ readonly: !props.allowInput || props.readonly,
placeholder: singleValueDisplay ? '' : props.placeholder,
suffixIcon: !props.disabled && props.loading ? () => : props.suffixIcon,
showClearIconOnEmpty: Boolean(!props.disabled && props.clearable && (inputValue.value || displayedValue)),
diff --git a/src/time-picker/props.ts b/src/time-picker/props.ts
index c3d459c8b..69b7f3769 100644
--- a/src/time-picker/props.ts
+++ b/src/time-picker/props.ts
@@ -23,6 +23,11 @@ export default {
type: Boolean,
default: undefined,
},
+ /** 只读状态,值为真会隐藏输入框,且无法打开下拉框 */
+ readonly: {
+ type: Boolean,
+ default: undefined,
+ },
/** 用于格式化时间,[详细文档](https://day.js.org/docs/en/display/format) */
format: {
type: String,
diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md
index 3c9145352..0591185e9 100644
--- a/src/time-picker/time-picker.en-US.md
+++ b/src/time-picker/time-picker.en-US.md
@@ -17,6 +17,7 @@ inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./in
placeholder | String | undefined | \- | N
popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/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/tree/develop/src/time-picker/type.ts) | N
+readonly | Boolean | false | \- | N
size | String | medium | options: small/medium/large | N
status | String | default | options: default/success/warning/error | N
steps | Array | [1, 1, 1] | Typescript:`Array` | N
diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md
index 592d08ed2..600daccc1 100644
--- a/src/time-picker/time-picker.md
+++ b/src/time-picker/time-picker.md
@@ -17,6 +17,7 @@ inputProps | Object | - | 透传给输入框(Input)组件的参数。TS 类
placeholder | String | undefined | 占位符 | N
popupProps | Object | - | 透传给 popup 组件的参数。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/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/tree/develop/src/time-picker/type.ts) | N
+readonly | Boolean | false | 只读状态,值为真会隐藏输入框,且无法打开下拉框 | N
size | String | medium | 尺寸。可选项:small/medium/large | N
status | String | default | 输入框状态。可选项:default/success/warning/error | N
steps | Array | [1, 1, 1] | 时间间隔步数,数组排列 [小时, 分钟, 秒],示例:[2, 1, 1] 或者 ['2', '1', '1']。TS 类型:`Array` | N
diff --git a/src/time-picker/time-picker.tsx b/src/time-picker/time-picker.tsx
index 025c0705a..52b71e6d5 100755
--- a/src/time-picker/time-picker.tsx
+++ b/src/time-picker/time-picker.tsx
@@ -135,6 +135,7 @@ export default defineComponent({
onInputChange: this.handleInputChange,
borderless: this.borderless,
disabled: this.isDisabled,
+ readonly: this.readonly,
clearable: this.clearable,
allowInput: this.allowInput,
class: this.inputClasses,
diff --git a/src/time-picker/time-range-picker-props.ts b/src/time-picker/time-range-picker-props.ts
index 7f17043f6..939beaaf6 100644
--- a/src/time-picker/time-range-picker-props.ts
+++ b/src/time-picker/time-range-picker-props.ts
@@ -23,6 +23,11 @@ export default {
type: [Boolean, Array] as PropType,
default: undefined,
},
+ /** 只读状态,值为真会隐藏输入框,且无法打开下拉框 */
+ readonly: {
+ type: Boolean,
+ default: undefined,
+ },
/** 用于格式化时间,[详细文档](https://day.js.org/docs/en/display/format) */
format: {
type: String,
diff --git a/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx
index a9083889e..a85c14bee 100644
--- a/src/time-picker/time-range-picker.tsx
+++ b/src/time-picker/time-range-picker.tsx
@@ -167,6 +167,7 @@ export default defineComponent({
props: {
onInputChange: this.handleInputChange,
disabled: this.isDisabled,
+ readonly: this.readonly,
popupVisible: this.isShowPanel,
inputValue: this.isShowPanel ? this.currentValue : this.innerValue ?? TIME_PICKER_EMPTY,
popupProps: {
@@ -191,7 +192,7 @@ export default defineComponent({
onClick: this.handleClick,
onFocus: this.handleFocus,
onBlur: this.handleInputBlur,
- readonly: !this.allowInput,
+ readonly: this.readonly || !this.allowInput,
activeIndex: this.currentPanelIdx,
...this.rangeInputProps,
},
diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts
index 0ff7ae6c3..3417b0773 100644
--- a/src/time-picker/type.ts
+++ b/src/time-picker/type.ts
@@ -39,6 +39,10 @@ export interface TdTimePickerProps {
* 是否禁用组件
*/
disabled?: boolean;
+ /**
+ * 只读状态,值为真会隐藏输入框,且无法打开下拉框
+ */
+ readonly?: boolean;
/**
* 用于格式化时间,[详细文档](https://day.js.org/docs/en/display/format)
* @default HH:mm:ss
@@ -153,6 +157,10 @@ export interface TdTimeRangePickerProps {
* 是否禁用组件,值为数组表示可分别控制开始日期和结束日期是否禁用
*/
disabled?: boolean | Array;
+ /**
+ * 只读状态,值为真会隐藏输入框,且无法打开下拉框
+ */
+ readonly?: boolean;
/**
* 用于格式化时间,[详细文档](https://day.js.org/docs/en/display/format)
* @default HH:mm:ss
diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
index b35c8618e..cf347da7b 100644
--- a/test/snap/__snapshots__/csr.test.js.snap
+++ b/test/snap/__snapshots__/csr.test.js.snap
@@ -54323,6 +54323,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/layout.vue 1`] = `