fix(DatePicker): locale in DatePicker cannot override ConfigProvider locale (#30380)

* fix(DatePicker): locale in DatePicker cannot override ConfigProvider locale

close #30374

* fix: DatePicker.RangePicker

* test: add test

components/date-picker/__tests__/other.test.js

@@ -4,6 +4,9 @@ import moment from 'moment';
 import DatePicker from '..';
 import LocaleProvider from '../../locale-provider';
 import locale from '../../locale-provider/zh_CN';
+import ConfigProvider from '../../config-provider';
+import jaJP from '../../locale/ja_JP';
+import zhTW from '../locale/zh_TW';
 
 const { MonthPicker, WeekPicker } = DatePicker;
 
@@ -53,3 +56,23 @@ describe('MonthPicker and WeekPicker', () => {
     expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
   });
 });
+
+describe('Override locale setting of the ConfigProvider', () => {
+  it('DatePicker', () => {
+    const wrapper = mount(
+      <ConfigProvider locale={jaJP}>
+        <DatePicker locale={zhTW} />
+      </ConfigProvider>,
+    );
+    expect(wrapper.find('input').props().placeholder).toEqual('請選擇日期');
+  });
+  it('RangePicker', () => {
+    const wrapper = mount(
+      <ConfigProvider locale={jaJP}>
+        <DatePicker.RangePicker locale={zhTW} />
+      </ConfigProvider>,
+    );
+    expect(wrapper.find('input').at(0).props().placeholder).toEqual('開始日期');
+    expect(wrapper.find('input').at(1).props().placeholder).toEqual('結束日期');
+  });
+});

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -35,20 +35,8 @@ export default function generateRangePicker<DateType>(
       }
     };
 
-    getDefaultLocale = () => {
+    renderPicker = (contextLocale: PickerLocale) => {
-      const { locale } = this.props;
+      const locale = { ...contextLocale, ...this.props.locale };
-      const result = {
-        ...enUS,
-        ...locale,
-      };
-      result.lang = {
-        ...result.lang,
-        ...((locale || {}) as PickerLocale).lang,
-      };
-      return result;
-    };
-
-    renderPicker = (locale: PickerLocale) => {
       const { getPrefixCls, direction, getPopupContainer } = this.context;
       const {
         prefixCls: customizePrefixCls,
@@ -117,7 +105,7 @@ export default function generateRangePicker<DateType>(
 
     render() {
       return (
-        <LocaleReceiver componentName="DatePicker" defaultLocale={this.getDefaultLocale}>
+        <LocaleReceiver componentName="DatePicker" defaultLocale={enUS}>
           {this.renderPicker}
         </LocaleReceiver>
       );

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -58,20 +58,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         }
       };
 
-      getDefaultLocale = () => {
+      renderPicker = (contextLocale: PickerLocale) => {
-        const { locale } = this.props;
+        const locale = { ...contextLocale, ...this.props.locale };
-        const result = {
-          ...enUS,
-          ...locale,
-        };
-        result.lang = {
-          ...result.lang,
-          ...((locale || {}) as PickerLocale).lang,
-        };
-        return result;
-      };
-
-      renderPicker = (locale: PickerLocale) => {
         const { getPrefixCls, direction, getPopupContainer } = this.context;
         const {
           prefixCls: customizePrefixCls,
@@ -148,7 +136,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
 
       render() {
         return (
-          <LocaleReceiver componentName="DatePicker" defaultLocale={this.getDefaultLocale}>
+          <LocaleReceiver componentName="DatePicker" defaultLocale={enUS}>
             {this.renderPicker}
           </LocaleReceiver>
         );