@kne/react-form-antd 4.0.2 → 4.1.0

package/dist/index.modern.js

@@ -1,13 +1,14 @@
-import React, { forwardRef, useCallback, useRef, useMemo } from 'react';
+import React, { forwardRef, useCallback, useState, useRef, useMemo } from 'react';
 import classnames from 'classnames';
 import ReactForm__default, { preset as preset$2, useReset, useSubmit } from '@kne/react-form';
 export * from '@kne/react-form';
 import { preset as preset$1, widget, hooks, hoc } from '@kne/react-form-helper';
 export { hoc, hooks, utils, widget } from '@kne/react-form-helper';
 import merge from 'lodash/merge';
-import { TreeSelect, TimePicker, Input, Switch as Switch$1, Select, Radio, InputNumber, DatePicker, Button, Checkbox as Checkbox$1, Cascader as Cascader$1, Rate as Rate$1, Slider as Slider$1 } from 'antd';
+import { TreeSelect, TimePicker, Input, Switch as Switch$1, Select, Radio, InputNumber, Button, DatePicker, Checkbox as Checkbox$1, Cascader as Cascader$1, Rate as Rate$1, Slider as Slider$1 } from 'antd';
+import { IntlProvider, useIntl } from '@kne/react-intl';
+import { CloseCircleFilled, CalendarOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
-import { get } from 'lodash';
 import useControlValue from '@kne/use-control-value';
 
 function _extends() {
@@ -51,7 +52,7 @@ var preset = props => {
   preset$2(globalParams.rules);
 };
 
-const _excluded$4 = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "type", "size", "children"];
+const _excluded$5 = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "type", "size", "children"];
 const {
   ScrollToError,
   EnterSubmit,
@@ -70,7 +71,7 @@ const Form = forwardRef((originProps, ref) => {
       },
       children
     } = originProps,
-    props = _objectWithoutPropertiesLoose(originProps, _excluded$4);
+    props = _objectWithoutPropertiesLoose(originProps, _excluded$5);
   const baseClass = 'react-form';
   let computedClass = baseClass;
   const {
@@ -106,20 +107,69 @@ const Form = forwardRef((originProps, ref) => {
   }) : null, enterSubmit ? /*#__PURE__*/React.createElement(EnterSubmit, null, maxLabel) : maxLabel)));
 });
 
