From a934f715d66f8d365a0099b00224a9049f37b379 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Wed, 13 Dec 2023 19:26:07 +0800
Subject: [PATCH] feat(datepicker): add cancel-range-select-limit API

---
 db/TDesign.db                                 | Bin 856064 -> 856064 bytes
 .../src/date-picker/defaultProps.ts           |  21 +-
 .../tdesign-react/src/date-picker/type.ts     | 322 +-----------------
 .../date-range-picker.en-US.md                |  42 +++
 .../date-range-picker/date-range-picker.md    |  42 +++
 .../date-picker/date-range-picker-props.ts    |   6 +-
 .../tdesign-vue-next/src/date-picker/type.ts  | 317 +----------------
 .../date-range-picker.en-US.md                |  52 +++
 .../date-range-picker/date-range-picker.md    |  52 +++
 .../date-picker/date-range-picker-props.ts    |   2 +
 .../tdesign-vue/src/date-picker/type.ts       | 312 +----------------
 .../date-range-picker.en-US.md                |  52 +++
 .../date-range-picker/date-range-picker.md    |  52 +++
 packages/scripts/api.json                     |  41 +++
 14 files changed, 365 insertions(+), 948 deletions(-)
 create mode 100644 packages/products/tdesign-react/src/date-range-picker/date-range-picker.en-US.md
 create mode 100644 packages/products/tdesign-react/src/date-range-picker/date-range-picker.md
 create mode 100644 packages/products/tdesign-vue-next/src/date-range-picker/date-range-picker.en-US.md
 create mode 100644 packages/products/tdesign-vue-next/src/date-range-picker/date-range-picker.md
 create mode 100644 packages/products/tdesign-vue/src/date-range-picker/date-range-picker.en-US.md
 create mode 100644 packages/products/tdesign-vue/src/date-range-picker/date-range-picker.md

