feat: use date-picker instead of raw datetime input

usememos · Oct 19, 2024 · cf1be81 · cf1be81
1 parent 199d568
commit cf1be81
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 17 deletions.
diff --git a/web/package.json b/web/package.json
@@ -33,6 +33,7 @@
     "lucide-react": "^0.437.0",
     "mermaid": "^11.2.1",
     "react": "^18.3.1",
+    "react-datepicker": "^7.5.0",
     "react-dom": "^18.3.1",
     "react-force-graph-2d": "^1.25.6",
     "react-hot-toast": "^2.4.1",

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
@@ -2,6 +2,8 @@ import { Select, Option, Button, Divider } from "@mui/joy";
 import { isEqual } from "lodash-es";
 import { SendIcon } from "lucide-react";
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import useLocalStorage from "react-use/lib/useLocalStorage";
@@ -428,16 +430,12 @@ const MemoEditor = (props: Props) => {
         onCompositionEnd={handleCompositionEnd}
       >
         {memoName && displayTime && (
-          <div className="relative text-sm">
-            <span className="cursor-pointer text-gray-400 dark:text-gray-500">{displayTime.toLocaleString()}</span>
-            <input
-              className="inset-0 absolute z-1 opacity-0"
-              type="datetime-local"
-              value={displayTime.toLocaleString()}
-              onFocus={(e: any) => e.target.showPicker()}
-              onChange={(e) => setDisplayTime(new Date(e.target.value))}
-            />
-          </div>
+          <DatePicker
+            selected={displayTime}
+            onChange={(date) => date && setDisplayTime(date)}
+            showTimeSelect
+            customInput={<span className="cursor-pointer text-sm text-gray-400 dark:text-gray-500">{displayTime.toLocaleString()}</span>}
+          />
         )}
         <Editor ref={editorRef} {...editorConfig} />
         <ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />

diff --git a/web/src/components/UserStatisticsView.tsx b/web/src/components/UserStatisticsView.tsx
@@ -74,13 +74,6 @@ const UserStatisticsView = () => {
         <div className="relative text-base font-medium leading-6 flex flex-row items-center dark:text-gray-400">
           <CalendarDaysIcon className="w-5 h-auto mr-1 opacity-60" strokeWidth={1.5} />
           <span>{dayjs(visibleMonthString).toDate().toLocaleString(i18n.language, { year: "numeric", month: "long" })}</span>
-          <input
-            className="inset-0 absolute z-1 opacity-0"
-            type="month"
-            value={visibleMonthString}
-            onFocus={(e: any) => e.target.showPicker()}
-            onChange={(e) => setVisibleMonthString(e.target.value || dayjs().format("YYYY-MM"))}
-          />
         </div>
         <div className="invisible group-hover:visible flex justify-end items-center">
           <Popover>