feat(design): DatePicker add format and global format demo

packages/design/src/date-picker/demo/basic.tsx

@@ -7,7 +7,7 @@ const onChange: DatePickerProps['onChange'] = (date, dateString) => {
 };
 
 const App: React.FC = () => (
-  <Space direction="vertical">
+  <Space direction="vertical" size={12}>
     <DatePicker onChange={onChange} />
     <DatePicker onChange={onChange} showTime />
     <DatePicker onChange={onChange} picker="week" />

packages/design/src/date-picker/demo/format.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { DatePicker, Space } from '@oceanbase/design';
+import type { DatePickerProps } from '@oceanbase/design';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
+
+const { RangePicker } = DatePicker;
+
+const dateFormat = 'YYYY/MM/DD';
+const weekFormat = 'MM/DD';
+const monthFormat = 'YYYY/MM';
+
+const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY', 'DD-MM-YYYY', 'DD-MM-YY'];
+
+const customFormat: DatePickerProps['format'] = value =>
+  `custom format: ${value.format(dateFormat)}`;
+
+const customWeekStartEndFormat: DatePickerProps['format'] = value =>
+  `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
+    .endOf('week')
+    .format(weekFormat)}`;
+
+const App: React.FC = () => (
+  <Space direction="vertical" size={12}>
+    <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />
+    <DatePicker defaultValue={dayjs('01/01/2015', dateFormatList[0])} format={dateFormatList} />
+    <DatePicker defaultValue={dayjs('2015/01', monthFormat)} format={monthFormat} picker="month" />
+    <DatePicker defaultValue={dayjs()} format={customWeekStartEndFormat} picker="week" />
+    <RangePicker
+      defaultValue={[dayjs('2015/01/01', dateFormat), dayjs('2015/01/01', dateFormat)]}
+      format={dateFormat}
+    />
+    <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={customFormat} />
+  </Space>
+);
+
+export default App;

packages/design/src/date-picker/demo/global-format.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { ConfigProvider, DatePicker, Radio, Space, Switch } from '@oceanbase/design';
+import type { DatePickerProps } from '@oceanbase/design';
+import enUS from '@oceanbase/design/locale/en-US';
+import zhCN from '@oceanbase/design/locale/zh-CN';
+import dayjs from 'dayjs';
+
+const App: React.FC = () => {
+  const [locale, setLocale] = useState('en-US');
+  const [timezone, setTimezone] = useState(false);
+
+  const onChange: DatePickerProps['onChange'] = (_, dateStr) => {
+    console.log('onChange:', dateStr);
+  };
+
+  const timezoneFormat = (format: string) => {
+    return timezone ? `${format} (UTC+8)` : format;
+  };
+
+  const enUSLocale: typeof enUS = {
+    ...enUS,
+    DatePicker: {
+      ...enUS.DatePicker!,
+      lang: {
+        ...enUS.DatePicker?.lang,
+        fieldDateFormat: timezoneFormat('MM/DD/YYYY'),
+        fieldDateTimeFormat: timezoneFormat('MM/DD/YYYY HH:mm:ss'),
+      },
+    },
+  };
+
+  const zhCNLocale: typeof zhCN = {
+    ...zhCN,
+    DatePicker: {
+      ...zhCN.DatePicker!,
+      lang: {
+        ...zhCN.DatePicker?.lang,
+        fieldDateFormat: timezoneFormat('YYYY-MM-DD'),
+        fieldDateTimeFormat: timezoneFormat('YYYY-MM-DD HH:mm:ss'),
+      },
+    },
+  };
+
+  return (
+    <Space direction="vertical" size={12}>
+      <Space>
+        locale:
+        <Radio.Group
+          value={locale}
+          onChange={e => {
+            setLocale(e.target.value);
+          }}
+        >
+          <Radio value="en-US">en-US</Radio>
+          <Radio value="zh-CN">zh-CN</Radio>
+        </Radio.Group>
+      </Space>
+      <Space>
+        timezone:
+        <Switch
+          size="small"
+          value={timezone}
+          onChange={value => {
+            setTimezone(value);
+          }}
+        />
+      </Space>
+      <ConfigProvider locale={locale === 'en-US' ? enUSLocale : zhCNLocale}>
+        <Space direction="vertical">
+          <DatePicker defaultValue={dayjs('2024-01-01')} onChange={onChange} />
+          <DatePicker defaultValue={dayjs('2024-01-01')} onChange={onChange} showTime />
+        </Space>
+      </ConfigProvider>
+    </Space>
+  );
+};
+
+export default App;

packages/design/src/date-picker/index.md

@@ -15,6 +15,8 @@ demo:
 <!-- prettier-ignore -->
 <code src="./demo/basic.tsx" title="基本"></code> 
 <code src="./demo/range-picker.tsx" title="范围选择器"></code>
+<code src="./demo/format.tsx" title="日期格式" description="通过 `format` 属性进行设置，支持数组。"></code>
+<code src="./demo/global-format.tsx" title="全局设置日期格式" description="通过 ConfigProvider `locale` 属性进行设置。"></code>
 
 ## API
 

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

@@ -1,4 +1,4 @@
-import enUS from '@oceanbase/design/es/locale/en-US';
+import enUS from '@oceanbase/design/locale/en-US';
 import BasicLayout from '../BasicLayout/locale/en-US';
 import BatchOperationBar from '../BatchOperationBar/locale/en-US';
 import Boundary from '../Boundary/locale/en-US';