fix(DatePicker2): Translation compliant with international standards

components/date-picker2/__docs__/demo/format/index.tsx

@@ -37,6 +37,9 @@ function App() {
             <div>
                 <DatePicker2 defaultValue={defaultVal} format={customizeFormatter} />
             </div>
+            <div>
+                <DatePicker2 defaultValue={defaultVal} format="MMM D, YYYY" />
+            </div>
         </div>
     );
 }

components/date-picker2/__tests__/index-spec.js

@@ -8,6 +8,8 @@ import dayjs from 'dayjs';
 import co from 'co';
 import moment from 'moment';
 import DatePicker from '../index';
+import { ConfigProvider } from '@alifd/next';
+import en from '@alifd/next/lib/locale/en-us';
 import Form from '../../form/index';
 import Field from '../../field/index';
 import { DATE_PICKER_MODE } from '../constant';
@@ -1169,6 +1171,17 @@ describe('Picker', () => {
             wrapper.find('.next-range-picker-left .next-calendar2-header-text-field button').simulate('click');
             assert(wrapper.find('.next-calendar2-table-decade').length);
         })
+
+        // fix https://github.com/alibaba-fusion/next/issues/4788
+        it('The English translation does not comply with international standards', () => {
+            wrapper = mount(
+                <ConfigProvider locale={en}>
+                    <DatePicker defaultValue="2020-02-02" format="MMM D, YYYY" defaultVisible />
+                </ConfigProvider>
+            );
+            assert(getStrValue() === 'Feb 2, 2020');
+            assert(wrapper.find(`.next-calendar2-header-text-field`).text() === `Feb2020`);
+        })
     });
 });
 

components/locale/en-us.ts

@@ -45,6 +45,7 @@ const locale: Locale = {
         hour: 'H',
         minute: 'M',
         second: 'S',
+        monthBeforeYear: true,
     },
     Dialog: {
         close: 'Close',

components/locale/types.ts

@@ -61,6 +61,7 @@ export interface BaseLocale extends LocaleConfig {
         hour: string;
         minute: string;
         second: string;
+        monthBeforeYear?: boolean;
     };
     Dialog: Partial<{
         close: string;