123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- import React, { useState } from 'react';
- import { DatePicker, ConfigProvider, ButtonGroup, Button } from '../../../index';
- import * as dateFns from 'date-fns';
- export default function Demo() {
- const [direction, setDirection] = useState();
- const presets = [
- {
- text: 'Today',
- start: new Date(),
- end: new Date(),
- },
- () => ({
- text: 'Tomorrow',
- start: new Date(new Date().valueOf() + 1000 * 3600 * 24),
- end: new Date(new Date().valueOf() + 1000 * 3600 * 24),
- }),
- ];
- return (
- <div>
- <div style={{ marginBottom: 20 }}>
- <ButtonGroup>
- <Button onClick={() => setDirection('ltr')}>LTR</Button>
- <Button onClick={() => setDirection('rtl')}>RTL</Button>
- </ButtonGroup>
- </div>
- <ConfigProvider direction={direction}>
- <span>compact</span>
- <DatePicker density="compact" />
- <br /><br />
- <span>compact+dateRange</span>
- <DatePicker type="dateRange" density="compact" />
- <br /><br />
- <span>compact+dateTime</span>
- <DatePicker type="dateTime" density="compact" defaultOpen />
- <br /><br />
- <span>compact+dateTimeRange</span>
- <DatePicker type="dateTimeRange" density="compact" />
- <br /><br />
- <span>compact+year/month</span>
- <DatePicker type="month" density="compact" />
- <br /><br />
- <span>compact+presets</span>
- <DatePicker type="dateTime" density="compact" presets={presets} />
- <br /><br />
- <span>compact+needConfirm</span>
- <DatePicker type="dateTime" density="compact" needConfirm />
- <br /><br />
- <span>compact+startDateOffset+endDateOffset</span>
- <DatePicker
- type="dateRange"
- density="compact"
- weekStartsOn={1}
- startDateOffset={date => dateFns.startOfWeek(date, { weekStartsOn: 1 })}
- endDateOffset={date => dateFns.endOfWeek(date, { weekStartsOn: 1 })}
- />
- <br /><br />
- </ConfigProvider>
- </div>
- );
- }
|