mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 17:19:11 +08:00
fd0d8b6031
* docs: fix typos * Update index.zh-CN.md * test: update snapshot * docs: fix demo ref * chore: force trigger ci * chore: force trigger ci * chore: bump dumi ver --------- Co-authored-by: Amumu <yoyo837@hotmail.com> Co-authored-by: 二货机器人 <smith3816@gmail.com>
55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { DatePicker, Space } from 'antd';
|
|
import dayjs from 'dayjs';
|
|
import type { Dayjs } from 'dayjs';
|
|
|
|
const { RangePicker } = DatePicker;
|
|
|
|
const onChange = (date: Dayjs) => {
|
|
if (date) {
|
|
console.log('Date: ', date);
|
|
} else {
|
|
console.log('Clear');
|
|
}
|
|
};
|
|
const onRangeChange = (dates: null | (Dayjs | null)[], dateStrings: string[]) => {
|
|
if (dates) {
|
|
console.log('From: ', dates[0], ', to: ', dates[1]);
|
|
console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
|
|
} else {
|
|
console.log('Clear');
|
|
}
|
|
};
|
|
|
|
const rangePresets: {
|
|
label: string;
|
|
value: [Dayjs, Dayjs];
|
|
}[] = [
|
|
{ label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
|
|
{ label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
|
|
{ label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
|
|
{ label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },
|
|
];
|
|
|
|
const App: React.FC = () => (
|
|
<Space direction="vertical" size={12}>
|
|
<DatePicker
|
|
presets={[
|
|
{ label: 'Yesterday', value: dayjs().add(-1, 'd') },
|
|
{ label: 'Last Week', value: dayjs().add(-7, 'd') },
|
|
{ label: 'Last Month', value: dayjs().add(-1, 'month') },
|
|
]}
|
|
onChange={onChange}
|
|
/>
|
|
<RangePicker presets={rangePresets} onChange={onRangeChange} />
|
|
<RangePicker
|
|
presets={rangePresets}
|
|
showTime
|
|
format="YYYY/MM/DD HH:mm:ss"
|
|
onChange={onRangeChange}
|
|
/>
|
|
</Space>
|
|
);
|
|
|
|
export default App;
|