@arco-design/mobile-react 2.35.2 → 2.36.0

package/tokens/app/arcodesign/default/index.js

@@ -1103,7 +1103,17 @@ var tokens = {
   "dark-uploader-disabled-delete-icon-color": "var(--dark-disabled-color)",
   "uploader-disabled-delete-icon-color": "var(--disabled-color)",
   "dark-uploader-item-text-error-color": "var(--dark-danger-color)",
-  "uploader-item-text-error-color": "var(--danger-color)"
+  "uploader-item-text-error-color": "var(--danger-color)",
+  "date-picker-range-font-size": "0.32rem",
+  "date-picker-range-background-color": "#FBFCFC",
+  "dark-date-picker-range-background-color": "#1E1E1E",
+  "dark-date-picker-range-font-color": "var(--dark-font-color)",
+  "date-picker-range-font-color": "var(--font-color)",
+  "dark-date-picker-range-disabled-font-color": "var(--dark-disabled-color)",
+  "date-picker-range-disabled-font-color": "var(--disabled-color)",
+  "date-picker-range-show-padding": "0 0.32rem",
+  "date-picker-range-show-min-height": "0.96rem",
+  "date-picker-range-separate-min-width": "0.96rem"
 };
 var _default = tokens;
 exports["default"] = _default;

package/tokens/app/arcodesign/default/index.json

@@ -2699,6 +2699,30 @@
         "jsValue": "#F76965",
         "staticValue": "#F76965"
     },
+    "darkDatePickerRangeBackgroundColor": {
+        "cssKey": "dark-date-picker-range-background-color",
+        "desc": "",
+        "override": "",
+        "value": "#1E1E1E",
+        "jsValue": "#1E1E1E",
+        "staticValue": "#1E1E1E"
+    },
+    "darkDatePickerRangeDisabledFontColor": {
+        "cssKey": "dark-date-picker-range-disabled-font-color",
+        "desc": "",
+        "override": "",
+        "value": "@dark-disabled-color",
+        "jsValue": "@global@darkDisabledColor",
+        "staticValue": "#5f5f60"
+    },
+    "darkDatePickerRangeFontColor": {
+        "cssKey": "dark-date-picker-range-font-color",
+        "desc": "",
+        "override": "",
+        "value": "@dark-font-color",
+        "jsValue": "@global@darkFontColor",
+        "staticValue": "#f6f6f6"
+    },
     "darkDialogBodyAndroidColor": {
         "cssKey": "dark-dialog-body-android-color",
         "desc": "",
@@ -4355,6 +4379,90 @@
         "jsValue": "#FF9626",
         "staticValue": "#FF9626"
     },
+    "datePickerRangeBackgroundColor": {
+        "cssKey": "date-picker-range-background-color",
+        "desc": "日期时间范围选择器背景颜色",
+        "override": "",
+        "value": "#FBFCFC",
+        "jsValue": "#FBFCFC",
+        "staticValue": "#FBFCFC",
+        "localeDesc": {
+            "ch": "日期时间范围选择器背景颜色",
+            "en": "Background color of the date picker range when checked"
+        }
+    },
+    "datePickerRangeDisabledFontColor": {
+        "cssKey": "date-picker-range-disabled-font-color",
+        "desc": "日期时间范围选择器未选中时文字颜色",
+        "override": "",
+        "value": "@disabled-color",
+        "jsValue": "@global@disabledColor",
+        "staticValue": "#c9cdd4",
+        "localeDesc": {
+            "ch": "日期时间范围选择器未选中时文字颜色",
+            "en": "Font color of the date picker range when disabled"
+        }
+    },
+    "datePickerRangeFontColor": {
+        "cssKey": "date-picker-range-font-color",
+        "desc": "日期时间范围选择器选中时文字颜色",
+        "override": "",
+        "value": "@font-color",
+        "jsValue": "@global@fontColor",
+        "staticValue": "#1d2129",
+        "localeDesc": {
+            "ch": "日期时间范围选择器选中时文字颜色",
+            "en": "Font color of the date picker range when checked"
+        }
+    },
+    "datePickerRangeFontSize": {
+        "cssKey": "date-picker-range-font-size",
+        "desc": "日期时间范围选择器文字大小",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "日期时间范围选择器文字大小",
+            "en": "Font size of the date picker range"
+        }
+    },
+    "datePickerRangeSeparateMinWidth": {
+        "cssKey": "date-picker-range-separate-min-width",
+        "desc": "日期时间范围选择器展示区域分隔符最小宽度",
+        "override": "",
+        "value": "~`pxtorem(48)`",
+        "jsValue": "@getRem@48",
+        "staticValue": "0.96rem",
+        "localeDesc": {
+            "ch": "日期时间范围选择器展示区域分隔符最小宽度",
+            "en": "Min width of the date picker range separate"
+        }
+    },
+    "datePickerRangeShowMinHeight": {
+        "cssKey": "date-picker-range-show-min-height",
+        "desc": "日期时间范围选择器展示区域最小高度",
+        "override": "",
+        "value": "~`pxtorem(48)`",
+        "jsValue": "@getRem@48",
+        "staticValue": "0.96rem",
+        "localeDesc": {
+            "ch": "日期时间范围选择器展示区域最小高度",
+            "en": "Min height of the date picker range area"
+        }
+    },
+    "datePickerRangeShowPadding": {
+        "cssKey": "date-picker-range-show-padding",
+        "desc": "日期时间范围选择器展示区域外边距大小",
+        "override": "",
+        "value": "0 ~`pxtorem(16)`",
+        "jsValue": "0 @getRem@16",
+        "staticValue": "0 0.32rem",
+        "localeDesc": {
+            "ch": "日期时间范围选择器展示区域外边距大小",
+            "en": "Margin of the date picker range area"
+        }
+    },
     "dialogAndroidBodyFooterGutter": {
         "cssKey": "dialog-android-body-footer-gutter",
         "desc": "对话框 body 和 footer 的间距 (android)",

package/tokens/app/arcodesign/default/index.less

@@ -1092,4 +1092,14 @@
 @uploader-disabled-delete-icon-color: @disabled-color;
 @dark-uploader-item-text-error-color: @dark-danger-color;
 @uploader-item-text-error-color: @danger-color;
+@date-picker-range-font-size: ~`pxtorem(16)`;
+@date-picker-range-background-color: #FBFCFC;
+@dark-date-picker-range-background-color: #1E1E1E;
+@dark-date-picker-range-font-color: @dark-font-color;
+@date-picker-range-font-color: @font-color;
+@dark-date-picker-range-disabled-font-color: @dark-disabled-color;
+@date-picker-range-disabled-font-color: @disabled-color;
+@date-picker-range-show-padding: 0 ~`pxtorem(16)`;
+@date-picker-range-show-min-height: ~`pxtorem(48)`;
+@date-picker-range-separate-min-width: ~`pxtorem(48)`;
 

package/umd/_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/umd/_helpers/hooks.js

@@ -283,29 +283,36 @@
   /**
    * 从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/umd/date-picker/index.js

@@ -30,7 +30,7 @@
     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 @@
         _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 @@
         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 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 @@
       };
     }
 
+    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 @@
 
     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 @@
         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 @@
       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 @@
 
       _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 @@
         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/umd/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/umd/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 *************************/