feat(components/date-picker): 国际化

Author: mengxinssfd

packages/components/src/config-provider/config-provider.types.ts

@@ -1,12 +1,14 @@
 import type {
   PopConfirmLocale,
+  DatePickerLocale,
   CalendarLocale,
   SelectLocale,
   InputLocale,
   EmptyLocale,
 } from '../';
 
 export interface Locale {
+  datePicker: Partial<DatePickerLocale>;
   popConfirm: Partial<PopConfirmLocale>;
   calendar: Partial<CalendarLocale>;
   select: Partial<SelectLocale>;

packages/components/src/date-picker/DatePicker.tsx

@@ -11,10 +11,12 @@ import type {
 } from './date-picker.types';
 import { DatePickerInputBox, DatePickerPanel } from './components';
 import { getClassNames, castArray } from '@tool-pack/basic';
+import { useLocale } from '~/config-provider/useLocale';
 import { Calendar as CalendarIcon } from '@pkg/icons';
 import type { RequiredPart } from '@tool-pack/types';
 import { transitionCBAdapter } from '~/transition';
 import { InputPopover } from '~/input-popover';
+import EnUS from '~/date-picker/locale/en-US';
 import React, { useRef } from 'react';
 import { Divider } from '~/divider';
 import { Icon } from '~/icon';
@@ -30,6 +32,7 @@ const _DatePicker: React.FC<DatePickerProps> = React.forwardRef<
   HTMLLabelElement,
   DatePickerProps
 >((props, ref) => {
+  const locale = useLocale('datePicker', EnUS);
   const {
     value: outerValue,
     dateDisabled,
@@ -64,6 +67,7 @@ const _DatePicker: React.FC<DatePickerProps> = React.forwardRef<
       popoverProps={{
         content: (
           <DatePickerPanel
+            confirmText={locale.confirmText}
             dateDisabled={dateDisabled}
             onConfirm={onConfirm}
             shortcuts={shortcuts}
@@ -115,9 +119,10 @@ const _DatePicker: React.FC<DatePickerProps> = React.forwardRef<
       };
     }
     const inputIcon = <Icon>{icon || <CalendarIcon />}</Icon>;
-    const FC = (index: 0 | 1) => (
+    const FC = (index: 0 | 1, placeholder: string) => (
       <DatePickerInputBox
         onChange={onChange(index)}
+        placeholder={placeholder}
         format={inputBoxFormular}
         isOpenedRef={isOpenedRef}
         value={value[index]}
@@ -128,12 +133,12 @@ const _DatePicker: React.FC<DatePickerProps> = React.forwardRef<
       </DatePickerInputBox>
     );
 
-    if (!range) return FC(0);
+    if (!range) return FC(0, locale.placeholder);
     return (
       <>
-        {FC(0)}
+        {FC(0, locale.rangePlaceholder[0])}
         <Divider vertical />
-        {FC(1)}
+        {FC(1, locale.rangePlaceholder[1])}
         {inputIcon}
       </>
     );

packages/components/src/date-picker/components/dp.InputBox.tsx

@@ -9,6 +9,7 @@ interface Props
   inputRef: Ref<HTMLInputElement>;
   isOpenedRef: RefObject<boolean>;
   children?: React.ReactNode;
+  placeholder: string;
 }
 
 const cls = getClasses('date-picker-input-box', [], []);
@@ -17,6 +18,7 @@ export const DatePickerInputBox: React.FC<Props> = (props) => {
   const {
     value: date,
     isOpenedRef,
+    placeholder,
     onChange,
     children,
     disabled,
@@ -35,8 +37,8 @@ export const DatePickerInputBox: React.FC<Props> = (props) => {
       <input
         onClickCapture={handleInputClick}
         onChange={handleInputChange}
+        placeholder={placeholder}
         disabled={disabled}
-        placeholder="选择时间"
         ref={inputRef}
         value={value}
         tabIndex={-1}

packages/components/src/date-picker/components/dp.Panel.tsx

@@ -27,6 +27,7 @@ interface Props
     Required<Pick<DatePickerProps, 'range' | 'type'>> {
   onChange: (value: RangeValueType) => void;
   onConfirm?: () => void;
+  confirmText: string;
   values: Values;
 }
 
@@ -40,6 +41,7 @@ export const DatePickerPanel: React.FC<Props> = (props) => {
   const {
     shortcuts = [],
     dateDisabled,
+    confirmText,
     onConfirm,
     dateCell,
     onChange,
@@ -77,7 +79,7 @@ export const DatePickerPanel: React.FC<Props> = (props) => {
         </Space>
         <div>
           <Button onClick={onConfirm} type="primary" size="small">
-            确定
+            {confirmText}
           </Button>
         </div>
       </div>

packages/components/src/date-picker/components/picker/YearMonth.picker.tsx

@@ -1,6 +1,8 @@
 import { useFollowingState, getClasses } from '@pkg/shared';
+import { useLocale } from '~/config-provider/useLocale';
 import { PickerOption, Picker } from '~/picker';
 import { createArray } from '@tool-pack/basic';
+import EnUS from '~/calendar/locale/en-US';
 import React from 'react';
 
 interface Props {
@@ -13,6 +15,7 @@ const cls = getClasses('date-picker-year-month-picker', ['label', 'pop'], []);
 
 export const YearMonthPicker: React.FC<Props> = (props) => {
   const { value: date, panelRef, onChange } = props;
+  const locale = useLocale('calendar', EnUS);
 
   const [value, setValue] = useFollowingState(date, (v) =>
     v ? [v.getFullYear(), v.getMonth() + 1] : [],
@@ -29,7 +32,11 @@ export const YearMonthPicker: React.FC<Props> = (props) => {
             appendTo: null,
           },
         }}
-        format={(v) => `${v[0]}年${v[1]}月`}
+        format={(v) => {
+          const ym = [v[0], locale.monthNames[v[1]! - 1]!];
+          if (locale.monthBeforeYear) ym.reverse();
+          return ym.join(' ');
+        }}
         evenlyDivided={false}
         onChange={_onChange}
         options={Options}

packages/components/src/date-picker/date-picker.types.ts

@@ -39,3 +39,9 @@ export interface DatePickerTypeProps<Range extends boolean = false>
 export type DatePickerFC = <Range extends boolean = false>(
   props: DatePickerTypeProps<Range>,
 ) => React.ReactElement;
+
+export interface DatePickerLocale {
+  rangePlaceholder: [startTime: string, endTime: string];
+  confirmText: string;
+  placeholder: string;
+}

packages/components/src/date-picker/index.ts

@@ -1,2 +1,6 @@
-export type { DatePickerProps, DatePickerFC } from './date-picker.types';
+export type {
+  DatePickerLocale,
+  DatePickerProps,
+  DatePickerFC,
+} from './date-picker.types';
 export * from './DatePicker';

packages/components/src/date-picker/locale/en-US.ts

@@ -0,0 +1,9 @@
+import type { DatePickerLocale } from '../date-picker.types';
+
+const locale: DatePickerLocale = {
+  rangePlaceholder: ['Start time', 'End time'],
+  placeholder: 'Select time',
+  confirmText: 'confirm',
+};
+
+export default locale;

packages/components/src/date-picker/locale/zh-CN.ts

@@ -0,0 +1,9 @@
+import type { DatePickerLocale } from '../date-picker.types';
+
+const locale: DatePickerLocale = {
+  rangePlaceholder: ['开始时间', '结束时间'],
+  placeholder: '选择时间',
+  confirmText: '确认',
+};
+
+export default locale;

packages/react-ui/src/locale/en-US.ts

@@ -1,3 +1,4 @@
+import datePicker from '@pkg/components/date-picker/locale/en-US';
 import popConfirm from '@pkg/components/pop-confirm/locale/en-US';
 import calendar from '@pkg/components/calendar/locale/en-US';
 import select from '@pkg/components/select/locale/en-US';
@@ -7,6 +8,7 @@ import type { Locale } from '@pkg/components';
 
 export default {
   popConfirm,
+  datePicker,
   calendar,
   select,
   empty,

packages/react-ui/src/locale/zh-CN.ts

@@ -1,12 +1,14 @@
 import popConfirm from '@pkg/components/pop-confirm/locale/zh-CN';
 import calendar from '@pkg/components/calendar/locale/zh-CN';
 import empty from '@pkg/components/empty/locale/zh-CN';
+import datePicker from '~/date-picker/locale/zh-CN';
 import type { Locale } from '@pkg/components';
 import select from '~/select/locale/zh-CN';
 import input from '~/input/locale/zh-CN';
 
 export default {
   popConfirm,
+  datePicker,
   calendar,
   select,
   empty,