@kne/react-form-antd 4.0.2 → 4.1.0

package/dist/index.js

@@ -4,8 +4,9 @@ var ReactForm = require('@kne/react-form');
 var reactFormHelper = require('@kne/react-form-helper');
 var merge = require('lodash/merge');
 var antd = require('antd');
+var reactIntl = require('@kne/react-intl');
+var icons = require('@ant-design/icons');
 var dayjs = require('dayjs');
-var lodash = require('lodash');
 var useControlValue = require('@kne/use-control-value');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -58,7 +59,7 @@ var preset = (function (props) {
   ReactForm.preset(globalParams.rules);
 });
 
-var _excluded$4 = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "type", "size", "children"];
+var _excluded$5 = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "type", "size", "children"];
 var ScrollToError = reactFormHelper.widget.ScrollToError,
   EnterSubmit = reactFormHelper.widget.EnterSubmit,
   FormStore = reactFormHelper.widget.FormStore,
@@ -76,7 +77,7 @@ var Form = React.forwardRef(function (originProps, ref) {
       block: 'center'
     } : _originProps$scrollPr,
     children = originProps.children,
-    props = _objectWithoutPropertiesLoose(originProps, _excluded$4);
+    props = _objectWithoutPropertiesLoose(originProps, _excluded$5);
   var baseClass = 'react-form';
   var computedClass = baseClass;
   var _Object$assign = Object.assign({
@@ -111,54 +112,121 @@ var Form = React.forwardRef(function (originProps, ref) {
   }) : null, enterSubmit ? /*#__PURE__*/React__default["default"].createElement(EnterSubmit, null, maxLabel) : maxLabel)));
 });
 
+var locale$1 = {
+  PleaseSelect: '请选择{label}',
+  PleaseInput: '请输入{label}',
+  StartTime: '开始时间',
+  EndTime: '结束时间',
+  StartDate: '开始日期',
+  EndDate: '结束日期',
+  SoFar: '至今'
+};
+
+var locale = {
+  PleaseSelect: 'Please select {label}',
+  PleaseInput: 'Please enter {label}',
+  StartTime: 'Start Time',
+  EndTime: 'End Time',
+  StartDate: 'Start Date',
+  EndDate: 'End Date',
+  SoFar: 'Present'
+};
+
+var _excluded$4 = ["locale"];
+var localeMap = {
+  'zh-CN': locale$1,
+  'en-US': locale
+};
+var withLocale = function withLocale(WrappedComponent) {
+  var WithLocaleComponent = function WithLocaleComponent(_ref) {
+    var _ref$locale = _ref.locale,
+      locale = _ref$locale === void 0 ? 'zh-CN' : _ref$locale,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    var messages = localeMap[locale] || locale$1;
+    return /*#__PURE__*/React__default["default"].createElement(reactIntl.IntlProvider, {
+      locale: locale,
+      messages: messages
+    }, /*#__PURE__*/React__default["default"].createElement(WrappedComponent, props));
+  };
+  WithLocaleComponent.displayName = "withLocale(" + (WrappedComponent.displayName || WrappedComponent.name || 'Component') + ")";
+  return WithLocaleComponent;
+};
+
 var useOnChange$b = reactFormHelper.hooks.useOnChange;
