feat: date-picker and time-picker support readonly API

src/date-picker/DatePicker.tsx

@@ -289,6 +289,7 @@ export default defineComponent({
       <div class={COMPONENT_NAME}>
         <TSelectInput
           disabled={isDisabled}
+          readonly={this.readonly}
           value={inputValue}
           inputValue={inputValue}
           label={this.label}
@@ -298,7 +299,7 @@ export default defineComponent({
           inputProps={{ suffixIcon: renderSuffixIcon(), ...datePickerInputProps }}
           popupVisible={popupVisible}
           clearable={this.clearable}
-          allowInput={this.allowInput}
+          allowInput={this.allowInput && !this.readonly}
           panel={() => <TSinglePanel {...{ props: panelProps }} />}
         />
       </div>

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

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

src/date-picker/date-range-picker-props.ts

@@ -25,6 +25,11 @@ export default {
   },
   /** 是否禁用组件 */
   disabled: Boolean,
+  /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 是否显示时间选择 */
   enableTimePicker: Boolean,
   /** 第一天从星期几开始 */

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,

src/date-picker/props.ts

@@ -25,6 +25,11 @@ export default {
   },
   /** 是否禁用组件 */
   disabled: Boolean,
+  /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 是否显示时间选择 */
   enableTimePicker: Boolean,
   /** 第一天从星期几开始 */

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

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),

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,
         }}

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 ? () => <Loading loading size="small" /> : props.suffixIcon,
       showClearIconOnEmpty: Boolean(!props.disabled && props.clearable && (inputValue.value || displayedValue)),

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,

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<string \| number>` | N

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<string \| number>` | N

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,

src/time-picker/time-range-picker-props.ts

@@ -23,6 +23,11 @@ export default {
     type: [Boolean, Array] as PropType<TdTimeRangePickerProps['disabled']>,
     default: undefined,
   },
+  /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) */
   format: {
     type: String,

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,
               },

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<boolean>;
+  /**
+   * 只读状态，值为真会隐藏输入框，且无法打开下拉框
+   */
+  readonly?: boolean;
   /**
    * 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format)
    * @default HH:mm:ss

test/snap/__snapshots__/csr.test.js.snap

@@ -54323,6 +54323,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/layout.vue 1`] = `
         </div>
         <div
           class="t-form__controls"
+          style="margin-left: calc(2em + 24px);"
         >
           <div
             class="t-form__controls-content"
@@ -54360,6 +54361,7 @@ exports[`csr snapshot test > csr test ./src/form/_example/layout.vue 1`] = `
         </div>
         <div
           class="t-form__controls"
+          style="margin-left: calc(2em + 24px);"
         >
           <div
             class="t-form__controls-content"