feat: date picker

client/src/components/DateRangePicker/index.module.scss

@@ -0,0 +1,4 @@
+.datePicker {
+  --rdp-background-color: #d6e8ff;
+  --rdp-accent-color: #0000ff;
+}

client/src/components/DateRangePicker/index.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useMemo, useRef } from 'react';
+import { Box, Card, Flex, useTheme, useOutsideClick, Button } from '@chakra-ui/react';
+import { addDays, format } from 'date-fns';
+import { type DateRange, DayPicker } from 'react-day-picker';
+import MyIcon from '../Icon';
+import 'react-day-picker/dist/style.css';
+import styles from './index.module.scss';
+import zhCN from 'date-fns/locale/zh-CN';
+
+const DateRangePicker = ({
+  onChange,
+  onSuccess,
+  position = 'bottom',
+  defaultDate = {
+    from: addDays(new Date(), -30),
+    to: new Date()
+  }
+}: {
+  onChange?: (date: DateRange) => void;
+  onSuccess?: (date: DateRange) => void;
+  position?: 'bottom' | 'top';
+  defaultDate?: DateRange;
+}) => {
+  const theme = useTheme();
+  const OutRangeRef = useRef(null);
+  const [range, setRange] = useState<DateRange | undefined>(defaultDate);
+  const [showSelected, setShowSelected] = useState(false);
+
+  const formatSelected = useMemo(() => {
+    if (range?.from && range.to) {
+      return `${format(range.from, 'y-MM-dd')} ~ ${format(range.to, 'y-MM-dd')}`;
+    }
+    return `${format(new Date(), 'y-MM-dd')} ~ ${format(new Date(), 'y-MM-dd')}`;
+  }, [range]);
+
+  useOutsideClick({
+    ref: OutRangeRef,
+    handler: () => {
+      setShowSelected(false);
+    }
+  });
+
+  return (
+    <Box position={'relative'} ref={OutRangeRef}>
+      <Flex
+        border={theme.borders.base}
+        px={3}
+        py={1}
+        borderRadius={'sm'}
+        cursor={'pointer'}
+        bg={'myWhite.600'}
+        fontSize={'sm'}
+        onClick={() => setShowSelected(true)}
+      >
+        <Box>{formatSelected}</Box>
+        <MyIcon ml={2} name={'date'} w={'16px'} color={'myGray.600'} />
+      </Flex>
+      {showSelected && (
+        <Card
+          position={'absolute'}
+          zIndex={1}
+          {...(position === 'top'
+            ? {
+                bottom: '40px'
+              }
+            : {})}
+        >
+          <DayPicker
+            locale={zhCN}
+            id="test"
+            mode="range"
+            className={styles.datePicker}
+            defaultMonth={defaultDate.to}
+            selected={range}
+            disabled={[
+              { from: new Date(2022, 3, 1), to: addDays(new Date(), -90) },
+              { from: addDays(new Date(), 1), to: new Date(2099, 1, 1) }
+            ]}
+            onSelect={(date) => {
+              if (date?.from === undefined) {
+                date = {
+                  from: range?.from,
+                  to: range?.from
+                };
+              }
+              if (date?.to === undefined) {
+                date.to = date.from;
+              }
+              setRange(date);
+              onChange && onChange(date);
+            }}
+            footer={
+              <Flex justifyContent={'flex-end'}>
+                <Button
+                  variant={'outline'}
+                  size={'sm'}
+                  mr={2}
+                  onClick={() => setShowSelected(false)}
+                >
+                  取消
+                </Button>
+                <Button
+                  size={'sm'}
+                  onClick={() => {
+                    onSuccess && onSuccess(range || defaultDate);
+                    setShowSelected(false);
+                  }}
+                >
+                  确认
+                </Button>
+              </Flex>
+            }
+          />
+        </Card>
+      )}
+    </Box>
+  );
+};
+
+export default DateRangePicker;
+export type DateRangeType = DateRange;

client/src/components/Icon/icons/date.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686832863390" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4120" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M782.84 188.75h-43.15v-60.46c0-16.57-13.43-30-30-30s-30 13.43-30 30v60.46H371.88v-60.46c0-16.57-13.43-30-30-30s-30 13.43-30 30v60.46H250.5c-66.17 0-120 53.83-120 120v494.47c0 66.17 53.83 120 120 120h532.33c66.17 0 120-53.83 120-120V308.75c0.01-66.17-53.82-120-119.99-120z m-532.34 60h61.37v133.63c0 16.57 13.43 30 30 30s30-13.43 30-30V248.75h307.81v133.63c0 16.57 13.43 30 30 30s30-13.43 30-30V248.75h43.15c33.08 0 60 26.92 60 60V649.5H190.5V308.75c0-33.08 26.92-60 60-60z m532.34 614.47H250.5c-33.08 0-60-26.92-60-60V709.5h652.33v93.72c0.01 33.08-26.91 60-59.99 60z" p-id="4121"></path></svg>

client/src/components/Icon/index.tsx

@@ -33,7 +33,8 @@ const map = {
   export: require('./icons/export.svg').default,
   text: require('./icons/text.svg').default,
   history: require('./icons/history.svg').default,
-  kbTest: require('./icons/kbTest.svg').default
+  kbTest: require('./icons/kbTest.svg').default,
+  date: require('./icons/date.svg').default
 };
 
 export type IconName = keyof typeof map;