ant-design/components/date-picker/demo/buddhist-era.tsx

64 lines
1.6 KiB
TypeScript
Raw Normal View History

refactor: New Picker interactive (#46685) * chore: init * chore: link picker * chore: move files * chore: update style * chore: update types * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * test: fix test case * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * chore: clesn up useless types * chore: update types * chore: fix types * chore: fix types * chore: fix types * chore: fix types * chore: fix types * chore: fix types * chore: fix types * chore: fix types * chore: fix types * chore: update style * chore: clean up * chore: update types * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * fix: format * chore: update deps * chore: feature merge master (#46794) * fix: Fix typo s/Notificaiton/Notification/ (#46775) * docs: supplement form preserve field description (#46788) close https://github.com/ant-design/ant-design/issues/46773 * docs: tweak changelog drawer width in small screen (#46791) * docs: Update compatible-style.zh-CN.md (#46790) Signed-off-by: afc163 <afc163@gmail.com> --------- Signed-off-by: afc163 <afc163@gmail.com> Co-authored-by: hugo-syn <61210734+hugo-syn@users.noreply.github.com> Co-authored-by: Shunze Chen <qianlonwork@outlook.com> Co-authored-by: afc163 <afc163@gmail.com> * chore: update locale size * chore: lock dumi * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot * chore: bump version * test: update snapshot * test: update snapshot * chore: bump version * chore: update limit * test: update snapshot * docs: update 7 days sample * chore: rm useless style * chore: clean up style * docs: add buddihist era demo * refactor: interface * chore: add multiple types * docs: add demo * chore: init style * chore: init style * chore: fill style * chore: fill style * chore: style * chore: size of it * chore: size style * docs: add align demo * docs: needConfirm * chore: fix showWeek style * test: update snapshot * chore: fix ts * chore: fix ts * chore: fix ts * chore: fix ts * fix: week style * docs: update dayjs note * fix: style missing * chore: fix footer extra style missing * test: update snapshot * test: update snapshot * test: update snapshot * test: update snapshot --------- Signed-off-by: afc163 <afc163@gmail.com> Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: hugo-syn <61210734+hugo-syn@users.noreply.github.com> Co-authored-by: Shunze Chen <qianlonwork@outlook.com> Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: lijianan <574980606@qq.com>
2024-01-15 15:41:40 +08:00
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;