+const locale$1 = {
+  PleaseSelect: '请选择{label}',
+  PleaseInput: '请输入{label}',
+  StartTime: '开始时间',
+  EndTime: '结束时间',
+  StartDate: '开始日期',
+  EndDate: '结束日期',
+  SoFar: '至今'
+};
+
+const locale = {
+  PleaseSelect: 'Please select {label}',
+  PleaseInput: 'Please enter {label}',
+  StartTime: 'Start Time',
+  EndTime: 'End Time',
+  StartDate: 'Start Date',
+  EndDate: 'End Date',
+  SoFar: 'Present'
+};
+
+const _excluded$4 = ["locale"];
+const localeMap = {
+  'zh-CN': locale$1,
+  'en-US': locale
+};
+const withLocale = WrappedComponent => {
+  const WithLocaleComponent = _ref => {
+    let {
+        locale = 'zh-CN'
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    const messages = localeMap[locale] || locale$1;
+    return /*#__PURE__*/React.createElement(IntlProvider, {
+      locale: locale,
+      messages: messages
+    }, /*#__PURE__*/React.createElement(WrappedComponent, props));
+  };
+  WithLocaleComponent.displayName = `withLocale(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  return WithLocaleComponent;
+};
+
 const {
   useOnChange: useOnChange$b
 } = hooks;
-const _TreeSelect = props => {
-  props = Object.assign({}, {
+const TreeSelectInner = props => {
+  const {
+    formatMessage
+  } = useIntl();
+  const mergedProps = Object.assign({}, {
     fieldName: 'treeSelect'
   }, props);
   const render = useOnChange$b(Object.assign({
-    placeholder: `请选择${props.label || ''}`
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseSelect'
+    }, {
+      label: mergedProps.label || ''
+    })
+  }, mergedProps));
   return render(TreeSelect);
 };
-_TreeSelect.Field = TreeSelect;
-_TreeSelect.TreeNode = TreeSelect.TreeNode;
+TreeSelectInner.Field = TreeSelect;
+TreeSelectInner.TreeNode = TreeSelect.TreeNode;
+const _TreeSelect = withLocale(TreeSelectInner);
 
 const {
   useOnChange: useOnChange$a
@@ -127,41 +177,64 @@ const {
 const {
   RangePicker: RangePicker$1
 } = TimePicker;
-const _TimePicker = props => {
-  props = Object.assign({}, {
+const TimePickerInner = props => {
+  const {
+    formatMessage
+  } = useIntl();
+  const mergedProps = Object.assign({}, {
     fieldName: 'timePicker'
   }, props);
   const render = useOnChange$a(Object.assign({
-    placeholder: `请选择${props.label || ''}`
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseSelect'
+    }, {
+      label: mergedProps.label || ''
+    })
+  }, mergedProps));
   return render(TimePicker);
 };
-_TimePicker.Field = TimePicker;
-const _RangePicker$1 = props => {
-  props = Object.assign({}, {
+TimePickerInner.Field = TimePicker;
+const RangePickerInner$1 = props => {
+  const {
+    formatMessage
+  } = useIntl();
+  const mergedProps = Object.assign({}, {
     fieldName: 'rangeTimePicker'
   }, props);
   const render = useOnChange$a(Object.assign({
-    placeholder: `请选择${props.label || ''}`
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseSelect'
+    }, {
+      label: mergedProps.label || ''
+    })
+  }, mergedProps));
   return render(RangePicker$1);
 };
-_RangePicker$1.Field = RangePicker$1;
-_TimePicker.RangePicker = _RangePicker$1;
+RangePickerInner$1.Field = RangePicker$1;
+const _TimePicker = withLocale(TimePickerInner);
+_TimePicker.RangePicker = withLocale(RangePickerInner$1);
 
 const {
   useDecorator: useDecorator$2
 } = hooks;
-const TextArea = props => {
-  props = Object.assign({}, {
+const TextAreaInner = props => {
+  const {
+    formatMessage
+  } = useIntl();
+  const mergedProps = Object.assign({}, {
     fieldName: 'textArea'
   }, props);
   const render = useDecorator$2(Object.assign({
-    placeholder: `请输入${props.label}`
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseInput'
+    }, {
+      label: mergedProps.label
+    })
+  }, mergedProps));
   return render(Input.TextArea);
 };
-TextArea.Field = Input.TextArea;
+TextAreaInner.Field = Input.TextArea;
+const TextArea = withLocale(TextAreaInner);
 
 const {
   useOnChange: useOnChange$9,
@@ -184,18 +257,26 @@ Switch.Field = Switch$1;
 const {
   useOnChange: useOnChange$8
 } = hooks;
-const _Select = props => {
-  props = Object.assign({}, {
+const SelectInner = props => {
+  const {
+    formatMessage
+  } = useIntl();
+  const mergedProps = Object.assign({}, {
     fieldName: 'select'
   }, props);
   const render = useOnChange$8(Object.assign({
-    placeholder: `请选择${props.label || ''}`
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseSelect'
+    }, {
+      label: mergedProps.label || ''
+    })
+  }, mergedProps));
   return render(Select);
 };
-_Select.Field = Select;
-_Select.Option = Select.Option;
-_Select.OptGroup = Select.OptGroup;
+SelectInner.Field = Select;
+SelectInner.Option = Select.Option;
+SelectInner.OptGroup = Select.OptGroup;
+const _Select = withLocale(SelectInner);
 
 const _excluded$3 = ["onChange"];
 const {
@@ -226,133 +307,300 @@ _RadioGroup.Radio = Radio;
 const {
   useDecorator: useDecorator$1
 } = hooks;
-const InputNumberField = props => {
-  props = Object.assign({}, {
+const InputNumberFieldInner = props => {
+  const {
+    formatMessage
+  } = useIntl();
+  const mergedProps = Object.assign({}, {
     fieldName: 'inputNumber',
     autoComplete: 'off'
   }, props);
   const render = useDecorator$1(Object.assign({
-    placeholder: `请输入${props.label}`
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseInput'
+    }, {
+      label: mergedProps.label
+    })
+  }, mergedProps));
   return render(InputNumber);
 };
-InputNumberField.Field = InputNumber;
+InputNumberFieldInner.Field = InputNumber;
+const InputNumberField = withLocale(InputNumberFieldInner);
 
 const {
   useDecorator
 } = hooks;
-const InputField = props => {
-  props = Object.assign({}, {
+const InputFieldInner = props => {
+  const {
+    formatMessage
+  } = useIntl();
+  const mergedProps = Object.assign({}, {
     fieldName: 'input',
     autoComplete: 'off'
   }, props);
   const render = useDecorator(Object.assign({
-    placeholder: `请输入${props.label}`
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseInput'
+    }, {
+      label: mergedProps.label
+    })
+  }, mergedProps));
   return render(Input);
 };
-InputField.Field = Input;
-InputField.Password = props => {
-  props = Object.assign({}, {
+InputFieldInner.Field = Input;
+const PasswordInner = props => {
+  const {
+    formatMessage
+  } = useIntl();
+  const mergedProps = Object.assign({}, {
     fieldName: 'password',
     autoComplete: 'off'
   }, props);
   const render = useDecorator(Object.assign({
-    placeholder: `请输入${props.label}`
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseInput'
+    }, {
+      label: mergedProps.label
+    })
+  }, mergedProps));
   return render(Input.Password);
 };
-InputField.Password.Field = Input.Password;
+PasswordInner.Field = Input.Password;
+const InputField = withLocale(InputFieldInner);
+InputField.Password = withLocale(PasswordInner);
 
-const _excluded$2 = ["soFarText", "startProps", "endProps"];
+const _excluded$2 = ["soFarText", "soFarValue"];
 const {
   useOnChange: useOnChange$6
 } = hooks;
-const PickerToday = _ref => {
+const PickerTodayInner = _ref => {
   let {
       soFarText,
-      startProps,
-      endProps
+      soFarValue = 'soFar'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  const {
+    formatMessage
+  } = useIntl();
   const [data, onChange] = useControlValue(props);
-  const ref_d = useRef();
-  const newData = useMemo(() => {
-    // console.log('......', data);
-    const s = get(data, 0, '');
-    const d = get(data, 1, '');
-    const p = get(props, ['placeholder'], ['开始日期', '结束日期']);
+  const [openStart, setOpenStart] = useState(false);
+  const [openEnd, setOpenEnd] = useState(false);
+  const [tempStart, setTempStart] = useState(null); // 临时存储开始时间
+  const [tempEnd, setTempEnd] = useState(null); // 临时存储结束时间
+  const [hovering, setHovering] = useState(false); // hover 状态
+  const containerRef = useRef(null);
+  const isSwitchingRef = useRef(false); // 标记是否正在切换到结束时间选择
+
+  const soFarLabel = soFarText || formatMessage({
+    id: 'SoFar'
+  });
+
+  // 判断是否有值
+  const hasValue = useMemo(() => {
+    const [start, end] = data || [];
+    return !!(start || end);
+  }, [data]);
+
+  // 判断是否为"至今"
+  const isSoFar = useMemo(() => {
+    const [, end] = data || [];
+    return end === soFarValue;
+  }, [data, soFarValue]);
+
+  // 解析数据
+  const parsedValue = useMemo(() => {
+    const [start, end] = data || [];
     return {
-      start: s ? dayjs(s) : '',
-      end: d === '至今' ? null : d ? dayjs(d) : '',
-      showZj: d === '至今',
-      placeholder: p
+      start: start ? dayjs(start) : null,
+      end: isSoFar ? null : end ? dayjs(end) : null
     };
+  }, [data, isSoFar]);
+
+  // 显示文本 - 弹窗打开时显示临时值，关闭后显示实际值
+  const displayText = useMemo(() => {
+    // 开始时间：有临时值时显示临时值
+    const startText = tempStart ? tempStart.format('YYYY-MM-DD') : parsedValue.start ? parsedValue.start.format('YYYY-MM-DD') : '';
+
+    // 结束时间：有临时值时显示临时值
+    const endText = tempEnd ? tempEnd.format('YYYY-MM-DD') : isSoFar ? soFarLabel : parsedValue.end ? parsedValue.end.format('YYYY-MM-DD') : '';
+    return {
+      start: startText,
+      end: endText
+    };
+  }, [parsedValue, isSoFar, soFarLabel, tempStart, tempEnd]);
+
+  // 点击整个Input框时，先弹出开始时间选择
+  const handleInputClick = useCallback(() => {
+    const [start] = data || [];
+    setTempStart(start ? dayjs(start) : null);
+    setOpenStart(true);
+    setOpenEnd(false);
   }, [data]);
-  const startChange = v => {
-    // 比较日期大小
-    if (!newData.showZj && newData.end && v && newData.end.isBefore(v)) {
-      onChange([newData.end, v]);
-      return;
+
+  // 清除值
+  const handleClear = useCallback(e => {
+    e.stopPropagation();
+    onChange([]);
+    setTempStart(null);
+    setTempEnd(null);
+    setOpenStart(false);
+    setOpenEnd(false);
+  }, [onChange]);
+
+  // 处理开始时间变化
+  const handleStartChange = useCallback(date => {
+    setTempStart(date);
+    isSwitchingRef.current = true; // 标记正在切换
+    setOpenStart(false);
+    setTimeout(() => {
+      setOpenEnd(true);
+      isSwitchingRef.current = false;
+    }, 100);
+  }, []);
+
+  // 处理结束时间变化（选择日期时实时更新显示，选择后确认值）
+  const handleEndChange = useCallback(date => {
+    if (date) {
+      // 选择了有效日期，确认值
+      if (!tempStart) return;
+      onChange([tempStart.toISOString(), date.toISOString()]);
+      setOpenEnd(false);
+      setTempStart(null);
+      setTempEnd(null);
+    } else {
+      // 清空选择
+      setTempEnd(null);
     }
-    onChange([v || '', newData.showZj ? '至今' : newData.end]);
-  };
-  const endChange = v => {
-    if (newData.start && v && v.isBefore(newData.start)) {
-      onChange([v, newData.start]);
-      return;
+  }, [tempStart, onChange]);
+
+  // 点击"至今"按钮
+  const handleSoFarClick = useCallback(() => {
+    if (!tempStart) return;
+    onChange([tempStart.toISOString(), soFarValue]);
+    setOpenEnd(false);
+    setTempStart(null);
+    setTempEnd(null);
+  }, [tempStart, onChange, soFarValue]);
+
+  // 处理开始时间弹窗关闭（未完成选择）
+  const handleStartOpenChange = useCallback(open => {
+    if (!open) {
+      setOpenStart(false);
+      // 如果不是正在切换到结束时间，则清空临时状态
+      if (!isSwitchingRef.current) {
+        setTempStart(null);
+      }
     }
-    onChange([newData.start, v || '']);
-  };
-  const foot = () => {
-    return /*#__PURE__*/React.createElement(Button, {
-      type: newData.showZj ? 'primary' : 'default',
-      onClick: v => {
-        ref_d.current.blur();
-        onChange([newData.start || '', '至今']);
+  }, []);
+
+  // 处理结束时间弹窗关闭（未完成选择）
+  const handleEndOpenChange = useCallback(open => {
+    if (!open) {
+      setOpenEnd(false);
+      // 关闭结束时间弹窗时，不修改field值
+      setTempStart(null);
+      setTempEnd(null);
+    }
+  }, []);
+
+  // 结束时间面板变化时更新临时值（用于实时显示）
+  const handleEndPanelChange = useCallback(date => {
+    setTempEnd(date);
+  }, []);
+
+  // 空的 footer（用于开始时间，保持高度一致）
+  const renderEmptyFooter = useCallback(() => /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 40
+    }
+  }), []);
+
+  // 带至今按钮的 footer
+  const renderExtraFooter = useCallback(() => {
+    const isCurrentSoFar = !tempStart && isSoFar;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        textAlign: 'right'
       }
-    }, soFarText || '至今');
-  };
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: isCurrentSoFar ? 'primary' : 'default',
+      onClick: handleSoFarClick
+    }, soFarLabel));
+  }, [isSoFar, tempStart, handleSoFarClick, soFarLabel]);
+
+  // 结束时间的可选日期（不能早于开始时间）
+  const endDisabledDate = useCallback(current => {
+    if (!tempStart) return false;
+    return current && current < tempStart.startOf('day');
+  }, [tempStart]);
   return /*#__PURE__*/React.createElement("div", {
+    className: "date-picker-today-container",
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "date-picker-today-inputs",
+    onClick: handleInputClick,
+    onMouseEnter: () => setHovering(true),
+    onMouseLeave: () => setHovering(false)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "date-picker-today-start"
+  }, /*#__PURE__*/React.createElement("input", {
+    readOnly: true,
+    placeholder: formatMessage({
+      id: 'StartDate'
+    }),
+    value: displayText.start,
+    className: "ant-input"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "date-picker-today-separator"
+  }, "~"), /*#__PURE__*/React.createElement("div", {
+    className: "date-picker-today-end"
+  }, /*#__PURE__*/React.createElement("input", {
+    readOnly: true,
+    placeholder: formatMessage({
+      id: 'EndDate'
+    }),
+    value: displayText.end,
+    className: `ant-input ${isSoFar ? 'so-far-active' : ''}`
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "date-picker-today-suffix"
+  }, hasValue && hovering ? /*#__PURE__*/React.createElement(CloseCircleFilled, {
+    className: "date-picker-today-clear",
+    onClick: handleClear
+  }) : /*#__PURE__*/React.createElement(CalendarOutlined, null))), /*#__PURE__*/React.createElement(DatePicker, {
+    open: openStart,
+    onOpenChange: handleStartOpenChange,
+    value: tempStart || parsedValue.start,
+    onChange: handleStartChange,
+    renderExtraFooter: renderEmptyFooter,
+    showNow: false,
+    getPopupContainer: () => containerRef.current || document.body,
     style: {
-      display: 'flex'
-    }
-  }, /*#__PURE__*/React.createElement(DatePicker, _extends({}, _extends({
-    showToday: false
-  }, props, {
-    placeholder: newData.placeholder[0]
-  }, startProps, {
-    value: newData.start
-  }), {
-    onChange: startChange
-  })), /*#__PURE__*/React.createElement("div", {
-    className: 'svg_box'
-  }, /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 1024 1024",
-    focusable: "false",
-    "data-icon": "swap-right",
-    width: "1em",
-    height: "1em",
-    fill: "currentColor",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: newData.showZj ? 'data_range_picker data_range_picker_dis' : 'data_range_picker'
-  }, /*#__PURE__*/React.createElement("span", {
-    className: newData.showZj ? 'zhijin zhijin_show' : 'zhijin'
-  }, soFarText || '至今'), /*#__PURE__*/React.createElement(DatePicker, _extends({}, _extends({
-    showToday: false
-  }, props, {
-    placeholder: newData.showZj ? '' : newData.placeholder[1]
-  }, endProps, {
-    value: newData.end
-  }), {
-    ref: ref_d,
-    onChange: endChange,
-    renderExtraFooter: foot
-  }))));
+      width: 0,
+      height: 0,
+      visibility: 'hidden',
+      position: 'absolute'
+    },
+    placement: "bottomLeft"
+  }), /*#__PURE__*/React.createElement(DatePicker, {
+    open: openEnd,
+    onOpenChange: handleEndOpenChange,
+    value: tempEnd || parsedValue.end,
+    onChange: handleEndChange,
+    onPanelChange: handleEndPanelChange,
+    disabledDate: endDisabledDate,
+    renderExtraFooter: renderExtraFooter,
+    showNow: false,
+    getPopupContainer: () => containerRef.current || document.body,
+    style: {
+      width: 0,
+      height: 0,
+      visibility: 'hidden',
+      position: 'absolute'
+    },
+    placement: "bottomLeft"
+  }));
 };
+const PickerToday = withLocale(PickerTodayInner);
 const RangePickerToday = props => {
   props = Object.assign({}, {
     fieldName: 'rangePickerToday'
@@ -370,49 +618,78 @@ const {
   RangePicker,
   WeekPicker
 } = DatePicker;
-const _DatePicker = props => {
-  props = Object.assign({}, {
+const DatePickerInner = props => {
+  const {
+    formatMessage
+  } = useIntl();
+  const mergedProps = Object.assign({}, {
     fieldName: 'datePicker'
   }, props);
   const render = useOnChange$5(Object.assign({
-    placeholder: `请选择${props.label || ''}`
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseSelect'
+    }, {
+      label: mergedProps.label || ''
+    })
+  }, mergedProps));
   return render(DatePicker);
 };
-_DatePicker.Field = DatePicker;
-const _MonthPicker = props => {
-  props = Object.assign({}, {
+DatePickerInner.Field = DatePicker;
+const MonthPickerInner = props => {
+  const {
+    formatMessage
+  } = useIntl();
+  const mergedProps = Object.assign({}, {
     fieldName: 'monthDatePicker'
   }, props);
   const render = useOnChange$5(Object.assign({
-    placeholder: ['开始时间', '结束时间']
-  }, props));
+    placeholder: [formatMessage({
+      id: 'StartTime'
+    }), formatMessage({
+      id: 'EndTime'
+    })]
+  }, mergedProps));
   return render(MonthPicker);
 };
-_MonthPicker.Field = MonthPicker;
-const _RangePicker = props => {
-  props = Object.assign({}, {
+MonthPickerInner.Field = MonthPicker;
+const RangePickerInner = props => {
+  const {
+    formatMessage
+  } = useIntl();
+  const mergedProps = Object.assign({}, {
     fieldName: 'rangeDatePicker'
   }, props);
   const render = useOnChange$5(Object.assign({
-    placeholder: ['开始时间', '结束时间']
-  }, props));
+    placeholder: [formatMessage({
+      id: 'StartTime'
+    }), formatMessage({
+      id: 'EndTime'
+    })]
+  }, mergedProps));
   return render(RangePicker);
 };
-_RangePicker.Field = RangePicker;
-const _WeekPicker = props => {
-  props = Object.assign({}, {
+RangePickerInner.Field = RangePicker;
+const WeekPickerInner = props => {
+  const {
+    formatMessage
+  } = useIntl();
+  const mergedProps = Object.assign({}, {
     fieldName: 'weekDatePicker'
   }, props);
   const render = useOnChange$5(Object.assign({
-    placeholder: ['开始时间', '结束时间']
-  }, props));
+    placeholder: [formatMessage({
+      id: 'StartTime'
+    }), formatMessage({
+      id: 'EndTime'
+    })]
+  }, mergedProps));
   return render(WeekPicker);
 };
-_WeekPicker.Field = WeekPicker;
-_DatePicker.MonthPicker = _MonthPicker;
-_DatePicker.RangePicker = _RangePicker;
-_DatePicker.WeekPicker = _WeekPicker;
+WeekPickerInner.Field = WeekPicker;
+const _DatePicker = withLocale(DatePickerInner);
+_DatePicker.MonthPicker = withLocale(MonthPickerInner);
+_DatePicker.RangePicker = withLocale(RangePickerInner);
+_DatePicker.WeekPicker = withLocale(WeekPickerInner);
 
 const {
   useOnChange: useOnChange$4