mirror of
https://github.com/usememos/memos.git
synced 2025-03-15 18:20:09 +01:00
chore: add dayjs to fix datetime format in safari
This commit is contained in:
parent
1d99dad435
commit
deae53c1f1
@ -16,6 +16,7 @@
|
||||
"@reduxjs/toolkit": "^2.2.3",
|
||||
"clsx": "^2.1.1",
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"dayjs": "^1.11.11",
|
||||
"fuse.js": "^7.0.0",
|
||||
"highlight.js": "^11.9.0",
|
||||
"i18next": "^23.11.3",
|
||||
|
6804
web/pnpm-lock.yaml
generated
6804
web/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -44,11 +44,14 @@ const TagsSection = () => {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-start items-start w-full mt-3 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar">
|
||||
<div className="flex flex-row justify-between items-center w-full mb-1">
|
||||
<div className="flex flex-row justify-start items-center w-full gap-1 mb-1">
|
||||
<span className="text-sm leading-6 font-mono text-gray-400 select-none">{t("common.tags")}</span>
|
||||
<div>
|
||||
<Tooltip title={"Rebuild"} placement="top">
|
||||
<Icon.RefreshCcw className="text-gray-400 w-4 h-auto cursor-pointer hover:opacity-80" onClick={handleRebuildMemoTags} />
|
||||
<Icon.RefreshCcw
|
||||
className="text-gray-400 w-4 h-auto cursor-pointer opacity-60 hover:opacity-100"
|
||||
onClick={handleRebuildMemoTags}
|
||||
/>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -22,6 +22,7 @@ import VisibilityIcon from "./VisibilityIcon";
|
||||
|
||||
interface Props {
|
||||
memo: Memo;
|
||||
displayTimeFormat?: "auto" | "time";
|
||||
compact?: boolean;
|
||||
showCreator?: boolean;
|
||||
showVisibility?: boolean;
|
||||
@ -70,6 +71,13 @@ const MemoView: React.FC<Props> = (props: Props) => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const displayTime =
|
||||
props.displayTimeFormat === "time" ? (
|
||||
memo.displayTime?.toLocaleTimeString()
|
||||
) : (
|
||||
<relative-time datetime={memo.displayTime?.toISOString()} format={relativeTimeFormat} tense="past"></relative-time>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
@ -98,13 +106,13 @@ const MemoView: React.FC<Props> = (props: Props) => {
|
||||
className="w-auto -mt-0.5 text-xs leading-tight text-gray-400 dark:text-gray-500 select-none"
|
||||
onClick={handleGotoMemoDetailPage}
|
||||
>
|
||||
<relative-time datetime={memo.displayTime?.toISOString()} format={relativeTimeFormat} tense="past"></relative-time>
|
||||
{displayTime}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full text-sm leading-tight text-gray-400 dark:text-gray-500 select-none" onClick={handleGotoMemoDetailPage}>
|
||||
<relative-time datetime={memo.displayTime?.toISOString()} format={relativeTimeFormat} tense="past"></relative-time>
|
||||
{displayTime}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { Button, IconButton } from "@mui/joy";
|
||||
import clsx from "clsx";
|
||||
import dayjs from "dayjs";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import ActivityCalendar from "@/components/ActivityCalendar";
|
||||
import Empty from "@/components/Empty";
|
||||
@ -31,7 +32,7 @@ const Timeline = () => {
|
||||
const [isRequesting, setIsRequesting] = useState(true);
|
||||
const nextPageTokenRef = useRef<string | undefined>(undefined);
|
||||
const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(a.displayTime) - getTimeStampByDate(b.displayTime));
|
||||
const monthString = new Date(selectedDateString).getFullYear() + "-" + (new Date(selectedDateString).getMonth() + 1);
|
||||
const monthString = dayjs(selectedDateString).format("YYYY-MM");
|
||||
|
||||
useEffect(() => {
|
||||
setIsRequesting(true);
|
||||
@ -66,8 +67,7 @@ const Timeline = () => {
|
||||
setActivityStats(
|
||||
Object.fromEntries(
|
||||
Object.entries(stats).filter(([date]) => {
|
||||
const d = new Date(date);
|
||||
return `${d.getFullYear()}-${d.getMonth() + 1}` === monthString;
|
||||
return dayjs(date).format("YYYY-MM") === monthString;
|
||||
}),
|
||||
),
|
||||
);
|
||||
@ -139,7 +139,7 @@ const Timeline = () => {
|
||||
<span className="font-medium text-3xl sm:text-4xl">
|
||||
{new Date(selectedDateString).toLocaleDateString(i18n.language, { month: "short", day: "numeric" })}
|
||||
</span>
|
||||
<span className="opacity-60 text-lg">{new Date(monthString).getFullYear()}</span>
|
||||
<span className="opacity-60 text-lg">{dayjs(monthString).year()}</span>
|
||||
</div>
|
||||
<ActivityCalendar
|
||||
month={monthString}
|
||||
@ -155,7 +155,11 @@ const Timeline = () => {
|
||||
key={`${memo.name}-${memo.displayTime}`}
|
||||
className={clsx("relative w-full flex flex-col justify-start items-start pl-4 sm:pl-10 pt-0")}
|
||||
>
|
||||
<MemoView className="!border max-w-full !border-gray-100 dark:!border-zinc-700" memo={memo} />
|
||||
<MemoView
|
||||
className="!border max-w-full !border-gray-100 dark:!border-zinc-700"
|
||||
memo={memo}
|
||||
displayTimeFormat="time"
|
||||
/>
|
||||
<div className="absolute -left-2 sm:left-2 top-4 h-full">
|
||||
{index !== sortedMemos.length - 1 && (
|
||||
<div className="absolute top-2 left-[7px] h-full w-0.5 bg-gray-200 dark:bg-gray-700 block"></div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user