feat(datePicker): support readonly

src/date-picker/DatePicker.tsx

@@ -292,7 +292,7 @@ export default defineComponent({
           popupProps={popupProps.value}
           inputProps={inputProps.value}
           placeholder={props.placeholder || globalConfig.value.placeholder[props.mode]}
-          popupVisible={popupVisible.value}
+          popupVisible={!props.readonly && popupVisible.value}
           valueDisplay={() => renderTNodeJSX('valueDisplay', { params: valueDisplayParams.value })}
           needConfirm={props.needConfirm}
           {...(props.selectInputProps as TdDatePickerProps['selectInputProps'])}

src/date-picker/DateRangePicker.tsx

@@ -411,6 +411,7 @@ export default defineComponent({
     return () => (
       <div class={COMPONENT_NAME.value}>
         <TRangeInputPopup
+          readonly={props.readonly}
           disabled={disabled.value}
           label={props.label}
           status={props.status}

src/date-picker/__tests__/__snapshots__/index.test.jsx.snap

@@ -201,4 +201,4 @@ exports[`DatePicker > :value 1`] = `
     <!---->
   </div>
 </div>
-`;
+`;

src/date-picker/_usage/date-picker-props.json

@@ -17,6 +17,7 @@
     "defaultValue": false,
     "options": []
   },
+
   {
     "name": "disabled",
     "type": "Boolean",
@@ -29,6 +30,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "readonly",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "mode",
     "type": "enum",

src/date-picker/_usage/date-range-picker-props.json

@@ -29,6 +29,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "readonly",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "mode",
     "type": "enum",

src/date-picker/date-picker.en-US.md

@@ -77,6 +77,7 @@ prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definitio
 presets | Object | - | Typescript：`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
 presetsPlacement | String | bottom | options: left/top/right/bottom | N
 rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
+readonly | Boolean | undefined | Whether it is read only, the priority is greater than `allowInput` | N
 separator | String | - | \- | N
 size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 status | String | default | options: default/success/warning/error | N

src/date-picker/date-picker.md

@@ -77,6 +77,7 @@ prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[
 presets | Object | - | 预设快捷日期选择，示例：{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }。TS 类型：`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
 presetsPlacement | String | bottom | 预设面板展示区域（包含确定按钮）。可选项：left/top/right/bottom | N
 rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
+readonly | Boolean | undefined | 是否只读，优先级大于 `allowInput` | N
 separator | String | - | 日期分隔符，支持全局配置，默认为 '-' | N
 size | String | medium | 输入框尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 status | String | default | 输入框状态。可选项：default/success/warning/error | N

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

@@ -97,6 +97,11 @@ export default {
   rangeInputProps: {
     type: Object as PropType<TdDateRangePickerProps['rangeInputProps']>,
   },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 日期分隔符，支持全局配置，默认为 '-' */
   separator: {
     type: String,

src/date-picker/hooks/useRange.tsx

@@ -5,6 +5,7 @@ import omit from 'lodash/omit';
 import { useTNodeJSX } from '../../hooks/tnode';
 import { useGlobalIcon } from '../../hooks/useGlobalIcon';
 import { usePrefixClass, useConfig } from '../../hooks/useConfig';
+import { useReadonly } from '../../../src/hooks/useReadonly';
 
 import { TdDateRangePickerProps, DateValue } from '../type';
 import { isValidDate, formatDate, getDefaultFormat, parseToDayjs } from '../../_common/js/date-picker/format';
@@ -36,6 +37,7 @@ export default function useRange(props: TdDateRangePickerProps) {
   const isHoverCell = ref(false);
   const activeIndex = ref(0); // 确定当前选中的输入框序号
   const inputValue = ref(formatDate(props.value, { format: formatRef.value.format })); // 未真正选中前可能不断变更输入框的内容
+  const isReadOnly = useReadonly();
 
   // input 设置
   const rangeInputProps = computed(() => ({
@@ -45,7 +47,7 @@ export default function useRange(props: TdDateRangePickerProps) {
     borderless: props.borderless,
     clearable: props.clearable,
     prefixIcon: () => renderTNodeJSX('prefixIcon'),
-    readonly: !props.allowInput,
+    readonly: props.readonly || !props.allowInput,
     separator: props.separator || globalConfig.value.rangeSeparator,
     placeholder: props.placeholder || globalConfig.value.placeholder[props.mode],
     activeIndex: popupVisible.value ? activeIndex.value : undefined,
@@ -122,6 +124,8 @@ export default function useRange(props: TdDateRangePickerProps) {
     overlayInnerStyle: props.popupProps?.overlayInnerStyle ?? { width: 'auto' },
     overlayClassName: [props.popupProps?.overlayClassName, `${COMPONENT_NAME.value}__panel-container`],
     onVisibleChange: (visible: boolean, context: any) => {
+      if (isReadOnly.value) return;
+
       // 这里劫持了进一步向 popup 传递的 onVisibleChange 事件，为了保证可以在 Datepicker 中使用 popupProps.onVisibleChange，故此处理
       props.popupProps?.onVisibleChange?.(visible, context);
       props.popupProps?.['on-visible-change']?.(visible, context);

src/date-picker/hooks/useSingle.tsx

@@ -47,7 +47,7 @@ export default function useSingle(props: TdDatePickerProps) {
     size: props.size,
     ref: inputRef,
     prefixIcon: () => renderTNodeJSX('prefixIcon'),
-    readonly: !props.allowInput,
+    readonly: props.readonly || !props.allowInput,
     suffixIcon: () => {
       return renderTNodeJSX('suffixIcon') || <CalendarIcon />;
     },

src/date-picker/props.ts

@@ -91,6 +91,11 @@ export default {
       return ['left', 'top', 'right', 'bottom'].includes(val);
     },
   },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 透传 SelectInput 筛选器输入框组件的全部属性 */
   selectInputProps: {
     type: Object as PropType<TdDatePickerProps['selectInputProps']>,

src/date-picker/type.ts

@@ -93,6 +93,11 @@ export interface TdDatePickerProps {
    * @default bottom
    */
   presetsPlacement?: 'left' | 'top' | 'right' | 'bottom';
+  /**
+   * 只读状态
+   * @default undefined
+   */
+  readonly?: boolean;
   /**
    * 透传 SelectInput 筛选器输入框组件的全部属性
    */
@@ -257,6 +262,11 @@ export interface TdDateRangePickerProps {
    * @default bottom
    */
   presetsPlacement?: 'left' | 'top' | 'right' | 'bottom';
+  /**
+   * 只读状态
+   * @default undefined
+   */
+  readonly?: boolean;
   /**
    * 透传给范围输入框 RangeInput 组件的参数
    */