You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.4 KiB
39 lines
1.4 KiB
import React from 'react';
|
|
import type { DatePickerProps } from 'antd';
|
|
import { DatePicker, Space } from 'antd';
|
|
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'];
|
|
|
|
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;
|
|
|