@pisell/date-picker 3.0.9 → 3.0.10

package/es/ActionBar/index.d.ts

@@ -2,6 +2,16 @@ import React from 'react';
 import { ButtonProps } from 'antd';
 import { Dayjs } from 'dayjs';
 import './index.less';
+export interface DateRangeTimeInputProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    slice?: number;
+    theme?: 'light' | 'dark';
+    className?: string;
+    popoverClassName?: string;
+    popupContainerClassName?: string;
+    [key: string]: any;
+}
 interface ActionBarProps {
     ownerState: any;
     onCancel: () => void;
@@ -15,6 +25,8 @@ interface ActionBarProps {
     okButtonProps?: ButtonProps;
     cancelButtonProps?: ButtonProps;
     isDesktop: boolean;
+    timeInputComponent?: React.ComponentType<DateRangeTimeInputProps>;
+    timeInputProps?: Omit<DateRangeTimeInputProps, 'value' | 'onChange'>;
 }
 declare const ActionBar: (props: ActionBarProps) => React.JSX.Element;
 export default ActionBar;

package/es/ActionBar/index.js

@@ -30,7 +30,9 @@ var ActionBar = function ActionBar(props) {
     value = _props$value === void 0 ? [] : _props$value,
     okButtonProps = props.okButtonProps,
     cancelButtonProps = props.cancelButtonProps,
-    isDesktop = props.isDesktop;
+    isDesktop = props.isDesktop,
+    TimeInputComponent = props.timeInputComponent,
+    timeInputProps = props.timeInputProps;
   var local = useContext(MuiPickersAdapterContext);
   var locale = useMemo(function () {
     return local.utils.locale || 'en';
@@ -87,22 +89,34 @@ var ActionBar = function ActionBar(props) {
       format: 'HH:mm'
     };
   }, [showTime]);
+  var renderTimeInput = function renderTimeInput(currentValue, onTimeChange, pickerProps, placeholder, popupClassName) {
+    if (TimeInputComponent) {
+      return /*#__PURE__*/React.createElement(TimeInputComponent, _extends({}, timeInputProps, {
+        value: currentValue === null || currentValue === void 0 ? void 0 : currentValue.format('HH:mm'),
+        onChange: function onChange(nextTime) {
+          if (!nextTime) return;
+          onTimeChange(dayjs(nextTime, 'HH:mm'));
+        }
+      }));
+    }
+    return /*#__PURE__*/React.createElement(TimePicker, _extends({
+      placeholder: placeholder
+    }, pickerProps, {
+      changeOnBlur: true,
+      value: currentValue,
+      size: "large",
+      popupClassName: popupClassName,
+      onChange: onTimeChange,
+      inputReadOnly: true
+    }));
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, showTime ? /*#__PURE__*/React.createElement("div", {
     className: "date-picker-action-time"
   }, /*#__PURE__*/React.createElement("div", {
     className: "date-picker-action-time-item"
   }, /*#__PURE__*/React.createElement("div", {
     className: "date-picker-action-time-item-label"
-  }, getText('action-bar-start.time', pLocaleMap[locale])), isDesktop ? /*#__PURE__*/React.createElement(TimePicker, _extends({
-    placeholder: getText('action-bar-start.time', pLocaleMap[locale])
-  }, startTimeProps, {
-    changeOnBlur: true,
-    value: value[0],
-    size: "large",
-    popupClassName: "date-picker-action-bar-time-picker-popup",
-    onChange: handleStartChange,
-    inputReadOnly: true
-  })) : /*#__PURE__*/React.createElement("div", {
+  }, getText('action-bar-start.time', pLocaleMap[locale])), isDesktop ? renderTimeInput(value[0], handleStartChange, startTimeProps, getText('action-bar-start.time', pLocaleMap[locale]), 'date-picker-action-bar-time-picker-popup') : /*#__PURE__*/React.createElement("div", {
     className: "date-picker-time-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
     className: "date-picker-time-display"
@@ -118,16 +132,7 @@ var ActionBar = function ActionBar(props) {
     className: "date-picker-action-time-item"
   }, /*#__PURE__*/React.createElement("div", {
     className: "date-picker-action-time-item-label"
-  }, getText('action-bar-end.time', pLocaleMap[locale])), isDesktop ? /*#__PURE__*/React.createElement(TimePicker, _extends({
-    placeholder: getText('action-bar-end.time', pLocaleMap[locale])
-  }, endTimeProps, {
-    changeOnBlur: true,
-    value: value[1],
-    size: "large",
-    popupClassName: "date-picker-action-bar-time-picker-popup",
-    onChange: handleEndChange,
-    inputReadOnly: true
-  })) : /*#__PURE__*/React.createElement("div", {
+  }, getText('action-bar-end.time', pLocaleMap[locale])), isDesktop ? renderTimeInput(value[1], handleEndChange, endTimeProps, getText('action-bar-end.time', pLocaleMap[locale]), 'date-picker-action-bar-time-picker-popup') : /*#__PURE__*/React.createElement("div", {
     className: "date-picker-time-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
     className: "date-picker-time-display"

package/es/PisellDateRangePicker/index.d.ts

@@ -2,6 +2,7 @@ import { Dayjs } from 'dayjs';
 import React from 'react';
 import { ButtonProps } from 'antd';
 import { PopperPlacementType } from '@mui/base/Popper/Popper.types';
+import type { DateRangeTimeInputProps } from '../ActionBar';
 import { PresetType } from '../Shortcuts';
 import 'dayjs/locale/zh-cn';
 import 'dayjs/locale/en';
@@ -65,6 +66,14 @@ export interface PisellDateRangePickerProps {
      * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
      */
     desktopModeMediaQuery?: string;
+    /** 桌面端展示的日历数量：单日 1 个，多日 2 个 */
+    calendars?: 1 | 2 | 3;
+    /** 自定义弹层底部时间输入组件；不传则使用默认 antd TimePicker */
+    timeInputComponent?: React.ComponentType<DateRangeTimeInputProps>;
+    /** 自定义时间输入组件 props */
+    timeInputProps?: Omit<DateRangeTimeInputProps, 'value' | 'onChange'>;
+    /** showTime 模式下是否仍展示弹层顶部 Starting/Ending 日期输入区 */
+    showToolbarWhenShowTime?: boolean;
     style?: React.CSSProperties;
     /** 是否展示清除按钮 */
     allowClear?: boolean;

package/es/PisellDateRangePicker/index.js

@@ -74,6 +74,10 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     cancelButtonProps = props.cancelButtonProps,
     onDateChange = props.onDateChange,
     desktopModeMediaQuery = props.desktopModeMediaQuery,
+    calendars = props.calendars,
+    timeInputComponent = props.timeInputComponent,
+    timeInputProps = props.timeInputProps,
+    showToolbarWhenShowTime = props.showToolbarWhenShowTime,
     style = props.style,
     allowClear = props.allowClear,
     disablePortal = props.disablePortal,
@@ -285,6 +289,7 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
     onMonthChange: onMonthChange,
     minDate: minDate,
     maxDate: maxDate,
+    calendars: calendars,
     format: format,
     label: placeholder,
     value: _value,
@@ -329,10 +334,12 @@ var PisellDateRangePicker = function PisellDateRangePicker(props) {
         onChange: handleChange,
         value: _value,
         okButtonProps: okButtonProps,
-        cancelButtonProps: cancelButtonProps
+        cancelButtonProps: cancelButtonProps,
+        timeInputComponent: timeInputComponent,
+        timeInputProps: timeInputProps
       },
       toolbar: {
-        hidden: showTime,
+        hidden: showTime && !showToolbarWhenShowTime,
         presetItems: _presets,
         format: format,
         locale: locale,

package/lib/ActionBar/index.d.ts

@@ -2,6 +2,16 @@ import React from 'react';
 import { ButtonProps } from 'antd';
 import { Dayjs } from 'dayjs';
 import './index.less';
+export interface DateRangeTimeInputProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    slice?: number;
+    theme?: 'light' | 'dark';
+    className?: string;
+    popoverClassName?: string;
+    popupContainerClassName?: string;
+    [key: string]: any;
+}
 interface ActionBarProps {
     ownerState: any;
     onCancel: () => void;
@@ -15,6 +25,8 @@ interface ActionBarProps {
     okButtonProps?: ButtonProps;
     cancelButtonProps?: ButtonProps;
     isDesktop: boolean;
+    timeInputComponent?: React.ComponentType<DateRangeTimeInputProps>;
+    timeInputProps?: Omit<DateRangeTimeInputProps, 'value' | 'onChange'>;
 }
 declare const ActionBar: (props: ActionBarProps) => React.JSX.Element;
 export default ActionBar;

package/lib/ActionBar/index.js

@@ -51,7 +51,9 @@ var ActionBar = (props) => {
     value = [],
     okButtonProps,
     cancelButtonProps,
-    isDesktop
+    isDesktop,
+    timeInputComponent: TimeInputComponent,
+    timeInputProps
   } = props;
   const local = (0, import_react.useContext)(import_x_date_pickers.MuiPickersAdapterContext);
   const locale = (0, import_react.useMemo)(() => {
@@ -108,21 +110,40 @@ var ActionBar = (props) => {
       format: "HH:mm"
     };
   }, [showTime]);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showTime ? /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item-label" }, (0, import_locales.getText)("action-bar-start.time", import_locales.pLocaleMap[locale])), isDesktop ? /* @__PURE__ */ import_react.default.createElement(
-    import_antd.TimePicker,
-    {
-      placeholder: (0, import_locales.getText)(
-        "action-bar-start.time",
-        import_locales.pLocaleMap[locale]
-      ),
-      ...startTimeProps,
-      changeOnBlur: true,
-      value: value[0],
-      size: "large",
-      popupClassName: "date-picker-action-bar-time-picker-popup",
-      onChange: handleStartChange,
-      inputReadOnly: true
+  const renderTimeInput = (currentValue, onTimeChange, pickerProps, placeholder, popupClassName) => {
+    if (TimeInputComponent) {
+      return /* @__PURE__ */ import_react.default.createElement(
+        TimeInputComponent,
+        {
+          ...timeInputProps,
+          value: currentValue == null ? void 0 : currentValue.format("HH:mm"),
+          onChange: (nextTime) => {
+            if (!nextTime) return;
+            onTimeChange((0, import_dayjs.default)(nextTime, "HH:mm"));
+          }
+        }
+      );
     }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_antd.TimePicker,
+      {
+        placeholder,
+        ...pickerProps,
+        changeOnBlur: true,
+        value: currentValue,
+        size: "large",
+        popupClassName,
+        onChange: onTimeChange,
+        inputReadOnly: true
+      }
+    );
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showTime ? /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item-label" }, (0, import_locales.getText)("action-bar-start.time", import_locales.pLocaleMap[locale])), isDesktop ? renderTimeInput(
+    value[0],
+    handleStartChange,
+    startTimeProps,
+    (0, import_locales.getText)("action-bar-start.time", import_locales.pLocaleMap[locale]),
+    "date-picker-action-bar-time-picker-popup"
   ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-time-wrapper" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-time-display" }, ((_a = value[0]) == null ? void 0 : _a.format("HH:mm")) || "--:--"), /* @__PURE__ */ import_react.default.createElement(
     "input",
     {
@@ -134,18 +155,12 @@ var ActionBar = (props) => {
       className: "date-picker-input-time-native",
       value: (_b = value[0]) == null ? void 0 : _b.format("HH:mm")
     }
-  ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item-label" }, (0, import_locales.getText)("action-bar-end.time", import_locales.pLocaleMap[locale])), isDesktop ? /* @__PURE__ */ import_react.default.createElement(
-    import_antd.TimePicker,
-    {
-      placeholder: (0, import_locales.getText)("action-bar-end.time", import_locales.pLocaleMap[locale]),
-      ...endTimeProps,
-      changeOnBlur: true,
-      value: value[1],
-      size: "large",
-      popupClassName: "date-picker-action-bar-time-picker-popup",
-      onChange: handleEndChange,
-      inputReadOnly: true
-    }
+  ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item-label" }, (0, import_locales.getText)("action-bar-end.time", import_locales.pLocaleMap[locale])), isDesktop ? renderTimeInput(
+    value[1],
+    handleEndChange,
+    endTimeProps,
+    (0, import_locales.getText)("action-bar-end.time", import_locales.pLocaleMap[locale]),
+    "date-picker-action-bar-time-picker-popup"
   ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-time-wrapper" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-time-display" }, ((_c = value[1]) == null ? void 0 : _c.format("HH:mm")) || "--:--"), /* @__PURE__ */ import_react.default.createElement(
     "input",
     {

package/lib/PisellDateRangePicker/index.d.ts

@@ -2,6 +2,7 @@ import { Dayjs } from 'dayjs';
 import React from 'react';
 import { ButtonProps } from 'antd';
 import { PopperPlacementType } from '@mui/base/Popper/Popper.types';
+import type { DateRangeTimeInputProps } from '../ActionBar';
 import { PresetType } from '../Shortcuts';
 import 'dayjs/locale/zh-cn';
 import 'dayjs/locale/en';
@@ -65,6 +66,14 @@ export interface PisellDateRangePickerProps {
      * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
      */
     desktopModeMediaQuery?: string;
+    /** 桌面端展示的日历数量：单日 1 个，多日 2 个 */
+    calendars?: 1 | 2 | 3;
+    /** 自定义弹层底部时间输入组件；不传则使用默认 antd TimePicker */
+    timeInputComponent?: React.ComponentType<DateRangeTimeInputProps>;
+    /** 自定义时间输入组件 props */
+    timeInputProps?: Omit<DateRangeTimeInputProps, 'value' | 'onChange'>;
+    /** showTime 模式下是否仍展示弹层顶部 Starting/Ending 日期输入区 */
+    showToolbarWhenShowTime?: boolean;
     style?: React.CSSProperties;
     /** 是否展示清除按钮 */
     allowClear?: boolean;

package/lib/PisellDateRangePicker/index.js

@@ -92,6 +92,10 @@ var PisellDateRangePicker = (props) => {
     cancelButtonProps,
     onDateChange,
     desktopModeMediaQuery,
+    calendars,
+    timeInputComponent,
+    timeInputProps,
+    showToolbarWhenShowTime,
     style,
     allowClear,
     disablePortal,
@@ -276,6 +280,7 @@ var PisellDateRangePicker = (props) => {
         onMonthChange,
         minDate,
         maxDate,
+        calendars,
         format,
         label: placeholder,
         value: _value,
@@ -316,10 +321,12 @@ var PisellDateRangePicker = (props) => {
             onChange: handleChange,
             value: _value,
             okButtonProps,
-            cancelButtonProps
+            cancelButtonProps,
+            timeInputComponent,
+            timeInputProps
           },
           toolbar: {
-            hidden: showTime,
+            hidden: showTime && !showToolbarWhenShowTime,
             presetItems: _presets,
             format,
             locale,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/date-picker",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "sideEffects": [
     "*.less"
   ],
@@ -26,7 +26,7 @@
     "antd": "^5.10.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@pisell/utils": "3.0.3"
+    "@pisell/utils": "3.0.4"
   },
   "files": [
     "es",