Merge pull request #918 from 18735185652/fix/dateRanger

fix(dateRanger): Component English translation modification
oceanbase · Jan 3, 2025 · dd170de · dd170de
2 parents 400af7f + 0d905e4
commit dd170de
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 23 deletions.
diff --git a/packages/ui/src/DateRanger/PickerPanel.tsx b/packages/ui/src/DateRanger/PickerPanel.tsx
@@ -25,7 +25,7 @@ import dayjs from 'dayjs';
 import { useUpdate } from 'ahooks';
 import { toArray } from '@oceanbase/util';
 import { getPrefix } from '../_util';
-
+import { DATE_TIME_MONTH_FORMAT, DATE_TIME_MONTH_FORMAT_CN } from './constant';
 type RangeValue = [Moment, Moment] | [Dayjs, Dayjs];
 type ValidateTrigger = 'submit' | 'valueChange';
 
@@ -54,7 +54,6 @@ export interface PickerPanelProps {
 const prefix = getPrefix('ranger-picker-panel');
 
 const prefixCls = 'ant-picker';
-const DATE_FORMAT = 'YYYY-MM-DD';
 const TIME_FORMAT = 'HH:mm:ss';
 
 const InternalPickerPanel = (props: PickerPanelProps) => {
@@ -76,6 +75,10 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
   const [calendarValue, setCalendarValue] = React.useState(defaultValue);
   const [internalHoverValues, setInternalHoverValues] = React.useState(null);
   const [activeIndex, setActiveIndex] = React.useState(0);
+  const isEn = locale?.antLocale === 'en';
+
+  //
+  const DATE_FORMAT = isEn ? DATE_TIME_MONTH_FORMAT : DATE_TIME_MONTH_FORMAT_CN;
 
   const getDateInstance = useCallback(
     (
@@ -239,7 +242,6 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
       }
     });
   };