-var _TreeSelect = function _TreeSelect(props) {
-  props = Object.assign({}, {
+var TreeSelectInner = function TreeSelectInner(props) {
+  var _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var mergedProps = Object.assign({}, {
     fieldName: 'treeSelect'
   }, props);
   var render = useOnChange$b(Object.assign({
-    placeholder: "\u8BF7\u9009\u62E9" + (props.label || '')
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseSelect'
+    }, {
+      label: mergedProps.label || ''
+    })
+  }, mergedProps));
   return render(antd.TreeSelect);
 };
-_TreeSelect.Field = antd.TreeSelect;
-_TreeSelect.TreeNode = antd.TreeSelect.TreeNode;
+TreeSelectInner.Field = antd.TreeSelect;
+TreeSelectInner.TreeNode = antd.TreeSelect.TreeNode;
+var _TreeSelect = withLocale(TreeSelectInner);
 
 var useOnChange$a = reactFormHelper.hooks.useOnChange;
 var RangePicker$1 = antd.TimePicker.RangePicker;
-var _TimePicker = function _TimePicker(props) {
-  props = Object.assign({}, {
+var TimePickerInner = function TimePickerInner(props) {
+  var _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var mergedProps = Object.assign({}, {
     fieldName: 'timePicker'
   }, props);
   var render = useOnChange$a(Object.assign({
-    placeholder: "\u8BF7\u9009\u62E9" + (props.label || '')
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseSelect'
+    }, {
+      label: mergedProps.label || ''
+    })
+  }, mergedProps));
   return render(antd.TimePicker);
 };
-_TimePicker.Field = antd.TimePicker;
-var _RangePicker$1 = function _RangePicker(props) {
-  props = Object.assign({}, {
+TimePickerInner.Field = antd.TimePicker;
+var RangePickerInner$1 = function RangePickerInner(props) {
+  var _useIntl2 = reactIntl.useIntl(),
+    formatMessage = _useIntl2.formatMessage;
+  var mergedProps = Object.assign({}, {
     fieldName: 'rangeTimePicker'
   }, props);
   var render = useOnChange$a(Object.assign({
-    placeholder: "\u8BF7\u9009\u62E9" + (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;
+var _TimePicker = withLocale(TimePickerInner);
+_TimePicker.RangePicker = withLocale(RangePickerInner$1);
 
 var useDecorator$2 = reactFormHelper.hooks.useDecorator;
-var TextArea = function TextArea(props) {
-  props = Object.assign({}, {
+var TextAreaInner = function TextAreaInner(props) {
+  var _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var mergedProps = Object.assign({}, {
     fieldName: 'textArea'
   }, props);
   var render = useDecorator$2(Object.assign({
-    placeholder: "\u8BF7\u8F93\u5165" + props.label
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseInput'
+    }, {
+      label: mergedProps.label
+    })
+  }, mergedProps));
   return render(antd.Input.TextArea);
 };
-TextArea.Field = antd.Input.TextArea;
+TextAreaInner.Field = antd.Input.TextArea;
+var TextArea = withLocale(TextAreaInner);
 
 var useOnChange$9 = reactFormHelper.hooks.useOnChange,
   useCheckedToValue$1 = reactFormHelper.hooks.useCheckedToValue;
@@ -175,18 +243,25 @@ var Switch = function Switch(props) {
 Switch.Field = antd.Switch;
 
 var useOnChange$8 = reactFormHelper.hooks.useOnChange;
-var _Select = function _Select(props) {
-  props = Object.assign({}, {
+var SelectInner = function SelectInner(props) {
+  var _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var mergedProps = Object.assign({}, {
     fieldName: 'select'
   }, props);
   var render = useOnChange$8(Object.assign({
-    placeholder: "\u8BF7\u9009\u62E9" + (props.label || '')
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseSelect'
+    }, {
+      label: mergedProps.label || ''
+    })
+  }, mergedProps));
   return render(antd.Select);
 };
-_Select.Field = antd.Select;
-_Select.Option = antd.Select.Option;
-_Select.OptGroup = antd.Select.OptGroup;
+SelectInner.Field = antd.Select;
+SelectInner.Option = antd.Select.Option;
+SelectInner.OptGroup = antd.Select.OptGroup;
+var _Select = withLocale(SelectInner);
 
 var _excluded$3 = ["onChange"];
 var useOnChange$7 = reactFormHelper.hooks.useOnChange;
@@ -211,129 +286,319 @@ _RadioGroup.Field = RadioGroup;
 _RadioGroup.Radio = antd.Radio;
 
 var useDecorator$1 = reactFormHelper.hooks.useDecorator;
-var InputNumberField = function InputNumberField(props) {
-  props = Object.assign({}, {
+var InputNumberFieldInner = function InputNumberFieldInner(props) {
+  var _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var mergedProps = Object.assign({}, {
     fieldName: 'inputNumber',
     autoComplete: 'off'
   }, props);
   var render = useDecorator$1(Object.assign({
-    placeholder: "\u8BF7\u8F93\u5165" + props.label
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseInput'
+    }, {
+      label: mergedProps.label
+    })
+  }, mergedProps));
   return render(antd.InputNumber);
 };
-InputNumberField.Field = antd.InputNumber;
+InputNumberFieldInner.Field = antd.InputNumber;
+var InputNumberField = withLocale(InputNumberFieldInner);
 
 var useDecorator = reactFormHelper.hooks.useDecorator;
-var InputField = function InputField(props) {
-  props = Object.assign({}, {
+var InputFieldInner = function InputFieldInner(props) {
+  var _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var mergedProps = Object.assign({}, {
     fieldName: 'input',
     autoComplete: 'off'
   }, props);
   var render = useDecorator(Object.assign({
-    placeholder: "\u8BF7\u8F93\u5165" + props.label
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseInput'
+    }, {
+      label: mergedProps.label
+    })
+  }, mergedProps));
   return render(antd.Input);
 };
-InputField.Field = antd.Input;
-InputField.Password = function (props) {
-  props = Object.assign({}, {
+InputFieldInner.Field = antd.Input;
+var PasswordInner = function PasswordInner(props) {
+  var _useIntl2 = reactIntl.useIntl(),
+    formatMessage = _useIntl2.formatMessage;
+  var mergedProps = Object.assign({}, {
     fieldName: 'password',
     autoComplete: 'off'
   }, props);
   var render = useDecorator(Object.assign({
-    placeholder: "\u8BF7\u8F93\u5165" + props.label
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseInput'
+    }, {
+      label: mergedProps.label
+    })
+  }, mergedProps));
   return render(antd.Input.Password);
 };
-InputField.Password.Field = antd.Input.Password;
+PasswordInner.Field = antd.Input.Password;
+var InputField = withLocale(InputFieldInner);
+InputField.Password = withLocale(PasswordInner);
 
-var _excluded$2 = ["soFarText", "startProps", "endProps"];
+var _excluded$2 = ["soFarText", "soFarValue"];
 var useOnChange$6 = reactFormHelper.hooks.useOnChange;
-var PickerToday = function PickerToday(_ref) {
+var PickerTodayInner = function PickerTodayInner(_ref) {
   var soFarText = _ref.soFarText,
-    startProps = _ref.startProps,
-    endProps = _ref.endProps,
+    _ref$soFarValue = _ref.soFarValue,
+    soFarValue = _ref$soFarValue === void 0 ? 'soFar' : _ref$soFarValue,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var _useControlValue = useControlValue__default["default"](props),
     data = _useControlValue[0],
     onChange = _useControlValue[1];
-  var ref_d = React.useRef();
-  var newData = React.useMemo(function () {
-    // console.log('......', data);
-    var s = lodash.get(data, 0, '');
-    var d = lodash.get(data, 1, '');
-    var p = lodash.get(props, ['placeholder'], ['开始日期', '结束日期']);
+  var _useState = React.useState(false),
+    openStart = _useState[0],
+    setOpenStart = _useState[1];
+  var _useState2 = React.useState(false),
+    openEnd = _useState2[0],
+    setOpenEnd = _useState2[1];
+  var _useState3 = React.useState(null),
+    tempStart = _useState3[0],
+    setTempStart = _useState3[1]; // 临时存储开始时间
+  var _useState4 = React.useState(null),
+    tempEnd = _useState4[0],
+    setTempEnd = _useState4[1]; // 临时存储结束时间
+  var _useState5 = React.useState(false),
+    hovering = _useState5[0],
+    setHovering = _useState5[1]; // hover 状态
+  var containerRef = React.useRef(null);
+  var isSwitchingRef = React.useRef(false); // 标记是否正在切换到结束时间选择
+
+  var soFarLabel = soFarText || formatMessage({
+    id: 'SoFar'
+  });
+
+  // 判断是否有值
+  var hasValue = React.useMemo(function () {
+    var _ref2 = data || [],
+      start = _ref2[0],
+      end = _ref2[1];
+    return !!(start || end);
+  }, [data]);
+
+  // 判断是否为"至今"
+  var isSoFar = React.useMemo(function () {
+    var _ref3 = data || [],
+      end = _ref3[1];
+    return end === soFarValue;
+  }, [data, soFarValue]);
+
+  // 解析数据
+  var parsedValue = React.useMemo(function () {
+    var _ref4 = data || [],
+      start = _ref4[0],
+      end = _ref4[1];
+    return {
+      start: start ? dayjs__default["default"](start) : null,
+      end: isSoFar ? null : end ? dayjs__default["default"](end) : null
+    };
+  }, [data, isSoFar]);
+
+  // 显示文本 - 弹窗打开时显示临时值，关闭后显示实际值
+  var displayText = React.useMemo(function () {
+    // 开始时间：有临时值时显示临时值
+    var startText = tempStart ? tempStart.format('YYYY-MM-DD') : parsedValue.start ? parsedValue.start.format('YYYY-MM-DD') : '';
+
+    // 结束时间：有临时值时显示临时值
+    var endText = tempEnd ? tempEnd.format('YYYY-MM-DD') : isSoFar ? soFarLabel : parsedValue.end ? parsedValue.end.format('YYYY-MM-DD') : '';
     return {
-      start: s ? dayjs__default["default"](s) : '',
-      end: d === '至今' ? null : d ? dayjs__default["default"](d) : '',
-      showZj: d === '至今',
-      placeholder: p
+      start: startText,
+      end: endText
     };
+  }, [parsedValue, isSoFar, soFarLabel, tempStart, tempEnd]);
+
+  // 点击整个Input框时，先弹出开始时间选择
+  var handleInputClick = React.useCallback(function () {
+    var _ref5 = data || [],
+      start = _ref5[0];
+    setTempStart(start ? dayjs__default["default"](start) : null);
+    setOpenStart(true);
+    setOpenEnd(false);
   }, [data]);
-  var startChange = function startChange(v) {
-    // 比较日期大小
-    if (!newData.showZj && newData.end && v && newData.end.isBefore(v)) {
-      onChange([newData.end, v]);
-      return;
+
+  // 清除值
+  var handleClear = React.useCallback(function (e) {
+    e.stopPropagation();
+    onChange([]);
+    setTempStart(null);
+    setTempEnd(null);
+    setOpenStart(false);
+    setOpenEnd(false);
+  }, [onChange]);
+
+  // 处理开始时间变化
+  var handleStartChange = React.useCallback(function (date) {
+    setTempStart(date);
+    isSwitchingRef.current = true; // 标记正在切换
+    setOpenStart(false);
+    setTimeout(function () {
+      setOpenEnd(true);
+      isSwitchingRef.current = false;
+    }, 100);
+  }, []);
+
+  // 处理结束时间变化（选择日期时实时更新显示，选择后确认值）
+  var handleEndChange = React.useCallback(function (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]);
-  };
-  var endChange = function endChange(v) {
-    if (newData.start && v && v.isBefore(newData.start)) {
-      onChange([v, newData.start]);
-      return;
+  }, [tempStart, onChange]);
+
+  // 点击"至今"按钮
+  var handleSoFarClick = React.useCallback(function () {
+    if (!tempStart) return;
+    onChange([tempStart.toISOString(), soFarValue]);
+    setOpenEnd(false);
+    setTempStart(null);
+    setTempEnd(null);
+  }, [tempStart, onChange, soFarValue]);
+
+  // 处理开始时间弹窗关闭（未完成选择）
+  var handleStartOpenChange = React.useCallback(function (open) {
+    if (!open) {
+      setOpenStart(false);
+      // 如果不是正在切换到结束时间，则清空临时状态
+      if (!isSwitchingRef.current) {
+        setTempStart(null);
+      }
     }
-    onChange([newData.start, v || '']);
-  };
-  var foot = function foot() {
-    return /*#__PURE__*/React__default["default"].createElement(antd.Button, {
-      type: newData.showZj ? 'primary' : 'default',
-      onClick: function onClick(v) {
-        ref_d.current.blur();
-        onChange([newData.start || '', '至今']);
+  }, []);
+
+  // 处理结束时间弹窗关闭（未完成选择）
+  var handleEndOpenChange = React.useCallback(function (open) {
+    if (!open) {
+      setOpenEnd(false);
+      // 关闭结束时间弹窗时，不修改field值
+      setTempStart(null);
+      setTempEnd(null);
+    }
+  }, []);
+
+  // 结束时间面板变化时更新临时值（用于实时显示）
+  var handleEndPanelChange = React.useCallback(function (date) {
+    setTempEnd(date);
+  }, []);
+
+  // 空的 footer（用于开始时间，保持高度一致）
+  var renderEmptyFooter = React.useCallback(function () {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        height: 40
       }
-    }, soFarText || '至今');
-  };
+    });
+  }, []);
+
+  // 带至今按钮的 footer
+  var renderExtraFooter = React.useCallback(function () {
+    var isCurrentSoFar = !tempStart && isSoFar;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        textAlign: 'right'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(antd.Button, {
+      type: isCurrentSoFar ? 'primary' : 'default',
+      onClick: handleSoFarClick
+    }, soFarLabel));
+  }, [isSoFar, tempStart, handleSoFarClick, soFarLabel]);
+
+  // 结束时间的可选日期（不能早于开始时间）
+  var endDisabledDate = React.useCallback(function (current) {
+    if (!tempStart) return false;
+    return current && current < tempStart.startOf('day');
+  }, [tempStart]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      display: 'flex'
+    className: "date-picker-today-container",
+    ref: containerRef
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "date-picker-today-inputs",
+    onClick: handleInputClick,
+    onMouseEnter: function onMouseEnter() {
+      return setHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHovering(false);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(antd.DatePicker, _extends({}, _extends({
-    showToday: false
-  }, props, {
-    placeholder: newData.placeholder[0]
-  }, startProps, {
-    value: newData.start
-  }), {
-    onChange: startChange
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: 'svg_box'
-  }, /*#__PURE__*/React__default["default"].createElement("svg", {
-    viewBox: "0 0 1024 1024",
-    focusable: "false",
-    "data-icon": "swap-right",
-    width: "1em",
-    height: "1em",
-    fill: "currentColor",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
-    className: newData.showZj ? 'data_range_picker data_range_picker_dis' : 'data_range_picker'
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: newData.showZj ? 'zhijin zhijin_show' : 'zhijin'
-  }, soFarText || '至今'), /*#__PURE__*/React__default["default"].createElement(antd.DatePicker, _extends({}, _extends({
-    showToday: false
-  }, props, {
-    placeholder: newData.showZj ? '' : newData.placeholder[1]
-  }, endProps, {
-    value: newData.end
-  }), {
-    ref: ref_d,
-    onChange: endChange,
-    renderExtraFooter: foot
-  }))));
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "date-picker-today-start"
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
+    readOnly: true,
+    placeholder: formatMessage({
+      id: 'StartDate'
+    }),
+    value: displayText.start,
+    className: "ant-input"
+  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "date-picker-today-separator"
+  }, "~"), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "date-picker-today-end"
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
+    readOnly: true,
+    placeholder: formatMessage({
+      id: 'EndDate'
+    }),
+    value: displayText.end,
+    className: "ant-input " + (isSoFar ? 'so-far-active' : '')
+  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "date-picker-today-suffix"
+  }, hasValue && hovering ? /*#__PURE__*/React__default["default"].createElement(icons.CloseCircleFilled, {
+    className: "date-picker-today-clear",
+    onClick: handleClear
+  }) : /*#__PURE__*/React__default["default"].createElement(icons.CalendarOutlined, null))), /*#__PURE__*/React__default["default"].createElement(antd.DatePicker, {
+    open: openStart,
+    onOpenChange: handleStartOpenChange,
+    value: tempStart || parsedValue.start,
+    onChange: handleStartChange,
+    renderExtraFooter: renderEmptyFooter,
+    showNow: false,
+    getPopupContainer: function getPopupContainer() {
+      return containerRef.current || document.body;
+    },
+    style: {
+      width: 0,
+      height: 0,
+      visibility: 'hidden',
+      position: 'absolute'
+    },
+    placement: "bottomLeft"
+  }), /*#__PURE__*/React__default["default"].createElement(antd.DatePicker, {
+    open: openEnd,
+    onOpenChange: handleEndOpenChange,
+    value: tempEnd || parsedValue.end,
+    onChange: handleEndChange,
+    onPanelChange: handleEndPanelChange,
+    disabledDate: endDisabledDate,
+    renderExtraFooter: renderExtraFooter,
+    showNow: false,
+    getPopupContainer: function getPopupContainer() {
+      return containerRef.current || document.body;
+    },
+    style: {
+      width: 0,
+      height: 0,
+      visibility: 'hidden',
+      position: 'absolute'
+    },
+    placement: "bottomLeft"
+  }));
 };
+var PickerToday = withLocale(PickerTodayInner);
 var RangePickerToday = function RangePickerToday(props) {
   props = Object.assign({}, {
     fieldName: 'rangePickerToday'
@@ -347,49 +612,74 @@ var useOnChange$5 = reactFormHelper.hooks.useOnChange;
 var MonthPicker = antd.DatePicker.MonthPicker,
   RangePicker = antd.DatePicker.RangePicker,
   WeekPicker = antd.DatePicker.WeekPicker;
-var _DatePicker = function _DatePicker(props) {
-  props = Object.assign({}, {
+var DatePickerInner = function DatePickerInner(props) {
+  var _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var mergedProps = Object.assign({}, {
     fieldName: 'datePicker'
   }, props);
   var render = useOnChange$5(Object.assign({
-    placeholder: "\u8BF7\u9009\u62E9" + (props.label || '')
-  }, props));
+    placeholder: formatMessage({
+      id: 'PleaseSelect'
+    }, {
+      label: mergedProps.label || ''
+    })
+  }, mergedProps));
   return render(antd.DatePicker);
 };
-_DatePicker.Field = antd.DatePicker;
-var _MonthPicker = function _MonthPicker(props) {
-  props = Object.assign({}, {
+DatePickerInner.Field = antd.DatePicker;
+var MonthPickerInner = function MonthPickerInner(props) {
+  var _useIntl2 = reactIntl.useIntl(),
+    formatMessage = _useIntl2.formatMessage;
+  var mergedProps = Object.assign({}, {
     fieldName: 'monthDatePicker'
   }, props);
   var render = useOnChange$5(Object.assign({
-    placeholder: ['开始时间', '结束时间']
-  }, props));
+    placeholder: [formatMessage({
+      id: 'StartTime'
+    }), formatMessage({
+      id: 'EndTime'
+    })]
+  }, mergedProps));
   return render(MonthPicker);
 };
-_MonthPicker.Field = MonthPicker;
-var _RangePicker = function _RangePicker(props) {
-  props = Object.assign({}, {
+MonthPickerInner.Field = MonthPicker;
+var RangePickerInner = function RangePickerInner(props) {
+  var _useIntl3 = reactIntl.useIntl(),
+    formatMessage = _useIntl3.formatMessage;
+  var mergedProps = Object.assign({}, {
     fieldName: 'rangeDatePicker'
   }, props);
   var render = useOnChange$5(Object.assign({
-    placeholder: ['开始时间', '结束时间']
-  }, props));
+    placeholder: [formatMessage({
+      id: 'StartTime'
+    }), formatMessage({
+      id: 'EndTime'
+    })]
+  }, mergedProps));
   return render(RangePicker);
 };
-_RangePicker.Field = RangePicker;
-var _WeekPicker = function _WeekPicker(props) {
-  props = Object.assign({}, {
+RangePickerInner.Field = RangePicker;
+var WeekPickerInner = function WeekPickerInner(props) {
+  var _useIntl4 = reactIntl.useIntl(),
+    formatMessage = _useIntl4.formatMessage;
+  var mergedProps = Object.assign({}, {
     fieldName: 'weekDatePicker'
   }, props);
   var 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;
+var _DatePicker = withLocale(DatePickerInner);
+_DatePicker.MonthPicker = withLocale(MonthPickerInner);
+_DatePicker.RangePicker = withLocale(RangePickerInner);
+_DatePicker.WeekPicker = withLocale(WeekPickerInner);
 
 var useOnChange$4 = reactFormHelper.hooks.useOnChange;
 var _CheckboxGroup = antd.Checkbox.Group;