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.
54 lines
1.5 KiB
54 lines
1.5 KiB
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;
|
|
|