feat: DatePicker support `changeOnBlur` (#42168)

* docs: update docs

* chore: fix lint

* chore: bump rc-picker

* docs: timepicker docs

* chore: update ignore

.gitignore

@@ -64,3 +64,5 @@ __image_snapshots__/
 
 .devcontainer*
 .husky/prepare-commit-msg
+
+.eslintcache

components/date-picker/demo/select-in-range.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-这里举例如何用 `onCalendarChange` 和 `disabledDate` 来限制动态的日期区间选择。
+使用 `changeOnBlur` 配合 `onCalendarChange` 和 `disabledDate` 来限制动态的日期区间选择。
 
 ## en-US
 
-A example shows how to select a dynamic range by using `onCalendarChange` and `disabledDate`.
+Using `changeOnBlur` work with `onCalendarChange` and `disabledDate` to limit date selection.

components/date-picker/demo/select-in-range.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
 import { DatePicker } from 'antd';
 import type { Dayjs } from 'dayjs';
+import React, { useState } from 'react';
 
 const { RangePicker } = DatePicker;
 
@@ -31,9 +31,14 @@ const App: React.FC = () => {
     <RangePicker
       value={dates || value}
       disabledDate={disabledDate}
-      onCalendarChange={(val) => setDates(val)}
+      onCalendarChange={(val) => {
-      onChange={(val) => setValue(val)}
+        setDates(val);
+      }}
+      onChange={(val) => {
+        setValue(val);
+      }}
       onOpenChange={onOpenChange}
+      changeOnBlur
     />
   );
 };

components/date-picker/index.en-US.md

@@ -82,6 +82,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | bordered | Whether has border style | boolean | true |  |
 | className | The picker className | string | - |  |
 | dateRender | Custom rendering function for date cells, >= 5.4.0 use `cellRender` instead. | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
+| changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 |
 | cellRender | Custom rendering function for picker cells | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | disabled | Determine whether the DatePicker is disabled | boolean | false |  |
 | disabledDate | Specify the date that cannot be selected | (currentDate: dayjs) => boolean | - |  |

components/date-picker/index.zh-CN.md

@@ -83,6 +83,7 @@ import locale from 'antd/locale/zh_CN';
 | bordered | 是否有边框 | boolean | true |  |
 | className | 选择器 className | string | - |  |
 | dateRender | 自定义日期单元格的内容，5.4.0 起用 `cellRender` 代替 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
+| changeOnBlur | 失去焦点时触发 `change` 事件，例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 |
 | cellRender | 自定义单元格的内容 | function(current: dayjs, today: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
 | disabled | 禁用 | boolean | false |  |
 | disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | - |  |

components/time-picker/index.en-US.md

@@ -50,6 +50,7 @@ dayjs.extend(customParseFormat)
 | allowClear | Whether allow clearing text | boolean | true |  |
 | autoFocus | If get focus when component mounted | boolean | false |  |
 | bordered | Whether has border style | boolean | true |  |
+| changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 |
 | className | The className of picker | string | - |  |
 | clearIcon | The custom clear icon | ReactNode | - |  |
 | clearText | The clear tooltip of icon | string | clear |  |

components/time-picker/index.zh-CN.md

@@ -50,6 +50,7 @@ dayjs.extend(customParseFormat)
 | allowClear | 是否展示清除按钮 | boolean | true |  |
 | autoFocus | 自动获取焦点 | boolean | false |  |
 | bordered | 是否有边框 | boolean | true |  |
+| changeOnBlur | 失去焦点时触发 `change` 事件，例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 |
 | className | 选择器类名 | string | - |  |
 | clearIcon | 自定义的清除图标 | ReactNode | - |  |
 | clearText | 清除按钮的提示文案 | string | clear |  |

package.json

@@ -135,7 +135,7 @@
     "rc-motion": "^2.7.3",
     "rc-notification": "~5.0.0",
     "rc-pagination": "~3.3.1",
-    "rc-picker": "~3.6.1",
+    "rc-picker": "~3.7.4",
     "rc-progress": "~3.4.1",
     "rc-rate": "~2.10.0",
     "rc-resize-observer": "^1.2.0",