-
   return (
     <div className={classNames(prefix)}>
       <Space direction="vertical" size={12} style={{ margin: '12px 0' }}>
@@ -414,7 +416,13 @@ const InternalPickerPanel = (props: PickerPanelProps) => {
       {errorMessage && (
         <Alert message={errorMessage} type="error" style={{ marginBottom: 8 }} showIcon></Alert>
       )}
-      <Space style={{ width: '100%', justifyContent: 'flex-end', padding: '0 12px 4px 0' }}>
+      <Space
+        style={{
+          width: '100%',
+          justifyContent: 'flex-end',
+          padding: '0 12px 4px 0',
+        }}
+      >
         <Button
           size="small"
           onClick={() => {

diff --git a/packages/ui/src/DateRanger/constant/index.ts b/packages/ui/src/DateRanger/constant/index.ts
@@ -15,18 +15,22 @@ const WEEK_UNIT = 'week';
 const MONTH_UNIT = 'month';
 const YEAR_UNIT = 'year';
 
-export const YEAR_DATE_TIME_SECOND_FORMAT = 'YYYY/MM/DD HH:mm:ss';
-export const YEAR_DATE_TIME_FORMAT = 'YYYY/MM/DD HH:mm';
+export const YEAR_DATE_TIME_SECOND_FORMAT = 'MM/DD/YYYY HH:mm:ss';
+export const YEAR_DATE_TIME_FORMAT = 'MM/DD/YYYY HH:mm';
 export const DATE_TIME_SECOND_FORMAT = 'MM/DD HH:mm:ss';
 export const DATE_TIME_FORMAT = 'MM/DD HH:mm';
+export const DATE_TIME_MONTH_FORMAT = 'MM/DD/YYYY';
+
 export const YEAR_DATE_TIME_SECOND_FORMAT_CN = 'YYYY-MM-DD HH:mm:ss';
 export const YEAR_DATE_TIME_FORMAT_CN = 'YYYY-MM-DD HH:mm';
+export const DATE_TIME_MONTH_FORMAT_CN = 'YYYY-MM-DD';
+
 export const DATE_TIME_SECOND_FORMAT_CN = 'MM-DD HH:mm:ss';
 export const DATE_TIME_FORMAT_CN = 'MM-DD HH:mm';
 
 export const NEAR_1_MINUTES: RangeOption = {
   label: '近 1 分钟',
-  enLabel: 'Nearly 1 minute',
+  enLabel: 'Last 1 Minute',
   rangeLabel: '1m',
   name: 'NEAR_1_MINUTES',
   range: (current: Moment | Dayjs = moment()) => [
@@ -37,7 +41,7 @@ export const NEAR_1_MINUTES: RangeOption = {
 
 export const NEAR_5_MINUTES: RangeOption = {
   label: '近 5 分钟',
-  enLabel: 'Nearly 5 minutes',
+  enLabel: 'Last 5 Minutes',
   rangeLabel: '5m',
   name: 'NEAR_5_MINUTES',
   range: (current: Moment | Dayjs = moment()) => [
@@ -48,7 +52,7 @@ export const NEAR_5_MINUTES: RangeOption = {
 
 export const NEAR_10_MINUTES: RangeOption = {
   label: '近 10 分钟',
-  enLabel: 'Nearly 10 minutes',
+  enLabel: 'Last 10 Minutes',
   rangeLabel: '10m',
   name: 'NEAR_10_MINUTES',
   range: (current: Moment | Dayjs = moment()) => [
@@ -59,7 +63,7 @@ export const NEAR_10_MINUTES: RangeOption = {
 
 export const NEAR_20_MINUTES: RangeOption = {
   label: '近 20 分钟',
-  enLabel: 'Nearly 20 minutes',
+  enLabel: 'Last 20 Minutes',
   rangeLabel: '20m',
   name: 'NEAR_20_MINUTES',
   range: (current: Moment | Dayjs = moment()) => [
@@ -70,7 +74,7 @@ export const NEAR_20_MINUTES: RangeOption = {
 
 export const NEAR_30_MINUTES: RangeOption = {
   label: '近 30 分钟',
-  enLabel: 'Nearly 30 minutes',
+  enLabel: 'Last 30 Minutes',
   rangeLabel: '30m',
   name: 'NEAR_30_MINUTES',
   range: (current: Moment | Dayjs = moment()) => [
@@ -81,7 +85,7 @@ export const NEAR_30_MINUTES: RangeOption = {
 
 export const NEAR_1_HOURS: RangeOption = {
   label: '近 1 小时',
-  enLabel: 'Nearly 1 hour',
+  enLabel: 'Last 1 Hour',
   rangeLabel: '1h',
   name: 'NEAR_1_HOURS',
   range: (current: Moment | Dayjs = moment()) => [
@@ -92,7 +96,7 @@ export const NEAR_1_HOURS: RangeOption = {
 
 export const NEAR_2_HOURS: RangeOption = {
   label: '近 2 小时',
-  enLabel: 'Nearly 2 hours',
+  enLabel: 'Last 2 Hours',
   rangeLabel: '2h',
   name: 'NEAR_2_HOURS',
   range: (current: Moment | Dayjs = moment()) => [
@@ -103,7 +107,7 @@ export const NEAR_2_HOURS: RangeOption = {
 
 export const NEAR_3_HOURS: RangeOption = {
   label: '近 3 小时',
-  enLabel: 'Nearly 3 hours',
+  enLabel: 'Last 3 Hours',
   rangeLabel: '3h',
   name: 'NEAR_3_HOURS',
   range: (current: Moment | Dayjs = moment()) => [
@@ -114,7 +118,7 @@ export const NEAR_3_HOURS: RangeOption = {
 
 export const NEAR_6_HOURS: RangeOption = {
   label: '近 6 小时',
-  enLabel: 'Nearly 6 hours',
+  enLabel: 'Last 6 Hours',
   rangeLabel: '6h',
   name: 'NEAR_6_HOURS',
   range: (current: Moment | Dayjs = moment()) => [
@@ -147,7 +151,7 @@ export const YESTERDAY: RangeOption = {
 
 export const LAST_3_DAYS: RangeOption = {
   label: '近 3 天',
-  enLabel: 'Nearly 3 days',
+  enLabel: 'Last 3 Days',
   rangeLabel: '3d',
   name: 'LAST_3_DAYS',
   range: (current: Moment | Dayjs = moment()) => [

diff --git a/packages/ui/src/DateRanger/locale/en-US.ts b/packages/ui/src/DateRanger/locale/en-US.ts
@@ -3,13 +3,13 @@ import en_US from 'rc-picker/es/locale/en_US';
 export default {
   customize: 'Custom',
   customTime: 'Custom Time',
-  startDate: 'Start date',
-  startTime: 'Start time',
-  endDate: 'End date',
-  endTime: 'End time',
-  cancel: 'cancel',
-  confirm: 'confirm',
-  current: 'current',
+  startDate: 'Start Date',
+  startTime: 'Start Time',
+  endDate: 'End Date',
+  endTime: 'End Time',
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  current: 'Current',
   jumpBack: 'Previous Interval',
   jumpForward: 'Next Interval',
   ...en_US,