aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: use date-picker instead of raw datetime input

Browse Source
pull/4046/head
johnnyjoy 6 months ago
parent 199d5680e6
commit cf1be81de2
4 changed files with 51 additions and 17 deletions
Show Stats Download Patch File Download Diff File

1
web/package.json
Unescape Escape View File

@ -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",

42
web/pnpm-lock.yaml
Unescape Escape View File

@ -80,6 +80,9 @@ importers:
react:
specifier: ^18.3.1
version: 18.3.1
react-datepicker:
specifier: ^7.5.0
version: 7.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react-dom:
specifier: ^18.3.1
version: 18.3.1(react@18.3.1)
@ -655,6 +658,12 @@ packages:
react: '>=16.8.0'
react-dom: '>=16.8.0'
'@floating-ui/react@0.26.25':
resolution: {integrity: sha512-hZOmgN0NTOzOuZxI1oIrDu3Gcl8WViIkvPMpB4xdd4QD6xAMtwgwr3VPoiyH/bLtRcS1cDnhxLSD1NsMJmwh/A==}
peerDependencies:
react: '>=16.8.0'
react-dom: '>=16.8.0'
'@floating-ui/utils@0.2.8':
resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
@ -1834,6 +1843,9 @@ packages:
resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==}
engines: {node: '>= 0.4'}
date-fns@3.6.0:
resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
dayjs@1.11.13:
resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
@ -2810,6 +2822,12 @@ packages:
queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
react-datepicker@7.5.0:
resolution: {integrity: sha512-6MzeamV8cWSOcduwePHfGqY40acuGlS1cG//ePHT6bVbLxWyqngaStenfH03n1wbzOibFggF66kWaBTb1SbTtQ==}
peerDependencies:
react: ^16.9.0 || ^17 || ^18
react-dom: ^16.9.0 || ^17 || ^18
react-dom@18.3.1:
resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
peerDependencies:
@ -3167,6 +3185,9 @@ packages:
resolution: {integrity: sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==}
engines: {node: ^14.18.0 || >=16.0.0}
tabbable@6.2.0:
resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
tailwind-merge@2.5.2:
resolution: {integrity: sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==}
@ -3902,6 +3923,14 @@ snapshots:
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
'@floating-ui/react@0.26.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
dependencies:
'@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@floating-ui/utils': 0.2.8
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
tabbable: 6.2.0
'@floating-ui/utils@0.2.8': {}
'@github/relative-time-element@4.4.3': {}
@ -5132,6 +5161,8 @@ snapshots:
es-errors: 1.3.0
is-data-view: 1.0.1
date-fns@3.6.0: {}
dayjs@1.11.13: {}
debug@4.3.7:
@ -6227,6 +6258,15 @@ snapshots:
queue-microtask@1.2.3: {}
react-datepicker@7.5.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@floating-ui/react': 0.26.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
clsx: 2.1.1
date-fns: 3.6.0
prop-types: 15.8.1
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
react-dom@18.3.1(react@18.3.1):
dependencies:
loose-envify: 1.4.0
@ -6632,6 +6672,8 @@ snapshots:
'@pkgr/core': 0.1.1
tslib: 2.7.0
tabbable@6.2.0: {}
tailwind-merge@2.5.2: {}
tailwindcss-animate@1.0.7(tailwindcss@3.4.12):

18
web/src/components/MemoEditor/index.tsx
Unescape Escape View File

@ -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} />

7
web/src/components/UserStatisticsView.tsx
Unescape Escape View File

@ -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>

Write Preview
Loading…
Cancel
Save