diff --git a/db/TDesign.db b/db/TDesign.db
index 1550d10082403a83a14d95c6558c4e210856e6e0..7a5a3159fff89f1726069072af07fcae078f22ce 100644
GIT binary patch
delta 1294
zcmZvc-*4Mg6vyK<>ykFvBp#Ti4Rm>8Kw34)s)@aop*;aY6v3X*T;H4a4kwQ6n{Abl
z;*_~f7uJ@wB3nhZtZLe>&>vE_v`w>0yzsXFVH3V~@>KB*5**t}#se>weSFUOe$Mw?
zTQ6VK%NOU)2}3`gzj9*8*RL+;v4I5x`wiS>;DCWo7`WTOCk-4laLB+t&v0+~pTKur
zaewIu32#1oJN(k`KlNF)EBsfF@Kx#WNO(BZ74Vbsg-?4o_O6`@|N7_ou<*)v`bPL_
z<VA0@*WdF-=%e88!Qt*J-KOwrH<tNL$Q8aRy?-tsd=UCjI1`yVT_C|oBH{D-LcvHd
z;tM+6PJS#h@`aclC7)C2TcS#0S|YL=7$!22*e5haSs*FO8fhLrXl$+6i+8M2#rpYC
zQ=hhqPt4kiS-WpN*tW_C*1auz;($*b^67hgZYJmDK|%9zjn`(ar3#<i<y(vVpla?f
znDs?|w`?9(nh)oAq56kDVQnw))rsT!qP?(g752DMXtk^Be647es?E~V#?d@CD%Ru4
z<N6P6f=P2<H}^L@IrFFpP2vObfn49fU|(zy678pJ)=b4-(mh&GZcJ_PyX$;s(!R3_
zB8|OWUf8h@=dGnjUYq~w*qhV*$nc;%&32|k<bZFk09}iEcBAqAb0;lVe8N}O%-W0t
z<FRziJFXYZgCh9Ui8xTpzu5U5OV8V@d24go8{V1IHOOlZ`R({LDD&s@jqM88>t?;&
z)bC$sYL;9F7O3L6!b3j$lT|H1M#tkX#|XkCDQ0DcFzg;_?wYBRMl{WcDoV_~*B}cX
zQ#4I58WA<PLJEUwMa4u#O42RYkR&??2O}|!(Jd;=XoMh@XiTL!i4ok7t|}@bx5ZRO
zCQ(F_NJLo;8YHQzF|S%{x7L`bwy<bAlVxZ`x$QQV#uP;(8q_+>QIv$9G!5x+TBGQ-
zzfqU4HAv2##AOn*Oi781N}?=}BW;W(8T62{8e)oDLV(`2qoW%|w?xWldejwj26wR`
z-*c=}#%PN4qag+Xs-cVm>K;bUEr2fy#&c9%qgx{&8Rk%-1m3>JM;9_Gxk(k^a$vNM
zp`)re?rZ=oaeT&96Gvo%qb;XlXTaHJd{^_d-1*<@M_-Q-XLA5|Q<Sp=!Hq@$S3%x!
zacCjtEv>VD89ajZ0bHUl7VnECP%L&ip13@C>3>4`w@Mez281)AcZ5jf5_SJGXZNmk
IN7h6C0-w-HmH+?%

delta 138
zcmV;50CoR>pfrG>G>{tsKam_m1wQ~TUmJmBg=7JRWCDd`1BGM+g=7VVWCn#~2Zdw^
zg=7hZWD2!p3!wi5djm28m%bnY7PTG>-~yMh0}M2`G6M|B3ISl3{0$6Km+#vL3Ab1d
s46N}Q3kE{~4{8iX4b2Pb3jzuf2|@_Q2vY__2IRFN2_*)%Lk11K3Dn&x3;+NC

diff --git a/packages/products/tdesign-react/src/date-picker/defaultProps.ts b/packages/products/tdesign-react/src/date-picker/defaultProps.ts
index 5b7a6cda0..afe685af8 100644
--- a/packages/products/tdesign-react/src/date-picker/defaultProps.ts
+++ b/packages/products/tdesign-react/src/date-picker/defaultProps.ts
@@ -2,24 +2,11 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdDatePickerProps, TdDateRangePickerProps, TdDatePickerPanelProps, TdDateRangePickerPanelProps } from './type';
-
-export const datePickerDefaultProps: TdDatePickerProps = {
-  allowInput: false,
-  clearable: false,
-  defaultTime: '00:00:00',
-  enableTimePicker: false,
-  format: undefined,
-  mode: 'date',
-  placeholder: undefined,
-  presetsPlacement: 'bottom',
-  size: 'medium',
-  status: 'default',
-  defaultValue: '',
-};
+import { TdDateRangePickerProps } from './type';
 
 export const dateRangePickerDefaultProps: TdDateRangePickerProps = {
   allowInput: false,
+  cancelRangeSelectLimit: false,
   clearable: false,
   defaultTime: ['00:00:00', '23:59:59'],
   enableTimePicker: false,
@@ -30,7 +17,3 @@ export const dateRangePickerDefaultProps: TdDateRangePickerProps = {
   status: 'default',
   defaultValue: [],
 };
-
-export const datePickerPanelDefaultProps: TdDatePickerPanelProps = { defaultTime: '00:00:00' };
-
-export const dateRangePickerPanelDefaultProps: TdDateRangePickerPanelProps = { defaultTime: ['00:00:00', '23:59:59'] };
diff --git a/packages/products/tdesign-react/src/date-picker/type.ts b/packages/products/tdesign-react/src/date-picker/type.ts
index 777d89bbc..964383e23 100644
--- a/packages/products/tdesign-react/src/date-picker/type.ts
+++ b/packages/products/tdesign-react/src/date-picker/type.ts
@@ -4,150 +4,24 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { InputProps } from '../input';
 import { PopupProps } from '../popup';
+import { RangeInputProps } from '../range-input';
 import { TimePickerProps } from '../time-picker';
 import { Dayjs } from 'dayjs';
-import { RangeInputProps } from '../range-input';
 import { TNode, TElement, SizeEnum } from '../common';
 import { MouseEvent, FocusEvent, FormEvent } from 'react';
 
-export interface TdDatePickerProps {
+export interface TdDateRangePickerProps {
   /**
    * 是否允许输入日期
    * @default false
    */
   allowInput?: boolean;
   /**
-   * 是否显示清除按钮
-   * @default false
-   */
-  clearable?: boolean;
-  /**
-   * 时间选择器默认值，当 value/defaultValue 未设置值时有效
-   * @default '00:00:00'
-   */
-  defaultTime?: string;
-  /**
-   * 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。`{ from: 'A', to: 'B' }` 表示在 A 到 B 之间的日期会被禁用。`{ before: 'A', after: 'B' }` 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用
-   */
-  disableDate?: DisableDate;
-  /**
-   * 是否禁用组件
-   */
-  disabled?: boolean;
-  /**
-   * 是否显示时间选择
-   * @default false
-   */
-  enableTimePicker?: boolean;
-  /**
-   * 第一天从星期几开始
-   */
-  firstDayOfWeek?: number;
-  /**
-   * 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format)
-   */
-  format?: string;
-  /**
-   * 透传给输入框（Input）组件的参数
-   */
-  inputProps?: InputProps;
-  /**
-   * 选择器模式
-   * @default date
-   */
-  mode?: 'year' | 'quarter' | 'month' | 'week' | 'date';
-  /**
-   * 占位符
-   */
-  placeholder?: string;
-  /**
-   * 透传给 popup 组件的参数
-   */
-  popupProps?: PopupProps;
-  /**
-   * 用于自定义组件前置图标
-   */
-  prefixIcon?: TElement;
-  /**
-   * 预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天':  dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`
-   */
-  presets?: PresetDate;
-  /**
-   * 预设面板展示区域（包含确定按钮）
-   * @default bottom
-   */
-  presetsPlacement?: 'left' | 'top' | 'right' | 'bottom';
-  /**
-   * 输入框尺寸
-   * @default medium
-   */
-  size?: SizeEnum;
-  /**
-   * 输入框状态
-   * @default default
-   */
-  status?: 'default' | 'success' | 'warning' | 'error';
-  /**
-   * 用于自定义组件后置图标
-   */
-  suffixIcon?: TElement;
-  /**
-   * 透传 TimePicker 组件属性
-   */
-  timePickerProps?: TimePickerProps;
-  /**
-   * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
-   */
-  tips?: TNode;
-  /**
-   * 选中值
-   * @default ''
-   */
-  value?: DateValue;
-  /**
-   * 选中值，非受控属性
-   * @default ''
-   */
-  defaultValue?: DateValue;
-  /**
-   * 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃，请更为使用 `DatePickerValueType`
-   * @default ''
-   */
-  valueType?: DatePickerValueType;
-  /**
-   * 当输入框失去焦点时触发
-   */
-  onBlur?: (context: { value: DateValue; e: FocusEvent<HTMLInputElement> }) => void;
-  /**
-   * 选中值发生变化时触发
-   */
-  onChange?: (value: DateValue, context: { dayjsValue?: Dayjs; trigger?: DatePickerTriggerSource }) => void;
-  /**
-   * 如果存在“确定”按钮，则点击“确定”按钮时触发
-   */
-  onConfirm?: (context: { date: Date; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 输入框获得焦点时触发
-   */
-  onFocus?: (context: { value: DateValue; e: FocusEvent<HTMLInputElement> }) => void;
-  /**
-   * 面板选中值后触发
-   */
-  onPick?: (value: DateValue) => void;
-  /**
-   * 点击预设按钮后触发
-   */
-  onPresetClick?: (context: { preset: PresetDate; e: MouseEvent<HTMLDivElement> }) => void;
-}
-
-export interface TdDateRangePickerProps {
-  /**
-   * 是否允许输入日期
+   * 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。
    * @default false
    */
-  allowInput?: boolean;
+  cancelRangeSelectLimit?: boolean;
   /**
    * 是否显示清除按钮
    * @default false
@@ -304,158 +178,10 @@ export interface TdDateRangePickerProps {
   onPresetClick?: (context: { preset: PresetDate; e: MouseEvent<HTMLDivElement> }) => void;
 }
 
-export interface TdDatePickerPanelProps
-  extends Pick<
-    TdDatePickerProps,
-    | 'value'
-    | 'defaultValue'
-    | 'disableDate'
-    | 'enableTimePicker'
-    | 'firstDayOfWeek'
-    | 'format'
-    | 'mode'
-    | 'presets'
-    | 'presetsPlacement'
-    | 'timePickerProps'
-  > {
-  /**
-   * 时间选择器默认值，当 value/defaultValue 未设置值时有效
-   * @default '00:00:00'
-   */
-  defaultTime?: string;
-  /**
-   * 点击日期单元格时触发
-   */
-  onCellClick?: (context: { date: Date; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同
-   */
-  onChange?: (
-    value: DateValue,
-    context: { dayjsValue?: Dayjs; e?: MouseEvent<HTMLDivElement>; trigger?: DatePickerTriggerSource },
-  ) => void;
-  /**
-   * 如果存在“确定”按钮，则点击“确定”按钮时触发
-   */
-  onConfirm?: (context: { date: Date; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 月份切换发生变化时触发
-   */
-  onMonthChange?: (context: {
-    month: number;
-    date: Date;
-    e?: MouseEvent<HTMLDivElement>;
-    trigger: DatePickerMonthChangeTrigger;
-  }) => void;
-  /**
-   * 点击面板时触发
-   */
-  onPanelClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 点击预设按钮后触发
-   */
-  onPresetClick?: (context: { preset: PresetDate; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 时间切换发生变化时触发
-   */
-  onTimeChange?: (context: {
-    time: string;
-    date: Date;
-    trigger: DatePickerTimeChangeTrigger;
-    e?: MouseEvent<HTMLDivElement>;
-  }) => void;
-  /**
-   * 年份切换发生变化时触发
-   */
-  onYearChange?: (context: {
-    year: number;
-    date: Date;
-    trigger: DatePickerYearChangeTrigger;
-    e?: MouseEvent<HTMLDivElement>;
-  }) => void;
-}
-
-export interface TdDateRangePickerPanelProps
-  extends Pick<
-    TdDateRangePickerProps,
-    | 'value'
-    | 'defaultValue'
-    | 'disableDate'
-    | 'enableTimePicker'
-    | 'firstDayOfWeek'
-    | 'format'
-    | 'mode'
-    | 'presets'
-    | 'presetsPlacement'
-    | 'panelPreselection'
-    | 'timePickerProps'
-  > {
-  /**
-   * 时间选择器默认值，当 value/defaultValue 未设置值时有效
-   * @default ["00:00:00", "23:59:59"]
-   */
-  defaultTime?: string[];
-  /**
-   * 点击日期单元格时触发
-   */
-  onCellClick?: (context: { date: Date[]; partial: DateRangePickerPartial; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同
-   */
-  onChange?: (
-    value: DateRangeValue,
-    context: {
-      dayjsValue?: Dayjs[];
-      partial: DateRangePickerPartial;
-      e?: MouseEvent<HTMLDivElement>;
-      trigger?: DatePickerTriggerSource;
-    },
-  ) => void;
-  /**
-   * 如果存在“确定”按钮，则点击“确定”按钮时触发
-   */
-  onConfirm?: (context: { date: Date[]; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 月份切换发生变化时触发
-   */
-  onMonthChange?: (context: {
-    month: number;
-    date: Date[];
-    partial: DateRangePickerPartial;
-    e?: MouseEvent<HTMLDivElement>;
-    trigger: DatePickerMonthChangeTrigger;
-  }) => void;
-  /**
-   * 点击面板时触发
-   */
-  onPanelClick?: (context: { e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 点击预设按钮后触发
-   */
-  onPresetClick?: (context: { preset: PresetDate; e: MouseEvent<HTMLDivElement> }) => void;
-  /**
-   * 时间切换发生变化时触发
-   */
-  onTimeChange?: (context: {
-    time: string;
-    date: Date[];
-    partial: DateRangePickerPartial;
-    trigger: DatePickerTimeChangeTrigger;
-    e?: MouseEvent<HTMLDivElement>;
-  }) => void;
-  /**
-   * 年份切换发生变化时触发
-   */
-  onYearChange?: (context: {
-    year: number;
-    date: Date[];
-    partial: DateRangePickerPartial;
-    trigger: DatePickerYearChangeTrigger;
-    e?: MouseEvent<HTMLDivElement>;
-  }) => void;
-}
-
-export type DisableDate = Array<DateValue> | DisableDateObj | ((date: DateValue) => boolean);
+export type DisableRangeDate =
+  | Array<DateValue>
+  | DisableDateObj
+  | ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean);
 
 export interface DisableDateObj {
   from?: string;
@@ -464,32 +190,6 @@ export interface DisableDateObj {
   after?: string;
 }
 
-export interface PresetDate {
-  [name: string]: DateValue | (() => DateValue);
-}
-
-export type DateValue = string | number | Date;
-
-export type DatePickerValueType =
-  | 'time-stamp'
-  | 'Date'
-  | 'YYYY'
-  | 'YYYY-MM'
-  | 'YYYY-MM-DD'
-  | 'YYYY-MM-DD HH'
-  | 'YYYY-MM-DD HH:mm'
-  | 'YYYY-MM-DD HH:mm:ss'
-  | 'YYYY-MM-DD HH:mm:ss:SSS';
-
-export type ValueTypeEnum = DatePickerValueType;
-
-export type DatePickerTriggerSource = 'confirm' | 'pick' | 'enter' | 'preset' | 'clear';
-
-export type DisableRangeDate =
-  | Array<DateValue>
-  | DisableDateObj
-  | ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean);
-
 export type DateRangePickerPartial = 'start' | 'end';
 
 export interface PresetRange {
@@ -504,9 +204,3 @@ export interface PickContext {
   e: MouseEvent<HTMLDivElement>;
   partial: DateRangePickerPartial;
 }
-
-export type DatePickerMonthChangeTrigger = 'month-select' | 'month-arrow-next' | 'month-arrow-previous' | 'today';
-
-export type DatePickerTimeChangeTrigger = 'time-hour' | 'time-minute' | 'time-second';
-
-export type DatePickerYearChangeTrigger = 'year-select' | 'year-arrow-next' | 'year-arrow-previous' | 'today';
diff --git a/packages/products/tdesign-react/src/date-range-picker/date-range-picker.en-US.md b/packages/products/tdesign-react/src/date-range-picker/date-range-picker.en-US.md
new file mode 100644
index 000000000..82ab34dd3
--- /dev/null
+++ b/packages/products/tdesign-react/src/date-range-picker/date-range-picker.en-US.md
@@ -0,0 +1,42 @@
+:: BASE_DOC ::
+
+## API
+### DateRangePicker Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+allowInput | Boolean | false | \- | N
+cancelRangeSelectLimit | Boolean | false | The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted. | N
+clearable | Boolean | false | \- | N
+defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N
+disableDate | Object / Array / Function | - | Typescript：`DisableRangeDate` `type DisableRangeDate = Array<DateValue> \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
+disabled | Boolean | - | \- | N
+enableTimePicker | Boolean | false | \- | N
+firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N
+format | String | - | \- | N
+mode | String | date | options: year/quarter/month/week/date | N
+panelPreselection | Boolean | true | \- | N
+placeholder | String / Array | - | Typescript：`string \| Array<string>` | N
+popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
+prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+presets | Object | - | Typescript：`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [DateValue, DateValue]`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/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-react/blob/develop/src/date-picker/type.ts) | N
+separator | String | - | \- | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+status | String | default | options: default/success/warning/error | N
+suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
+tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+value | Array | [] | Typescript：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
+defaultValue | Array | [] | uncontrolled property。Typescript：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
+valueType | String | - | options: time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N
+onBlur | Function |  | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/> | N
+onChange | Function |  | Typescript：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/> | N
+onConfirm | Function |  | Typescript：`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void`<br/> | N
+onFocus | Function |  | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/> | N
+onInput | Function |  | Typescript：`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`<br/> | N
+onPick | Function |  | Typescript：`(value: DateValue, context: PickContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/> | N
+onPresetClick | Function |  | Typescript：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/> | N
diff --git a/packages/products/tdesign-react/src/date-range-picker/date-range-picker.md b/packages/products/tdesign-react/src/date-range-picker/date-range-picker.md
new file mode 100644
index 000000000..38b61034c
--- /dev/null
+++ b/packages/products/tdesign-react/src/date-range-picker/date-range-picker.md
@@ -0,0 +1,42 @@
+:: BASE_DOC ::
+
+## API
+### DateRangePicker Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+allowInput | Boolean | false | 是否允许输入日期 | N
+cancelRangeSelectLimit | Boolean | false | 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 | N
+clearable | Boolean | false | 是否显示清除按钮 | N
+defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | N
+disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableRangeDate` `type DisableRangeDate = Array<DateValue> \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
+disabled | Boolean | - | 是否禁用组件 | N
+enableTimePicker | Boolean | false | 是否显示时间选择 | N
+firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N
+format | String | - | 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) | N
+mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N
+panelPreselection | Boolean | true | 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期 | N
+placeholder | String / Array | - | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array<string>` | N
+popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
+prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+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-react/blob/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-react/blob/develop/src/date-picker/type.ts) | N
+separator | String | - | 日期分隔符，支持全局配置，默认为 '-' | N
+size | String | medium | 输入框尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+status | String | default | 输入框状态。可选项：default/success/warning/error | N
+suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
+tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+value | Array | [] | 选中值。TS 类型：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
+defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N
+valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。可选项：time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N
+onBlur | Function |  | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/>当输入框失去焦点时触发 | N
+onChange | Function |  | TS 类型：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`<br/>选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/> | N
+onConfirm | Function |  | TS 类型：`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void`<br/>如果存在“确定”按钮，则点击“确定”按钮时触发 | N
+onFocus | Function |  | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/>输入框获得焦点时触发 | N
+onInput | Function |  | TS 类型：`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`<br/>输入框数据发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值 | N
+onPick | Function |  | TS 类型：`(value: DateValue, context: PickContext) => void`<br/>选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/> | N
+onPresetClick | Function |  | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/>点击预设按钮后触发 | N
diff --git a/packages/products/tdesign-vue-next/src/date-picker/date-range-picker-props.ts b/packages/products/tdesign-vue-next/src/date-picker/date-range-picker-props.ts
index bbf3dcdb6..ce7c2cd74 100644
--- a/packages/products/tdesign-vue-next/src/date-picker/date-range-picker-props.ts
+++ b/packages/products/tdesign-vue-next/src/date-picker/date-range-picker-props.ts
@@ -10,6 +10,8 @@ import { PropType } from 'vue';
 export default {
   /** 是否允许输入日期 */
   allowInput: Boolean,
+  /** 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 */
+  cancelRangeSelectLimit: Boolean,
   /** 是否显示清除按钮 */
   clearable: Boolean,
   /** 时间选择器默认值，当 value/defaultValue 未设置值时有效 */
@@ -119,11 +121,11 @@ export default {
   /** 选中值 */
   value: {
     type: Array as PropType<TdDateRangePickerProps['value']>,
-    default: undefined,
+    default: undefined as TdDateRangePickerProps['value'],
   },
   modelValue: {
     type: Array as PropType<TdDateRangePickerProps['value']>,
-    default: undefined,
+    default: undefined as TdDateRangePickerProps['value'],
   },
   /** 选中值，非受控属性 */
   defaultValue: {
diff --git a/packages/products/tdesign-vue-next/src/date-picker/type.ts b/packages/products/tdesign-vue-next/src/date-picker/type.ts
index ce1e8a729..c41ebcf68 100644
--- a/packages/products/tdesign-vue-next/src/date-picker/type.ts
+++ b/packages/products/tdesign-vue-next/src/date-picker/type.ts
@@ -4,154 +4,23 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { InputProps } from '../input';
 import { PopupProps } from '../popup';
+import { RangeInputProps } from '../range-input';
 import { TimePickerProps } from '../time-picker';
 import { Dayjs } from 'dayjs';
-import { RangeInputProps } from '../range-input';
 import { TNode, SizeEnum } from '../common';
 
-export interface TdDatePickerProps {
+export interface TdDateRangePickerProps {
   /**
    * 是否允许输入日期
    * @default false
    */
   allowInput?: boolean;
   /**
-   * 是否显示清除按钮
-   * @default false
-   */
-  clearable?: boolean;
-  /**
-   * 时间选择器默认值，当 value/defaultValue 未设置值时有效
-   * @default '00:00:00'
-   */
-  defaultTime?: string;
-  /**
-   * 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。`{ from: 'A', to: 'B' }` 表示在 A 到 B 之间的日期会被禁用。`{ before: 'A', after: 'B' }` 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用
-   */
-  disableDate?: DisableDate;
-  /**
-   * 是否禁用组件
-   */
-  disabled?: boolean;
-  /**
-   * 是否显示时间选择
-   * @default false
-   */
-  enableTimePicker?: boolean;
-  /**
-   * 第一天从星期几开始
-   */
-  firstDayOfWeek?: number;
-  /**
-   * 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format)
-   */
-  format?: string;
-  /**
-   * 透传给输入框（Input）组件的参数
-   */
-  inputProps?: InputProps;
-  /**
-   * 选择器模式
-   * @default date
-   */
-  mode?: 'year' | 'quarter' | 'month' | 'week' | 'date';
-  /**
-   * 占位符
-   */
-  placeholder?: string;
-  /**
-   * 透传给 popup 组件的参数
-   */
-  popupProps?: PopupProps;
-  /**
-   * 用于自定义组件前置图标
-   */
-  prefixIcon?: TNode;
-  /**
-   * 预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天':  dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`
-   */
-  presets?: PresetDate;
-  /**
-   * 预设面板展示区域（包含确定按钮）
-   * @default bottom
-   */
-  presetsPlacement?: 'left' | 'top' | 'right' | 'bottom';
-  /**
-   * 输入框尺寸
-   * @default medium
-   */
-  size?: SizeEnum;
-  /**
-   * 输入框状态
-   * @default default
-   */
-  status?: 'default' | 'success' | 'warning' | 'error';
-  /**
-   * 用于自定义组件后置图标
-   */
-  suffixIcon?: TNode;
-  /**
-   * 透传 TimePicker 组件属性
-   */
-  timePickerProps?: TimePickerProps;
-  /**
-   * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
-   */
-  tips?: string | TNode;
-  /**
-   * 选中值
-   * @default ''
-   */
-  value?: DateValue;
-  /**
-   * 选中值，非受控属性
-   * @default ''
-   */
-  defaultValue?: DateValue;
-  /**
-   * 选中值
-   * @default ''
-   */
-  modelValue?: DateValue;
-  /**
-   * 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃，请更为使用 `DatePickerValueType`
-   * @default ''
-   */
-  valueType?: DatePickerValueType;
-  /**
-   * 当输入框失去焦点时触发
-   */
-  onBlur?: (context: { value: DateValue; e: FocusEvent }) => void;
-  /**
-   * 选中值发生变化时触发
-   */
-  onChange?: (value: DateValue, context: { dayjsValue?: Dayjs; trigger?: DatePickerTriggerSource }) => void;
-  /**
-   * 如果存在“确定”按钮，则点击“确定”按钮时触发
-   */
-  onConfirm?: (context: { date: Date; e: MouseEvent }) => void;
-  /**
-   * 输入框获得焦点时触发
-   */
-  onFocus?: (context: { value: DateValue; e: FocusEvent }) => void;
-  /**
-   * 面板选中值后触发
-   */
-  onPick?: (value: DateValue) => void;
-  /**
-   * 点击预设按钮后触发
-   */
-  onPresetClick?: (context: { preset: PresetDate; e: MouseEvent }) => void;
-}
-
-export interface TdDateRangePickerProps {
-  /**
-   * 是否允许输入日期
+   * 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。
    * @default false
    */
-  allowInput?: boolean;
+  cancelRangeSelectLimit?: boolean;
   /**
    * 是否显示清除按钮
    * @default false
@@ -304,148 +173,10 @@ export interface TdDateRangePickerProps {
   onPresetClick?: (context: { preset: PresetDate; e: MouseEvent }) => void;
 }
 
-export interface TdDatePickerPanelProps
-  extends Pick<
-    TdDatePickerProps,
-    | 'value'
-    | 'defaultValue'
-    | 'disableDate'
-    | 'enableTimePicker'
-    | 'firstDayOfWeek'
-    | 'format'
-    | 'mode'
-    | 'presets'
-    | 'presetsPlacement'
-    | 'timePickerProps'
-  > {
-  /**
-   * 时间选择器默认值，当 value/defaultValue 未设置值时有效
-   * @default '00:00:00'
-   */
-  defaultTime?: string;
-  /**
-   * 点击日期单元格时触发
-   */
-  onCellClick?: (context: { date: Date; e: MouseEvent }) => void;
-  /**
-   * 选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同
-   */
-  onChange?: (
-    value: DateValue,
-    context: { dayjsValue?: Dayjs; e?: MouseEvent; trigger?: DatePickerTriggerSource },
-  ) => void;
-  /**
-   * 如果存在“确定”按钮，则点击“确定”按钮时触发
-   */
-  onConfirm?: (context: { date: Date; e: MouseEvent }) => void;
-  /**
-   * 月份切换发生变化时触发
-   */
-  onMonthChange?: (context: {
-    month: number;
-    date: Date;
-    e?: MouseEvent;
-    trigger: DatePickerMonthChangeTrigger;
-  }) => void;
-  /**
-   * 点击面板时触发
-   */
-  onPanelClick?: (context: { e: MouseEvent }) => void;
-  /**
-   * 点击预设按钮后触发
-   */
-  onPresetClick?: (context: { preset: PresetDate; e: MouseEvent }) => void;
-  /**
-   * 时间切换发生变化时触发
-   */
-  onTimeChange?: (context: { time: string; date: Date; trigger: DatePickerTimeChangeTrigger; e?: MouseEvent }) => void;
-  /**
-   * 年份切换发生变化时触发
-   */
-  onYearChange?: (context: { year: number; date: Date; trigger: DatePickerYearChangeTrigger; e?: MouseEvent }) => void;
-}
-
-export interface TdDateRangePickerPanelProps
-  extends Pick<
-    TdDateRangePickerProps,
-    | 'value'
-    | 'defaultValue'
-    | 'disableDate'
-    | 'enableTimePicker'
-    | 'firstDayOfWeek'
-    | 'format'
-    | 'mode'
-    | 'presets'
-    | 'presetsPlacement'
-    | 'panelPreselection'
-    | 'timePickerProps'
-  > {
-  /**
-   * 时间选择器默认值，当 value/defaultValue 未设置值时有效
-   * @default ["00:00:00", "23:59:59"]
-   */
-  defaultTime?: string[];
-  /**
-   * 点击日期单元格时触发
-   */
-  onCellClick?: (context: { date: Date[]; partial: DateRangePickerPartial; e: MouseEvent }) => void;
-  /**
-   * 选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同
-   */
-  onChange?: (
-    value: DateRangeValue,
-    context: {
-      dayjsValue?: Dayjs[];
-      partial: DateRangePickerPartial;
-      e?: MouseEvent;
-      trigger?: DatePickerTriggerSource;
-    },
-  ) => void;
-  /**
-   * 如果存在“确定”按钮，则点击“确定”按钮时触发
-   */
-  onConfirm?: (context: { date: Date[]; e: MouseEvent }) => void;
-  /**
-   * 月份切换发生变化时触发
-   */
-  onMonthChange?: (context: {
-    month: number;
-    date: Date[];
-    partial: DateRangePickerPartial;
-    e?: MouseEvent;
-    trigger: DatePickerMonthChangeTrigger;
-  }) => void;
-  /**
-   * 点击面板时触发
-   */
-  onPanelClick?: (context: { e: MouseEvent }) => void;
-  /**
-   * 点击预设按钮后触发
-   */
-  onPresetClick?: (context: { preset: PresetDate; e: MouseEvent }) => void;
-  /**
-   * 时间切换发生变化时触发
-   */
-  onTimeChange?: (context: {
-    time: string;
-    date: Date[];
-    partial: DateRangePickerPartial;
-    trigger: DatePickerTimeChangeTrigger;
-    e?: MouseEvent;
-  }) => void;
-  /**
-   * 年份切换发生变化时触发
-   */
-  onYearChange?: (context: {
-    year: number;
-    date: Date[];
-    partial: DateRangePickerPartial;
-    trigger: DatePickerYearChangeTrigger;
-    e?: MouseEvent;
-  }) => void;
-}
-
-export type DisableDate = Array<DateValue> | DisableDateObj | ((date: DateValue) => boolean);
+export type DisableRangeDate =
+  | Array<DateValue>
+  | DisableDateObj
+  | ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean);
 
 export interface DisableDateObj {
   from?: string;
@@ -454,32 +185,6 @@ export interface DisableDateObj {
   after?: string;
 }
 
-export interface PresetDate {
-  [name: string]: DateValue | (() => DateValue);
-}
-
-export type DateValue = string | number | Date;
-
-export type DatePickerValueType =
-  | 'time-stamp'
-  | 'Date'
-  | 'YYYY'
-  | 'YYYY-MM'
-  | 'YYYY-MM-DD'
-  | 'YYYY-MM-DD HH'
-  | 'YYYY-MM-DD HH:mm'
-  | 'YYYY-MM-DD HH:mm:ss'
-  | 'YYYY-MM-DD HH:mm:ss:SSS';
-
-export type ValueTypeEnum = DatePickerValueType;
-
-export type DatePickerTriggerSource = 'confirm' | 'pick' | 'enter' | 'preset' | 'clear';
-
-export type DisableRangeDate =
-  | Array<DateValue>
-  | DisableDateObj
-  | ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean);
-
 export type DateRangePickerPartial = 'start' | 'end';
 
 export interface PresetRange {
@@ -494,9 +199,3 @@ export interface PickContext {
   e: MouseEvent;
   partial: DateRangePickerPartial;
 }
-
-export type DatePickerMonthChangeTrigger = 'month-select' | 'month-arrow-next' | 'month-arrow-previous' | 'today';
-
-export type DatePickerTimeChangeTrigger = 'time-hour' | 'time-minute' | 'time-second';
-
-export type DatePickerYearChangeTrigger = 'year-select' | 'year-arrow-next' | 'year-arrow-previous' | 'today';
diff --git a/packages/products/tdesign-vue-next/src/date-range-picker/date-range-picker.en-US.md b/packages/products/tdesign-vue-next/src/date-range-picker/date-range-picker.en-US.md
new file mode 100644
index 000000000..1fa7cfd20
--- /dev/null
+++ b/packages/products/tdesign-vue-next/src/date-range-picker/date-range-picker.en-US.md
@@ -0,0 +1,52 @@
+:: BASE_DOC ::
+
+## API
+### DateRangePicker Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+allowInput | Boolean | false | \- | N
+cancelRangeSelectLimit | Boolean | false | The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted. | N
+clearable | Boolean | false | \- | N
+defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N
+disableDate | Object / Array / Function | - | Typescript：`DisableRangeDate` `type DisableRangeDate = Array<DateValue> \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
+disabled | Boolean | - | \- | N
+enableTimePicker | Boolean | false | \- | N
+firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N
+format | String | - | \- | N
+mode | String | date | options: year/quarter/month/week/date | N
+panelPreselection | Boolean | true | \- | N
+placeholder | String / Array | - | 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/date-picker/type.ts) | N
+prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+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
+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
+suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
+tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+value | Array | [] | `v-model` and `v-model:value` is supported。Typescript：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
+defaultValue | Array | [] | uncontrolled property。Typescript：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
+valueType | String | - | options: time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N
+onBlur | Function |  | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/> | N
+onChange | Function |  | Typescript：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/> | N
+onConfirm | Function |  | Typescript：`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void`<br/> | N
+onFocus | Function |  | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/> | N
+onInput | Function |  | Typescript：`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`<br/> | N
+onPick | Function |  | Typescript：`(value: DateValue, context: PickContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/> | N
+onPresetClick | Function |  | Typescript：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/> | N
+
+### DateRangePicker Events
+
+name | params | description
+-- | -- | --
+blur | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | \-
+change | `(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource })` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/>
+confirm | `(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial })` | \-
+focus | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | \-
+input | `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent })` | \-
+pick | `(value: DateValue, context: PickContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/>
+preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \-
diff --git a/packages/products/tdesign-vue-next/src/date-range-picker/date-range-picker.md b/packages/products/tdesign-vue-next/src/date-range-picker/date-range-picker.md
new file mode 100644
index 000000000..72f55caa1
--- /dev/null
+++ b/packages/products/tdesign-vue-next/src/date-range-picker/date-range-picker.md
@@ -0,0 +1,52 @@
+:: BASE_DOC ::
+
+## API
+### DateRangePicker Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+allowInput | Boolean | false | 是否允许输入日期 | N
+cancelRangeSelectLimit | Boolean | false | 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 | N
+clearable | Boolean | false | 是否显示清除按钮 | N
+defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | N
+disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableRangeDate` `type DisableRangeDate = Array<DateValue> \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
+disabled | Boolean | - | 是否禁用组件 | N
+enableTimePicker | Boolean | false | 是否显示时间选择 | N
+firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N
+format | String | - | 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) | N
+mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N
+panelPreselection | Boolean | true | 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期 | N
+placeholder | String / Array | - | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。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/date-picker/type.ts) | N
+prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+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
+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
+suffixIcon | Slot / Function | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
+tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+value | Array | [] | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
+defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts) | N
+valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。可选项：time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N
+onBlur | Function |  | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/>当输入框失去焦点时触发 | N
+onChange | Function |  | TS 类型：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`<br/>选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/> | N
+onConfirm | Function |  | TS 类型：`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void`<br/>如果存在“确定”按钮，则点击“确定”按钮时触发 | N
+onFocus | Function |  | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/>输入框获得焦点时触发 | N
+onInput | Function |  | TS 类型：`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`<br/>输入框数据发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值 | N
+onPick | Function |  | TS 类型：`(value: DateValue, context: PickContext) => void`<br/>选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/> | N
+onPresetClick | Function |  | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/>点击预设按钮后触发 | N
+
+### DateRangePicker Events
+
+名称 | 参数 | 描述
+-- | -- | --
+blur | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | 当输入框失去焦点时触发
+change | `(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource })` | 选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/>
+confirm | `(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial })` | 如果存在“确定”按钮，则点击“确定”按钮时触发
+focus | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | 输入框获得焦点时触发
+input | `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent })` | 输入框数据发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值
+pick | `(value: DateValue, context: PickContext)` | 选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/>
+preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发
diff --git a/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts b/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts
index b356a29c3..499c53784 100644
--- a/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts
+++ b/packages/products/tdesign-vue/src/date-picker/date-range-picker-props.ts
@@ -10,6 +10,8 @@ import { PropType } from 'vue';
 export default {
   /** 是否允许输入日期 */
   allowInput: Boolean,
+  /** 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 */
+  cancelRangeSelectLimit: Boolean,
   /** 是否显示清除按钮 */
   clearable: Boolean,
   /** 时间选择器默认值，当 value/defaultValue 未设置值时有效 */
diff --git a/packages/products/tdesign-vue/src/date-picker/type.ts b/packages/products/tdesign-vue/src/date-picker/type.ts
index 4048fa33f..2a73758e7 100644
--- a/packages/products/tdesign-vue/src/date-picker/type.ts
+++ b/packages/products/tdesign-vue/src/date-picker/type.ts
@@ -4,149 +4,23 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { InputProps } from '../input';
 import { PopupProps } from '../popup';
+import { RangeInputProps } from '../range-input';
 import { TimePickerProps } from '../time-picker';
 import { Dayjs } from 'dayjs';
-import { RangeInputProps } from '../range-input';
 import { TNode, SizeEnum } from '../common';
 
-export interface TdDatePickerProps {
+export interface TdDateRangePickerProps {
   /**
    * 是否允许输入日期
    * @default false
    */
   allowInput?: boolean;
   /**
-   * 是否显示清除按钮
-   * @default false
-   */
-  clearable?: boolean;
-  /**
-   * 时间选择器默认值，当 value/defaultValue 未设置值时有效
-   * @default '00:00:00'
-   */
-  defaultTime?: string;
-  /**
-   * 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。`{ from: 'A', to: 'B' }` 表示在 A 到 B 之间的日期会被禁用。`{ before: 'A', after: 'B' }` 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用
-   */
-  disableDate?: DisableDate;
-  /**
-   * 是否禁用组件
-   */
-  disabled?: boolean;
-  /**
-   * 是否显示时间选择
-   * @default false
-   */
-  enableTimePicker?: boolean;
-  /**
-   * 第一天从星期几开始
-   */
-  firstDayOfWeek?: number;
-  /**
-   * 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format)
-   */
-  format?: string;
-  /**
-   * 透传给输入框（Input）组件的参数
-   */
-  inputProps?: InputProps;
-  /**
-   * 选择器模式
-   * @default date
-   */
-  mode?: 'year' | 'quarter' | 'month' | 'week' | 'date';
-  /**
-   * 占位符
-   */
-  placeholder?: string;
-  /**
-   * 透传给 popup 组件的参数
-   */
-  popupProps?: PopupProps;
-  /**
-   * 用于自定义组件前置图标
-   */
-  prefixIcon?: TNode;
-  /**
-   * 预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天':  dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`
-   */
-  presets?: PresetDate;
-  /**
-   * 预设面板展示区域（包含确定按钮）
-   * @default bottom
-   */
-  presetsPlacement?: 'left' | 'top' | 'right' | 'bottom';
-  /**
-   * 输入框尺寸
-   * @default medium
-   */
-  size?: SizeEnum;
-  /**
-   * 输入框状态
-   * @default default
-   */
-  status?: 'default' | 'success' | 'warning' | 'error';
-  /**
-   * 用于自定义组件后置图标
-   */
-  suffixIcon?: TNode;
-  /**
-   * 透传 TimePicker 组件属性
-   */
-  timePickerProps?: TimePickerProps;
-  /**
-   * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
-   */
-  tips?: string | TNode;
-  /**
-   * 选中值
-   * @default ''
-   */
-  value?: DateValue;
-  /**
-   * 选中值，非受控属性
-   * @default ''
-   */
-  defaultValue?: DateValue;
-  /**
-   * 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃，请更为使用 `DatePickerValueType`
-   * @default ''
-   */
-  valueType?: DatePickerValueType;
-  /**
-   * 当输入框失去焦点时触发
-   */
-  onBlur?: (context: { value: DateValue; e: FocusEvent }) => void;
-  /**
-   * 选中值发生变化时触发
-   */
-  onChange?: (value: DateValue, context: { dayjsValue?: Dayjs; trigger?: DatePickerTriggerSource }) => void;
-  /**
-   * 如果存在“确定”按钮，则点击“确定”按钮时触发
-   */
-  onConfirm?: (context: { date: Date; e: MouseEvent }) => void;
-  /**
-   * 输入框获得焦点时触发
-   */
-  onFocus?: (context: { value: DateValue; e: FocusEvent }) => void;
-  /**
-   * 面板选中值后触发
-   */
-  onPick?: (value: DateValue) => void;
-  /**
-   * 点击预设按钮后触发
-   */
-  onPresetClick?: (context: { preset: PresetDate; e: MouseEvent }) => void;
-}
-
-export interface TdDateRangePickerProps {
-  /**
-   * 是否允许输入日期
+   * 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。
    * @default false
    */
-  allowInput?: boolean;
+  cancelRangeSelectLimit?: boolean;
   /**
    * 是否显示清除按钮
    * @default false
@@ -294,148 +168,10 @@ export interface TdDateRangePickerProps {
   onPresetClick?: (context: { preset: PresetDate; e: MouseEvent }) => void;
 }
 
-export interface TdDatePickerPanelProps
-  extends Pick<
-    TdDatePickerProps,
-    | 'value'
-    | 'defaultValue'
-    | 'disableDate'
-    | 'enableTimePicker'
-    | 'firstDayOfWeek'
-    | 'format'
-    | 'mode'
-    | 'presets'
-    | 'presetsPlacement'
-    | 'timePickerProps'
-  > {
-  /**
-   * 时间选择器默认值，当 value/defaultValue 未设置值时有效
-   * @default '00:00:00'
-   */
-  defaultTime?: string;
-  /**
-   * 点击日期单元格时触发
-   */
-  onCellClick?: (context: { date: Date; e: MouseEvent }) => void;
-  /**
-   * 选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同
-   */
-  onChange?: (
-    value: DateValue,
-    context: { dayjsValue?: Dayjs; e?: MouseEvent; trigger?: DatePickerTriggerSource },
-  ) => void;
-  /**
-   * 如果存在“确定”按钮，则点击“确定”按钮时触发
-   */
-  onConfirm?: (context: { date: Date; e: MouseEvent }) => void;
-  /**
-   * 月份切换发生变化时触发
-   */
-  onMonthChange?: (context: {
-    month: number;
-    date: Date;
-    e?: MouseEvent;
-    trigger: DatePickerMonthChangeTrigger;
-  }) => void;
-  /**
-   * 点击面板时触发
-   */
-  onPanelClick?: (context: { e: MouseEvent }) => void;
-  /**
-   * 点击预设按钮后触发
-   */
-  onPresetClick?: (context: { preset: PresetDate; e: MouseEvent }) => void;
-  /**
-   * 时间切换发生变化时触发
-   */
-  onTimeChange?: (context: { time: string; date: Date; trigger: DatePickerTimeChangeTrigger; e?: MouseEvent }) => void;
-  /**
-   * 年份切换发生变化时触发
-   */
-  onYearChange?: (context: { year: number; date: Date; trigger: DatePickerYearChangeTrigger; e?: MouseEvent }) => void;
-}
-
-export interface TdDateRangePickerPanelProps
-  extends Pick<
-    TdDateRangePickerProps,
-    | 'value'
-    | 'defaultValue'
-    | 'disableDate'
-    | 'enableTimePicker'
-    | 'firstDayOfWeek'
-    | 'format'
-    | 'mode'
-    | 'presets'
-    | 'presetsPlacement'
-    | 'panelPreselection'
-    | 'timePickerProps'
-  > {
-  /**
-   * 时间选择器默认值，当 value/defaultValue 未设置值时有效
-   * @default ["00:00:00", "23:59:59"]
-   */
-  defaultTime?: string[];
-  /**
-   * 点击日期单元格时触发
-   */
-  onCellClick?: (context: { date: Date[]; partial: DateRangePickerPartial; e: MouseEvent }) => void;
-  /**
-   * 选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同
-   */
-  onChange?: (
-    value: DateRangeValue,
-    context: {
-      dayjsValue?: Dayjs[];
-      partial: DateRangePickerPartial;
-      e?: MouseEvent;
-      trigger?: DatePickerTriggerSource;
-    },
-  ) => void;
-  /**
-   * 如果存在“确定”按钮，则点击“确定”按钮时触发
-   */
-  onConfirm?: (context: { date: Date[]; e: MouseEvent }) => void;
-  /**
-   * 月份切换发生变化时触发
-   */
-  onMonthChange?: (context: {
-    month: number;
-    date: Date[];
-    partial: DateRangePickerPartial;
-    e?: MouseEvent;
-    trigger: DatePickerMonthChangeTrigger;
-  }) => void;
-  /**
-   * 点击面板时触发
-   */
-  onPanelClick?: (context: { e: MouseEvent }) => void;
-  /**
-   * 点击预设按钮后触发
-   */
-  onPresetClick?: (context: { preset: PresetDate; e: MouseEvent }) => void;
-  /**
-   * 时间切换发生变化时触发
-   */
-  onTimeChange?: (context: {
-    time: string;
-    date: Date[];
-    partial: DateRangePickerPartial;
-    trigger: DatePickerTimeChangeTrigger;
-    e?: MouseEvent;
-  }) => void;
-  /**
-   * 年份切换发生变化时触发
-   */
-  onYearChange?: (context: {
-    year: number;
-    date: Date[];
-    partial: DateRangePickerPartial;
-    trigger: DatePickerYearChangeTrigger;
-    e?: MouseEvent;
-  }) => void;
-}
-
-export type DisableDate = Array<DateValue> | DisableDateObj | ((date: DateValue) => boolean);
+export type DisableRangeDate =
+  | Array<DateValue>
+  | DisableDateObj
+  | ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean);
 
 export interface DisableDateObj {
   from?: string;
@@ -444,32 +180,6 @@ export interface DisableDateObj {
   after?: string;
 }
 
-export interface PresetDate {
-  [name: string]: DateValue | (() => DateValue);
-}
-
-export type DateValue = string | number | Date;
-
-export type DatePickerValueType =
-  | 'time-stamp'
-  | 'Date'
-  | 'YYYY'
-  | 'YYYY-MM'
-  | 'YYYY-MM-DD'
-  | 'YYYY-MM-DD HH'
-  | 'YYYY-MM-DD HH:mm'
-  | 'YYYY-MM-DD HH:mm:ss'
-  | 'YYYY-MM-DD HH:mm:ss:SSS';
-
-export type ValueTypeEnum = DatePickerValueType;
-
-export type DatePickerTriggerSource = 'confirm' | 'pick' | 'enter' | 'preset' | 'clear';
-
-export type DisableRangeDate =
-  | Array<DateValue>
-  | DisableDateObj
-  | ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean);
-
 export type DateRangePickerPartial = 'start' | 'end';
 
 export interface PresetRange {
@@ -484,9 +194,3 @@ export interface PickContext {
   e: MouseEvent;
   partial: DateRangePickerPartial;
 }
-
-export type DatePickerMonthChangeTrigger = 'month-select' | 'month-arrow-next' | 'month-arrow-previous' | 'today';
-
-export type DatePickerTimeChangeTrigger = 'time-hour' | 'time-minute' | 'time-second';
-
-export type DatePickerYearChangeTrigger = 'year-select' | 'year-arrow-next' | 'year-arrow-previous' | 'today';
diff --git a/packages/products/tdesign-vue/src/date-range-picker/date-range-picker.en-US.md b/packages/products/tdesign-vue/src/date-range-picker/date-range-picker.en-US.md
new file mode 100644
index 000000000..705ccff98
--- /dev/null
+++ b/packages/products/tdesign-vue/src/date-range-picker/date-range-picker.en-US.md
@@ -0,0 +1,52 @@
+:: BASE_DOC ::
+
+## API
+### DateRangePicker Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+allowInput | Boolean | false | \- | N
+cancelRangeSelectLimit | Boolean | false | The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted. | N
+clearable | Boolean | false | \- | N
+defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N
+disableDate | Object / Array / Function | - | Typescript：`DisableRangeDate` `type DisableRangeDate = Array<DateValue> \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+disabled | Boolean | - | \- | N
+enableTimePicker | Boolean | false | \- | N
+firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N
+format | String | - | \- | N
+mode | String | date | options: year/quarter/month/week/date | N
+panelPreselection | Boolean | true | \- | N
+placeholder | String / Array | - | 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/tree/develop/src/date-picker/type.ts) | N
+prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+presets | Object | - | Typescript：`PresetRange` `interface PresetRange { [range: string]: DateRange \| (() => DateRange)}` `type DateRange = [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
+rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+separator | String | - | \- | 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
+timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+value | Array | [] | `v-model` is supported。Typescript：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+defaultValue | Array | [] | uncontrolled property。Typescript：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+valueType | String | - | options: time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N
+onBlur | Function |  | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/> | N
+onChange | Function |  | Typescript：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/> | N
+onConfirm | Function |  | Typescript：`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void`<br/> | N
+onFocus | Function |  | Typescript：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/> | N
+onInput | Function |  | Typescript：`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`<br/> | N
+onPick | Function |  | Typescript：`(value: DateValue, context: PickContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/> | N
+onPresetClick | Function |  | Typescript：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/> | N
+
+### DateRangePicker Events
+
+name | params | description
+-- | -- | --
+blur | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | \-
+change | `(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource })` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/>
+confirm | `(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial })` | \-
+focus | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | \-
+input | `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent })` | \-
+pick | `(value: DateValue, context: PickContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/>
+preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | \-
diff --git a/packages/products/tdesign-vue/src/date-range-picker/date-range-picker.md b/packages/products/tdesign-vue/src/date-range-picker/date-range-picker.md
new file mode 100644
index 000000000..1ce2d1ced
--- /dev/null
+++ b/packages/products/tdesign-vue/src/date-range-picker/date-range-picker.md
@@ -0,0 +1,52 @@
+:: BASE_DOC ::
+
+## API
+### DateRangePicker Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+allowInput | Boolean | false | 是否允许输入日期 | N
+cancelRangeSelectLimit | Boolean | false | 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。 | N
+clearable | Boolean | false | 是否显示清除按钮 | N
+defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | N
+disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableRangeDate` `type DisableRangeDate = Array<DateValue> \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+disabled | Boolean | - | 是否禁用组件 | N
+enableTimePicker | Boolean | false | 是否显示时间选择 | N
+firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N
+format | String | - | 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) | N
+mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N
+panelPreselection | Boolean | true | 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期 | N
+placeholder | String / Array | - | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array<string>` | N
+popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+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/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/tree/develop/src/date-picker/type.ts) | N
+separator | String | - | 日期分隔符，支持全局配置，默认为 '-' | 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
+timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`TimePickerProps`，[TimePicker API Documents](./time-picker?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+value | Array | [] | 选中值。支持语法糖 `v-model`。TS 类型：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`DateRangeValue` `type DateRangeValue = Array<DateValue>`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts) | N
+valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。可选项：time-stamp/Date/YYYY/YYYY-MM/YYYY-MM-DD/YYYY-MM-DD HH/YYYY-MM-DD HH:mm/YYYY-MM-DD HH:mm:ss/YYYY-MM-DD HH:mm:ss:SSS | N
+onBlur | Function |  | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/>当输入框失去焦点时触发 | N
+onChange | Function |  | TS 类型：`(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource }) => void`<br/>选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/> | N
+onConfirm | Function |  | TS 类型：`(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial }) => void`<br/>如果存在“确定”按钮，则点击“确定”按钮时触发 | N
+onFocus | Function |  | TS 类型：`(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void`<br/>输入框获得焦点时触发 | N
+onInput | Function |  | TS 类型：`(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void`<br/>输入框数据发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值 | N
+onPick | Function |  | TS 类型：`(value: DateValue, context: PickContext) => void`<br/>选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/> | N
+onPresetClick | Function |  | TS 类型：`(context: { preset: PresetDate, e: MouseEvent }) => void`<br/>点击预设按钮后触发 | N
+
+### DateRangePicker Events
+
+名称 | 参数 | 描述
+-- | -- | --
+blur | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | 当输入框失去焦点时触发
+change | `(value: DateRangeValue, context: { dayjsValue?: Dayjs[], trigger?: DatePickerTriggerSource })` | 选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`import { Dayjs } from 'dayjs'`<br/>
+confirm | `(context: { date: Date[], e: MouseEvent, partial: DateRangePickerPartial })` | 如果存在“确定”按钮，则点击“确定”按钮时触发
+focus | `(context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent })` | 输入框获得焦点时触发
+input | `(context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent })` | 输入框数据发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值
+pick | `(value: DateValue, context: PickContext)` | 选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/date-picker/type.ts)。<br/>`interface PickContext { e: MouseEvent; partial: DateRangePickerPartial }`<br/>
+preset-click | `(context: { preset: PresetDate, e: MouseEvent })` | 点击预设按钮后触发
diff --git a/packages/scripts/api.json b/packages/scripts/api.json
index 0be99e9a9..2b1bdd687 100644
--- a/packages/scripts/api.json
+++ b/packages/scripts/api.json
@@ -29445,6 +29445,47 @@
         "Boolean"
       ]
     },
+    {
+      "id": 1702466637,
+      "platform_framework": [
+        "1",
+        "2",
+        "4"
+      ],
+      "component": "DateRangePicker",
+      "field_category": 1,
+      "field_name": "cancelRangeSelectLimit",
+      "field_type": [
+        "4"
+      ],
+      "field_default_value": "false",
+      "field_enum": "",
+      "field_desc_zh": "默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制。",
+      "field_desc_en": "The default date selection interaction is determined based on the order of dates clicked and will be restricted. For example, if a user first clicks on the start date input box and chooses a date, for instance, 2020-05-15, the interaction will automatically shift focus to the end date input box, waiting for the user to select the end time. At this point, the user can only select a date later than 2020-05-15 (previous dates will be grayed out and disabled, restricting the user's selection). When this value is set to `true`, this restriction is lifted.",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2023-12-13 11:23:57",
+      "update_time": "2023-12-13 11:23:57",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Angular(PC)"
+      ],
+      "field_type_text": [
+        "Boolean"
+      ]
+    },
     {
       "id": 1020,
       "platform_framework": [