@arco-design/mobile-react 2.35.2 → 2.36.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.36.0](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.35.2...@arco-design/mobile-react@2.36.0) (2025-05-13)
+
+
+### Bug Fixes
+
+* `SearchBar` add mouse event param to "onAssociationItemClick" ([#319](https://github.com/arco-design/arco-design-mobile/issues/319)) ([c31c0a5](https://github.com/arco-design/arco-design-mobile/commit/c31c0a5edc0a5fdb172aa81c0216071648dea3a8))
+* `Tabs` optimize updateLayout ([#320](https://github.com/arco-design/arco-design-mobile/issues/320)) ([7b59074](https://github.com/arco-design/arco-design-mobile/commit/7b59074949e62c1552beec4702f911a720e966e3))
+* add harmony system detection support ([#317](https://github.com/arco-design/arco-design-mobile/issues/317)) ([105f459](https://github.com/arco-design/arco-design-mobile/commit/105f45941317c6044aaf0f2f284ca48e630dfc08))
+
+
+### Features
+
+* `DatePicker` add date range picker ([#323](https://github.com/arco-design/arco-design-mobile/issues/323)) ([d02357c](https://github.com/arco-design/arco-design-mobile/commit/d02357cdf6ed43e102c0827937f8ea8396bfb8ae))
+
+
+
+
+
 ## [2.35.2](https://github.com/arco-design/arco-design-mobile/compare/@arco-design/mobile-react@2.35.1...@arco-design/mobile-react@2.35.2) (2025-03-17)
 
 

package/README.en-US.md

@@ -59,8 +59,8 @@ React & ReactDOM: **<a href="https://reactjs.org/docs/cdn-links.html" target="_b
 React Transition Group: **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">Click here</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.35.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.35.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.35.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.35.2/dist/index.min.js"></script>
 ```
 
 ## Full import

package/README.md

@@ -59,8 +59,8 @@ React & ReactDOM： **<a href="https://reactjs.org/docs/cdn-links.html" target="
 React Transition Group： **<a href="https://reactcommunity.org/react-transition-group/" target="_blank">戳这里获取</a>**
 
 ```
-<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.35.1/dist/style.min.css">
-<script src="https://unpkg.com/@arco-design/mobile-react@2.35.1/dist/index.min.js"></script>
+<link ref="stylesheet" href="https://unpkg.com/@arco-design/mobile-react@2.35.2/dist/style.min.css">
+<script src="https://unpkg.com/@arco-design/mobile-react@2.35.2/dist/index.min.js"></script>
 ```
 
 ## 引入全部

package/cjs/_helpers/hooks.d.ts

@@ -4,6 +4,7 @@
  * @name_en General Hooks
  */
 import React from 'react';
+import type { SystemOptions } from '@arco-design/mobile-utils';
 import { BezierType } from '../progress';
 /**
  * 监听页面resize事件的统一封装
@@ -130,15 +131,22 @@ export declare function useLatestRef<T>(variable: T): React.MutableRefObject<T>;
 /**
  * 从navigator.userAgent中获取当前操作系统，如果无法获取ua，则从ContextProvider传入的system中获取值
  * @desc {en} Get the current operating system from navigator.userAgent, if ua cannot be obtained, get the value from the system passed in by ContextProvider
- * @returns system 操作系统，"" | "pc" | "android" | "ios"
+ * @param options 配置选项
+ * @param {en} options  Configuration options
+ * @param options.detectHarmony 是否识别鸿蒙系统，默认为 false，鸿蒙系统会被识别为 android
+ * @param {en} options.detectHarmony Whether to detect HarmonyOS separately, default is false, HarmonyOS will be recognized as android
+ * @returns 返回当前设备的操作系统，可能的值包括 'android'、'ios'、'harmony' 或 'pc'，如果无法获取，则返回空字符串
+ * @returns {en} Returns the operating system of the current device, possible values are 'android', 'ios', 'harmony', or 'pc'. Returns an empty string if it cannot be obtained
  * @example
  * ```
  * import { useSystem } from '@arco-design/mobile-react/esm/_helpers/hooks';
  *
  * const system = useSystem();
+ * // Or with options
+ * const systemWithHarmony = useSystem({ detectHarmony: true });
  * ```
  */
-export declare function useSystem(): "" | "android" | "ios" | "pc";
+export declare function useSystem(options?: SystemOptions): "" | "android" | "harmony" | "ios" | "pc";
 /**
  * 获取页面视口宽高大小，并在页面有resize时更新大小
  * @desc {en} Get the width and height of the page viewport, and update the size when the page is resized

package/cjs/_helpers/hooks.js

@@ -276,29 +276,36 @@ function useLatestRef(variable) {
 /**
  * 从navigator.userAgent中获取当前操作系统，如果无法获取ua，则从ContextProvider传入的system中获取值
  * @desc {en} Get the current operating system from navigator.userAgent, if ua cannot be obtained, get the value from the system passed in by ContextProvider
- * @returns system 操作系统，"" | "pc" | "android" | "ios"
+ * @param options 配置选项
+ * @param {en} options  Configuration options
+ * @param options.detectHarmony 是否识别鸿蒙系统，默认为 false，鸿蒙系统会被识别为 android
+ * @param {en} options.detectHarmony Whether to detect HarmonyOS separately, default is false, HarmonyOS will be recognized as android
+ * @returns 返回当前设备的操作系统，可能的值包括 'android'、'ios'、'harmony' 或 'pc'，如果无法获取，则返回空字符串
+ * @returns {en} Returns the operating system of the current device, possible values are 'android', 'ios', 'harmony', or 'pc'. Returns an empty string if it cannot be obtained
  * @example
  * ```
  * import { useSystem } from '@arco-design/mobile-react/esm/_helpers/hooks';
  *
  * const system = useSystem();
+ * // Or with options
+ * const systemWithHarmony = useSystem({ detectHarmony: true });
  * ```
  */
 
 
-function useSystem() {
+function useSystem(options) {
   var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
       currentSystem = _useContext.system;
 
   var _useState5 = (0, _react.useState)(function () {
-    return currentSystem || (0, _mobileUtils.getSystem)();
+    return currentSystem || (0, _mobileUtils.getSystem)(options);
   }),
       system = _useState5[0],
       setSystem = _useState5[1];
 
   (0, _react.useEffect)(function () {
-    setSystem(currentSystem || (0, _mobileUtils.getSystem)());
-  }, [currentSystem]);
+    setSystem(currentSystem || (0, _mobileUtils.getSystem)(options));
+  }, [currentSystem, options]);
   return system;
 }
 /**

package/cjs/date-picker/index.js

@@ -30,7 +30,7 @@ Object.keys(_type).forEach(function (key) {
   if (key in exports && exports[key] === _type[key]) return;
   exports[key] = _type[key];
 });
-var _excluded = ["currentTs", "className", "visible", "onOk", "onChange", "onValueChange", "mode", "typeArr", "minTs", "maxTs", "formatter", "valueFilter", "columnsProcessor", "touchToStop", "useUTC", "renderLinkedContainer"];
+var _excluded = ["currentTs", "className", "visible", "onOk", "onChange", "onValueChange", "mode", "typeArr", "minTs", "maxTs", "rangeItemFormat", "formatter", "valueFilter", "columnsProcessor", "touchToStop", "useUTC", "renderSeparator", "renderLinkedContainer"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -58,9 +58,10 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       _props$typeArr = props.typeArr,
       typeArr = _props$typeArr === void 0 ? [] : _props$typeArr,
       _props$minTs = props.minTs,
-      minTs = _props$minTs === void 0 ? initMinDate : _props$minTs,
+      userSetMinTs = _props$minTs === void 0 ? initMinDate : _props$minTs,
       _props$maxTs = props.maxTs,
-      maxTs = _props$maxTs === void 0 ? initMaxDate : _props$maxTs,
+      userSetMaxTs = _props$maxTs === void 0 ? initMaxDate : _props$maxTs,
+      rangeItemFormat = props.rangeItemFormat,
       _props$formatter = props.formatter,
       formatter = _props$formatter === void 0 ? defaultFormatter : _props$formatter,
       _props$valueFilter = props.valueFilter,
@@ -71,17 +72,40 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       touchToStop = props.touchToStop,
       _props$useUTC = props.useUTC,
       useUTC = _props$useUTC === void 0 ? false : _props$useUTC,
+      renderSeparator = props.renderSeparator,
       renderLinkedContainer = props.renderLinkedContainer,
       otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var currentTs = Math.min(maxTs, Math.max(minTs, userSetCurrentTs));
+  var isRange = typeof userSetCurrentTs !== 'number';
 
-  var _useState = (0, _react.useState)([[]]),
-      data = _useState[0],
-      setData = _useState[1];
+  var _useState = (0, _react.useState)(userSetCurrentTs[0]),
+      leftTimeValue = _useState[0],
+      setLeftTimeValue = _useState[1];
 
-  var _useState2 = (0, _react.useState)([]),
-      value = _useState2[0],
-      setValue = _useState2[1];
+  var _useState2 = (0, _react.useState)(userSetCurrentTs[1]),
+      rightTimeValue = _useState2[0],
+      setRightTimeValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      activeTabIndex = _useState3[0],
+      setActiveTabIndex = _useState3[1];
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    return _updateTimeScope();
+  }, [userSetMinTs, userSetMaxTs, activeTabIndex]),
+      minTs = _useMemo[0],
+      maxTs = _useMemo[1];
+
+  var _useState4 = (0, _react.useState)(isRange ? Math.min(maxTs, Math.max(minTs, userSetCurrentTs[0])) : Math.min(maxTs, Math.max(minTs, userSetCurrentTs))),
+      currentTs = _useState4[0],
+      setCurrentTs = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([[]]),
+      data = _useState5[0],
+      setData = _useState5[1];
+
+  var _useState6 = (0, _react.useState)([]),
+      value = _useState6[0],
+      setValue = _useState6[1];
 
   var currentDateObjRef = (0, _react.useRef)(_convertTsToDateObj(currentTs));
   var minDateObjRef = (0, _react.useRef)(_convertTsToDateObj(minTs));
@@ -89,7 +113,36 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var keyOptions = (0, _react.useMemo)(function () {
     return _getKeyOptions();
   }, [mode, typeArr]);
+  var leftTimeString = (0, _react.useMemo)(function () {
+    return _getRangeItemValue(leftTimeValue);
+  }, [leftTimeValue]);
+  var rightTimeString = (0, _react.useMemo)(function () {
+    return _getRangeItemValue(rightTimeValue);
+  }, [rightTimeValue]);
   var pickerRef = (0, _react.useRef)(null);
+
+  function _updateRangeValue(nowCurrentTs) {
+    var leftMinTs = typeof userSetMinTs !== 'number' ? userSetMinTs.startTs : userSetMinTs;
+    var rightMinTs = typeof userSetMinTs !== 'number' ? userSetMinTs.endTs : userSetMinTs;
+    var leftMaxTs = typeof userSetMaxTs !== 'number' ? userSetMaxTs.startTs : userSetMaxTs;
+    var rightMaxTs = typeof userSetMaxTs !== 'number' ? userSetMaxTs.endTs : userSetMaxTs;
+
+    if (isRange) {
+      var leftTime, rightTime;
+
+      if (activeTabIndex === 0) {
+        leftTime = nowCurrentTs;
+        rightTime = Math.min(rightMaxTs, Math.max(Math.max(leftTime, rightMinTs), rightTimeValue));
+      } else {
+        rightTime = nowCurrentTs;
+        leftTime = Math.min(leftMaxTs, Math.max(leftMinTs, leftTimeValue));
+      }
+
+      setLeftTimeValue(leftTime);
+      setRightTimeValue(rightTime);
+    }
+  }
+
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       dom: pickerRef.current ? pickerRef.current.dom : null
@@ -113,6 +166,65 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     };
   }
 
+  function _parseFormat(format, timeValue) {
+    var year = timeValue.year,
+        month = timeValue.month,
+        date = timeValue.date,
+        hour = timeValue.hour,
+        minute = timeValue.minute,
+        second = timeValue.second;
+
+    var padZero = function padZero(num, targetLength) {
+      if (targetLength === void 0) {
+        targetLength = 2;
+      }
+
+      var str = "" + num;
+
+      while (str.length < targetLength) {
+        str = "0" + str;
+      }
+
+      return str;
+    };
+
+    var replace = function replace(formatArg, str, num) {
+      if (formatArg.includes(str)) {
+        return str !== 'Y' ? formatArg.replace(str.repeat(2), padZero(num)).replace(str, padZero(num)) : formatArg.replace(str.repeat(4), padZero(num)).replace(str.repeat(2), padZero(num)).replace(str, padZero(num));
+      }
+
+      return formatArg;
+    };
+
+    return [['Y', year], ['M', month], ['D', date], ['H', hour], ['m', minute], ['s', second]].reduce(function (current, item) {
+      return replace(current, item[0], item[1]);
+    }, format);
+  }
+
+  function _getRangeItemValue(time) {
+    var timeValue = _convertTsToDateObj(time);
+
+    if (!isRange) {
+      return;
+    }
+
+    if (rangeItemFormat) {
+      return _parseFormat(rangeItemFormat, timeValue);
+    }
+
+    var format = function format(options, joinString) {
+      return options.filter(function (option) {
+        return keyOptions.includes(option);
+      }).map(function (option) {
+        return timeValue[option] < 10 ? "0" + timeValue[option] : "" + timeValue[option];
+      }).join(joinString);
+    };
+
+    var datePart = format(['year', 'month', 'date'], '/');
+    var timePart = format(['hour', 'minute', 'second'], ':');
+    return datePart + (datePart && timePart && ' ') + timePart;
+  }
+
   function _getSelectValue(columns) {
     var val = keyOptions.map(function (opt, index) {
       var _curCol$Math$max;
@@ -245,7 +357,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   function _handlePickerChange(values, index) {
     var type = keyOptions[index];
-    var nowDateObj = {};
+    var nowDateObj = currentDateObjRef.current;
     values.forEach(function (i, keyIndex) {
       nowDateObj[keyOptions[keyIndex]] = i;
     });
@@ -273,18 +385,35 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       setValue(val);
     }
 
+    setCurrentTs(_convertObjToTs(nowDateObj, currentTs));
+
     if (onValueChange) {
       onValueChange(_convertObjToTs(nowDateObj, currentTs), nowDateObj, index);
     }
   }
 
   function _handlePickerConfirm(values) {
-    var nowDateObj = {};
-    values.forEach(function (index, keyIndex) {
-      nowDateObj[keyOptions[keyIndex]] = index;
-    });
-
-    var newTs = _convertObjToTs(nowDateObj, currentTs);
+    var nowDateObj;
+    var newTs;
+
+    if (isRange) {
+      var leftTimeObj = _convertTsToDateObj(leftTimeValue);
+
+      var rightTimeObj = _convertTsToDateObj(rightTimeValue);
+
+      nowDateObj = keyOptions.reduce(function (arr, key) {
+        arr[0][key] = leftTimeObj[key];
+        arr[1][key] = rightTimeObj[key];
+        return arr;
+      }, [{}, {}]);
+      newTs = [_convertObjToTs(nowDateObj[0], currentTs), _convertObjToTs(nowDateObj[1], currentTs)];
+    } else {
+      nowDateObj = {};
+      values.forEach(function (index, keyIndex) {
+        nowDateObj[keyOptions[keyIndex]] = index;
+      });
+      newTs = _convertObjToTs(nowDateObj, currentTs);
+    }
 
     if (onOk) {
       onOk(newTs, nowDateObj);
@@ -318,6 +447,24 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return options;
   }
 
+  function _updateTimeScope(isLeft) {
+    var nowMaxTs, nowMinTs;
+
+    if (isLeft || activeTabIndex === 0) {
+      nowMaxTs = typeof userSetMaxTs === 'number' ? userSetMaxTs : userSetMaxTs.startTs;
+      nowMinTs = Math.min(nowMaxTs, typeof userSetMinTs === 'number' ? userSetMinTs : userSetMinTs.startTs);
+    } else {
+      nowMinTs = Math.max(Math.min(typeof userSetMaxTs === 'number' ? userSetMaxTs : userSetMaxTs.startTs, leftTimeValue), typeof userSetMinTs === 'number' ? userSetMinTs : userSetMinTs.endTs);
+      nowMaxTs = Math.max(nowMinTs, typeof userSetMaxTs === 'number' ? userSetMaxTs : userSetMaxTs.endTs);
+    }
+
+    return [nowMinTs, nowMaxTs];
+  }
+
+  function _chooseTimeActive(index) {
+    setActiveTabIndex(index);
+  }
+
   (0, _react.useEffect)(function () {
     minDateObjRef.current = _convertTsToDateObj(minTs);
     currentDateObjRef.current = _convertTsToDateObj(currentTs);
@@ -325,9 +472,45 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     _initData();
   }, [currentTs, minTs, maxTs, useUTC]);
+  (0, _react.useEffect)(function () {
+    var nowCurrentTs;
+
+    if (isRange) {
+      nowCurrentTs = Math.min(maxTs, Math.max(minTs, activeTabIndex === 0 ? leftTimeValue : rightTimeValue));
+
+      if (currentTs === nowCurrentTs) {
+        _updateRangeValue(currentTs);
+      }
+    } else {
+      nowCurrentTs = Math.min(maxTs, Math.max(minTs, currentTs));
+    }
+
+    setCurrentTs(nowCurrentTs);
+  }, [minTs, maxTs]);
+  (0, _react.useEffect)(function () {
+    _updateRangeValue(currentTs);
+  }, [currentTs]);
   (0, _react.useEffect)(function () {
     if (visible) {
-      currentDateObjRef.current = _convertTsToDateObj(currentTs);
+      // 初始化当前时间
+      if (isRange) {
+        setActiveTabIndex(0);
+        setLeftTimeValue(userSetCurrentTs[0]);
+        setRightTimeValue(userSetCurrentTs[1]);
+
+        var _updateTimeScope2 = _updateTimeScope(true),
+            nowMinTs = _updateTimeScope2[0],
+            nowMaxTs = _updateTimeScope2[1];
+
+        var nowCurrentTs = Math.min(nowMaxTs, Math.max(nowMinTs, userSetCurrentTs[0]));
+        setCurrentTs(nowCurrentTs);
+
+        if (currentTs === nowCurrentTs) {
+          _updateRangeValue(currentTs);
+        }
+      } else {
+        setCurrentTs(Math.min(maxTs, Math.max(minTs, userSetCurrentTs)));
+      }
 
       _initData();
     }
@@ -344,6 +527,23 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onPickerChange: _handlePickerChange,
       onOk: _handlePickerConfirm,
       touchToStop: touchToStop,
+      renderExtraHeader: isRange ? function () {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: prefixCls + "-date-picker-show"
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: (0, _mobileUtils.cls)("" + (activeTabIndex === 0 ? prefixCls + "-date-picker-range-item-active" : ''), prefixCls + "-date-picker-range-item"),
+          onClick: function onClick() {
+            return _chooseTimeActive(0);
+          }
+        }, leftTimeString), renderSeparator ? renderSeparator() : /*#__PURE__*/_react.default.createElement("span", {
+          className: prefixCls + "-date-picker-show-separate"
+        }, "~"), /*#__PURE__*/_react.default.createElement("span", {
+          className: (0, _mobileUtils.cls)("" + (activeTabIndex === 1 ? prefixCls + "-date-picker-range-item-active" : ''), prefixCls + "-date-picker-range-item"),
+          onClick: function onClick() {
+            return _chooseTimeActive(1);
+          }
+        }, rightTimeString));
+      } : undefined,
       renderLinkedContainer: renderLinkedContainer ? function () {
         return renderLinkedContainer((0, _mobileUtils.isEmptyValue)(props.currentTs) ? undefined : currentTs, keyOptions);
       } : undefined

package/cjs/date-picker/style/css/index.css

@@ -510,6 +510,41 @@
  * }
  * ```
  */
+.arco-date-picker-show {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  font-size:  0.32rem ;
+  padding:  0 0.32rem ;
+  color:  #c9cdd4 ;
+  min-height:  0.96rem ;
+  background-color:  #FBFCFC ;
+}
+.arco-date-picker-show > span {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+}
+.arco-date-picker-show-separate {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 1 auto;
+          flex: 0 1 auto;
+  min-width:  0.96rem ;
+}
+.arco-date-picker-range-item {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+          flex: 1 0 auto;
+}
+.arco-date-picker-range-item-active {
+  color:  #1d2129 ;
+}
 /***************************************************
  *                                                 *
  *               Arco Theme Style                  *
@@ -523,4 +558,11 @@
   background:  #2e2e30 ;
   color:  #929293 ;
 }
+.arco-theme-dark .arco-date-picker-show {
+  color:  #5f5f60 ;
+  background-color:  #1E1E1E ;
+}
+.arco-theme-dark .arco-date-picker-range-item-active {
+  color:  #f6f6f6 ;
+}
 /********************* End *************************/

package/cjs/date-picker/style/index.less

@@ -1,7 +1,29 @@
 @import '../../../style/mixin.less';
 
 .@{prefix}-date-picker {
-
+    &-show {
+        display: flex;
+        .use-var(font-size, date-picker-range-font-size);
+        .use-var(padding, date-picker-range-show-padding);
+        .use-var(color, date-picker-range-disabled-font-color);
+        .use-var(min-height, date-picker-range-show-min-height);
+        .use-var(background-color, date-picker-range-background-color);
+        & > span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        &-separate {
+            flex: 0 1 auto;
+            .use-var(min-width, date-picker-range-separate-min-width);
+        }
+    }
+    &-range-item {
+        flex: 1 0 auto;
+        &-active {
+            .use-var(color, date-picker-range-font-color);
+        }
+    }
 }
 
 /***************************************************
@@ -26,5 +48,20 @@
       .use-var(color, dark-sub-info-font-color);
     }
   }
+  .@{prefix}-date-picker {
+    &-show {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-date-picker-range-disabled-font-color);
+        .use-var(background-color, dark-date-picker-range-background-color);
+      }
+    }
+    &-range-item {
+      &-active {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-date-picker-range-font-color);
+        }
+      }
+    }
+  }
 }
 /********************* End *************************/

package/cjs/date-picker/type.d.ts

@@ -40,18 +40,18 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * 点击选中时执行的回调
      * @en Callback when clicking OK
      */
-    onOk?: (timestamp: number, obj: IDateObj) => void;
+    onOk?: (timestamp: number | [number, number], obj: IDateObj | [IDateObj, IDateObj]) => void;
     /**
      * 当前选中的时间，timestamp
      * @en The currently selected time, timestamp
      * @default Date.now()
      */
-    currentTs?: number;
+    currentTs?: number | [number, number];
     /**
      * 选中后的回调
      * @en Callback when value is changed
      */
-    onChange?: (timestamp: number, obj: IDateObj) => void;
+    onChange?: (timestamp: number | [number, number], obj: IDateObj | [IDateObj, IDateObj]) => void;
     /**
      * 每列数据选择变化后的回调函数
      * @en The callback function after each column data selection changes
@@ -75,20 +75,31 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * @default 当前时间的前十年
      * @default_en 10 years ago from the current time
      */
-    minTs?: number;
+    minTs?: number | {
+        startTs: number;
+        endTs: number;
+    };
     /**
      * 最大可选日期，timestamp
      * @en Maximum selectable date, timestamp
      * @default 当前时间的后十年
      * @default_en Next decade from current time
      */
-    maxTs?: number;
+    maxTs?: number | {
+        startTs: number;
+        endTs: number;
+    };
     /**
      * 是否使用 UTC 时间
      * @en Whether to use UTC
      * @default false
      */
     useUTC?: boolean;
+    /**
+     * 日期时间范围选择展示格式
+     * @en Time range picker display format
+     */
+    rangeItemFormat?: string;
     /**
      * 各可选项展示的格式化方法，参数type为ItemTypes，参数value为当前行的值，返回展示的文字
      * @en The formatting method of each optional item, the parameter type is ItemTypes, the parameter value is the value of the current row, and the displayed text is returned.
@@ -106,9 +117,14 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * @en Selector list item intervention to insert custom options.
      */
     columnsProcessor?: (columns: PickerData[][], currentDateObj: IDateObj) => PickerData[][];
+    /**
+     * 自定义分隔符
+     * @en Defined separator area
+     */
+    renderSeparator?: () => React.ReactNode;
     /**
      * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
-    renderLinkedContainer?: (currentTs: number | undefined, itemTypes: ItemType[]) => ReactNode;
+    renderLinkedContainer?: (currentTs: number | [number, number] | undefined, itemTypes: ItemType[]) => ReactNode;
 }

package/cjs/form/linked-container.d.ts

@@ -2,7 +2,7 @@
 export declare function DefaultPickerLinkedContainer({ value }: {
     value: (string | number)[];
 }): JSX.Element;
-export declare function DefaultDatePickerLinkedContainer({ ts, types }: {
-    ts: number;
+export declare function DefaultDatePickerLinkedContainer({ ts, types, }: {
+    ts: number | [number, number];
     types: string[];
 }): JSX.Element;

package/cjs/form/linked-container.js

@@ -45,7 +45,11 @@ function DefaultDatePickerLinkedContainer(_ref2) {
 
   var className = prefixCls + "-form-picker-link-container";
   var dateTimeStr = (0, _react.useMemo)(function () {
-    return formatDateTimeStr(ts, types);
+    if (typeof ts === 'number') {
+      return formatDateTimeStr(ts, types);
+    }
+
+    return formatDateTimeStr(ts[0], types) + " ~ " + formatDateTimeStr(ts[1], types);
   }, [ts, types]);
 
   function formatDateTimeStr(timestamp, itemTypes) {