YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update date time format

Browse Source
This commit is contained in:
johnnyjoy
2025-06-03 21:22:14 +08:00
parent 6d319900d6
commit 94d1e20570
2 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/components/DateTimeInput.tsx
View File

@@ -1,34 +1,34 @@
import dayjs from "dayjs"; import dayjs from "dayjs";
import { isEqual } from "lodash-es";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { cn } from "@/utils"; import { cn } from "@/utils";
const DATE_TIME_FORMAT = "M/D/YYYY, H:mm:ss";
// convert Date to datetime string. // convert Date to datetime string.
const formatDate = (date: Date | undefined): string => { const formatDate = (date: Date): string => {
return dayjs(date).format("M/D/YYYY, H:mm:ss"); return dayjs(date).format(DATE_TIME_FORMAT);
}; };
interface Props { interface Props {
value: Date | undefined; value: Date;
originalValue: Date | undefined;
onChange: (date: Date) => void; onChange: (date: Date) => void;
} }
const DateTimeInput: React.FC<Props> = ({ value, originalValue, onChange }) => { const DateTimeInput: React.FC<Props> = ({ value, onChange }) => {
return ( return (
<input <input
type="text" type="text"
className={cn( className={cn(
"px-1 bg-transparent rounded text-xs transition-all", "px-1 bg-transparent rounded text-xs transition-all",
"border-transparent outline-none focus:border-gray-300 dark:focus:border-zinc-700", "border-transparent outline-none focus:border-gray-300 dark:focus:border-zinc-700",
!isEqual(value, originalValue) && "border-gray-300 dark:border-zinc-700",
"border", "border",
)} )}
defaultValue={formatDate(value)} defaultValue={formatDate(value)}
onBlur={(e) => { onBlur={(e) => {
const inputValue = e.target.value; const inputValue = e.target.value;
if (inputValue) { if (inputValue) {
const date = new Date(inputValue); const date = dayjs(inputValue, DATE_TIME_FORMAT, true).toDate();
// Check if the date is valid.
if (!isNaN(date.getTime())) { if (!isNaN(date.getTime())) {
onChange(date); onChange(date);
} else { } else {
@@ -37,7 +37,7 @@ const DateTimeInput: React.FC<Props> = ({ value, originalValue, onChange }) => {
} }
} }
}} }}
placeholder="M/D/YYYY, H:mm:ss" placeholder={DATE_TIME_FORMAT}
/> />
); );
}; };

16
web/src/components/MemoEditor/index.tsx
View File

@@ -74,8 +74,6 @@ const MemoEditor = observer((props: Props) => {
}); });
const [createTime, setCreateTime] = useState<Date | undefined>(); const [createTime, setCreateTime] = useState<Date | undefined>();
const [updateTime, setUpdateTime] = useState<Date | undefined>(); const [updateTime, setUpdateTime] = useState<Date | undefined>();
const [originalCreateTime, setOriginalCreateTime] = useState<Date | undefined>();
const [originalUpdateTime, setOriginalUpdateTime] = useState<Date | undefined>();
const [hasContent, setHasContent] = useState<boolean>(false); const [hasContent, setHasContent] = useState<boolean>(false);
const [isVisibilitySelectorOpen, setIsVisibilitySelectorOpen] = useState(false); const [isVisibilitySelectorOpen, setIsVisibilitySelectorOpen] = useState(false);
const editorRef = useRef<EditorRefActions>(null); const editorRef = useRef<EditorRefActions>(null);
@@ -125,8 +123,6 @@ const MemoEditor = observer((props: Props) => {
handleEditorFocus(); handleEditorFocus();
setCreateTime(memo.createTime); setCreateTime(memo.createTime);
setUpdateTime(memo.updateTime); setUpdateTime(memo.updateTime);
setOriginalCreateTime(memo.createTime);
setOriginalUpdateTime(memo.updateTime);
setState((prevState) => ({ setState((prevState) => ({
...prevState, ...prevState,
memoVisibility: memo.visibility, memoVisibility: memo.visibility,
@@ -550,14 +546,18 @@ const MemoEditor = observer((props: Props) => {
{memoName && ( {memoName && (
<div className="w-full -mt-1 mb-4 text-xs leading-5 px-4 opacity-60 font-mono text-gray-500 dark:text-zinc-500"> <div className="w-full -mt-1 mb-4 text-xs leading-5 px-4 opacity-60 font-mono text-gray-500 dark:text-zinc-500">
<div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-0.5 items-center"> <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-0.5 items-center">
{!isEqual(createTime, updateTime) && ( {!isEqual(createTime, updateTime) && updateTime && (
<> <>
<span className="text-left">Updated</span> <span className="text-left">Updated</span>
<DateTimeInput value={updateTime} originalValue={originalUpdateTime} onChange={setUpdateTime} /> <DateTimeInput value={updateTime} onChange={setUpdateTime} />
</>
)}
{createTime && (
<>
<span className="text-left">Created</span>
<DateTimeInput value={createTime} onChange={setCreateTime} />
</> </>
)} )}
<span className="text-left">Created</span>
<DateTimeInput value={createTime} originalValue={originalCreateTime} onChange={setCreateTime} />
<span className="text-left">ID</span> <span className="text-left">ID</span>
<span <span
className="px-1 border border-transparent cursor-default" className="px-1 border border-transparent cursor-default"