index.jsx 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. import React, { useState } from 'react';
  2. import { DatePicker, ConfigProvider, ButtonGroup, Button } from '../../../index';
  3. import * as dateFns from 'date-fns';
  4. export default function Demo() {
  5. const [direction, setDirection] = useState();
  6. const presets = [
  7. {
  8. text: 'Today',
  9. start: new Date(),
  10. end: new Date(),
  11. },
  12. () => ({
  13. text: 'Tomorrow',
  14. start: new Date(new Date().valueOf() + 1000 * 3600 * 24),
  15. end: new Date(new Date().valueOf() + 1000 * 3600 * 24),
  16. }),
  17. ];
  18. return (
  19. <div>
  20. <div style={{ marginBottom: 20 }}>
  21. <ButtonGroup>
  22. <Button onClick={() => setDirection('ltr')}>LTR</Button>
  23. <Button onClick={() => setDirection('rtl')}>RTL</Button>
  24. </ButtonGroup>
  25. </div>
  26. <ConfigProvider direction={direction}>
  27. <span>compact</span>
  28. <DatePicker density="compact" />
  29. <br /><br />
  30. <span>compact+dateRange</span>
  31. <DatePicker type="dateRange" density="compact" />
  32. <br /><br />
  33. <span>compact+dateTime</span>
  34. <DatePicker type="dateTime" density="compact" defaultOpen />
  35. <br /><br />
  36. <span>compact+dateTimeRange</span>
  37. <DatePicker type="dateTimeRange" density="compact" />
  38. <br /><br />
  39. <span>compact+year/month</span>
  40. <DatePicker type="month" density="compact" />
  41. <br /><br />
  42. <span>compact+presets</span>
  43. <DatePicker type="dateTime" density="compact" presets={presets} />
  44. <br /><br />
  45. <span>compact+needConfirm</span>
  46. <DatePicker type="dateTime" density="compact" needConfirm />
  47. <br /><br />
  48. <span>compact+startDateOffset+endDateOffset</span>
  49. <DatePicker
  50. type="dateRange"
  51. density="compact"
  52. weekStartsOn={1}
  53. startDateOffset={date => dateFns.startOfWeek(date, { weekStartsOn: 1 })}
  54. endDateOffset={date => dateFns.endOfWeek(date, { weekStartsOn: 1 })}
  55. />
  56. <br /><br />
  57. </ConfigProvider>
  58. </div>
  59. );
  60. }