mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 13:18:04 +08:00
64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
|
import React from 'react';
|
||
|
import { ConfigProvider, DatePicker, Space, Typography } from 'antd';
|
||
|
import type { DatePickerProps } from 'antd';
|
||
|
import en from 'antd/es/date-picker/locale/en_US';
|
||
|
import enUS from 'antd/es/locale/en_US';
|
||
|
import dayjs from 'dayjs';
|
||
|
import buddhistEra from 'dayjs/plugin/buddhistEra';
|
||
|
|
||
|
dayjs.extend(buddhistEra);
|
||
|
|
||
|
const { Title } = Typography;
|
||
|
|
||
|
// Component level locale
|
||
|
const buddhistLocale: typeof en = {
|
||
|
...en,
|
||
|
lang: {
|
||
|
...en.lang,
|
||
|
fieldDateFormat: 'BBBB-MM-DD',
|
||
|
fieldDateTimeFormat: 'BBBB-MM-DD HH:mm:ss',
|
||
|
yearFormat: 'BBBB',
|
||
|
cellYearFormat: 'BBBB',
|
||
|
},
|
||
|
};
|
||
|
|
||
|
// ConfigProvider level locale
|
||
|
const globalBuddhistLocale: typeof enUS = {
|
||
|
...enUS,
|
||
|
DatePicker: {
|
||
|
...enUS.DatePicker!,
|
||
|
lang: buddhistLocale.lang,
|
||
|
},
|
||
|
};
|
||
|
|
||
|
const defaultValue = dayjs('2024-01-01');
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const onChange: DatePickerProps['onChange'] = (_, dateStr) => {
|
||
|
console.log('onChange:', dateStr);
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<Space direction="vertical">
|
||
|
<Title level={4}>By locale props</Title>
|
||
|
<DatePicker defaultValue={defaultValue} locale={buddhistLocale} onChange={onChange} />
|
||
|
<DatePicker
|
||
|
defaultValue={defaultValue}
|
||
|
showTime
|
||
|
locale={buddhistLocale}
|
||
|
onChange={onChange}
|
||
|
/>
|
||
|
|
||
|
<Title level={4}>By ConfigProvider</Title>
|
||
|
<ConfigProvider locale={globalBuddhistLocale}>
|
||
|
<Space direction="vertical">
|
||
|
<DatePicker defaultValue={defaultValue} onChange={onChange} />
|
||
|
<DatePicker defaultValue={defaultValue} showTime onChange={onChange} />
|
||
|
</Space>
|
||
|
</ConfigProvider>
|
||
|
</Space>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|