Skip to content

use localized datetime #599

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
paboldin wants to merge 1 commit into
base: main
Choose a base branch
from
Open

use localized datetime #599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/(dashboard)/peer/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -628,7 +628,7 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
</>
}
value={
dayjs(peer.created_at).format("D MMMM, YYYY [at] h:mm A") +
dayjs(peer.created_at).format("L [at] LT") +
" (" +
dayjs().to(peer.created_at) +
")"
Expand All @@ -646,7 +646,7 @@ function PeerInformationCard({ peer }: Readonly<{ peer: Peer }>) {
value={
peer.connected
? "just now"
: dayjs(peer.last_seen).format("D MMMM, YYYY [at] h:mm A") +
: dayjs(peer.last_seen).format("L [at] LT") +
" (" +
dayjs().to(peer.last_seen) +
")"
Expand Down
2 changes: 1 addition & 1 deletion src/app/(dashboard)/team/user/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,7 +402,7 @@ function UserInformationCard({ user }: Readonly<{ user: User }>) {
value={
neverLoggedIn
? "Never"
: dayjs(user.last_login).format("D MMMM, YYYY [at] h:mm A") +
: dayjs(user.last_login).format("L [at] LT") +
" (" +
dayjs().to(user.last_login) +
")"
Expand Down
4 changes: 2 additions & 2 deletions src/app/invite/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ function InviteAcceptContent() {
</div>

<p className="text-center text-xs text-nb-gray-500">
Invite expires on {dayjs(inviteInfo.expires_at).format("D MMMM, YYYY [at] h:mm A")}
Invite expires on {dayjs(inviteInfo.expires_at).format("L [at] LT")}
</p>
</div>
</div>
Expand All @@ -318,4 +318,4 @@ function PasswordRule({ met, text }: { met: boolean; text: string }) {
<span className={met ? "text-green-500" : "text-nb-gray-500"}>{text}</span>
</div>
);
}
}
6 changes: 3 additions & 3 deletions src/components/DatePickerWithRange.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,10 @@ export function DatePickerWithRange({
if (isActive.yesterday) return "Yesterday";
if (isActive.today) return "Today";

if (!value.to) return dayjs(value.from).format("MMM DD, YYYY").toString();
return `${dayjs(value.from).format("MMM DD, YYYY")} - ${dayjs(
if (!value.to) return dayjs(value.from).format("L").toString();
return `${dayjs(value.from).format("L")} - ${dayjs(
value.to,
).format("MMM DD, YYYY")}`;
).format("L")}`;
Comment on lines +90 to +93
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Mar 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Search for localizedFormat plugin extension in the codebase

# Check if localizedFormat plugin is imported and extended
rg -n "localizedFormat" --type=ts --type=tsx -C3

Repository: netbirdio/dashboard

Length of output: 90

🏁 Script executed:

#!/bin/bash
# Check for localizedFormat plugin usage with correct rg syntax
rg -n "localizedFormat" -C3

Repository: netbirdio/dashboard

Length of output: 983

🏁 Script executed:

#!/bin/bash
# Check the actual code in DatePickerWithRange.tsx
cat -n src/components/DatePickerWithRange.tsx | sed -n '85,95p'

Repository: netbirdio/dashboard

Length of output: 515

Remove redundant .toString() call on line 90.

dayjs().format() already returns a string, so the .toString() call is unnecessary. The localizedFormat plugin is properly extended in AppLayout.tsx, so the "L" format token will work correctly.

🧹 Suggested fix 
-    if (!value.to) return dayjs(value.from).format("L").toString();
+    if (!value.to) return dayjs(value.from).format("L");
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (!value.to) return dayjs(value.from).format("L").toString();
return `${dayjs(value.from).format("L")} - ${dayjs(
value.to,
).format("MMM DD, YYYY")}`;
).format("L")}`;
if (!value.to) return dayjs(value.from).format("L");
return `${dayjs(value.from).format("L")} - ${dayjs(
value.to,
).format("L")}`;
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/components/DatePickerWithRange.tsx` around lines 90 - 93, The conditional
return in the DatePickerWithRange component uses
dayjs(value.from).format("L").toString() which is redundant because
dayjs().format() already returns a string; remove the unnecessary .toString() so
the early return becomes dayjs(value.from).format("L") and leave the range
return unchanged (the code referencing value.from and value.to should remain the
same).

}, [value, isActive]);

const [calendarOpen, setCalendarOpen] = useState(false);
Expand Down
29 changes: 29 additions & 0 deletions src/layouts/AppLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { TooltipProvider } from "@components/Tooltip";
import { cn } from "@utils/helpers";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import localizedFormat from "dayjs/plugin/localizedFormat";
import { Viewport } from "next";
import localFont from "next/font/local";
import React, { Suspense } from "react";
Expand All @@ -28,6 +29,34 @@ const inter = localFont({

// Extend dayjs with relativeTime plugin
dayjs.extend(relativeTime);
// Extend dayjs with localizedFormat plugin
dayjs.extend(localizedFormat);

(() => {
if (typeof window !== "undefined") {
const languages = Array.of(navigator.language, navigator.languages).flat();
let candidates = new Set();

for (let language of languages) {
language = language.toLowerCase();
candidates.add(language);
candidates.add(language.split("-")[0]);
}

(async () => {
for (const locale of candidates) {
try {
await import(`dayjs/locale/${locale}`);
dayjs.locale(locale);
return;
} catch {
// try next candidate
}
}
dayjs.locale("en");
})();
}
})();
Comment thread
coderabbitai[bot] marked this conversation as resolved.

export const viewport: Viewport = {
width: "device-width",
Expand Down
2 changes: 1 addition & 1 deletion src/modules/activity/ActivityEntryRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export const ActivityEntryRow = ({ event }: { event: ActivityEvent }) => {
className={"flex gap-2 items-center text-nb-gray-400 text-xs mr-1"}
>
<div className={"h-1 w-1 bg-nb-gray-700 rounded-full"}></div>
{dayjs(event?.timestamp).format("MMM D, YYYY [at] h:mm:s A")}
{dayjs(event?.timestamp).format("L [at] LT")}
</span>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/modules/common-table-rows/ExpirationDateRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function ExpirationDateRow({ date }: Props) {
}
>
<Calendar size={14} />
{dayjs(date).format("ddd, D MMMM YYYY")}
{dayjs(date).format("l, L")}
</div>
);
}
2 changes: 1 addition & 1 deletion src/modules/common-table-rows/LastTimeRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function LastTimeRow({
<div className={"text-neutral-300 flex flex-col gap-1"}>
<span className={"text-xs"}>{text}</span>
<span className={"text-neutral-200"}>
{dayjs(date).format("D MMMM, YYYY [at] h:mm A")}
{dayjs(date).format("L [at] LT")}
</span>
</div>
</TooltipContent>
Expand Down
4 changes: 2 additions & 2 deletions src/modules/reverse-proxy/events/ReverseProxyEventsTimeCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ export const ReverseProxyEventsTimeCell = ({ timestamp, className }: Props) => {
)}
>
<span className={"text-nb-gray-200 flex gap-2 items-center"}>
{dayjs(timestamp).format("MMM D, YYYY")}
{dayjs(timestamp).format("L")}
</span>
<span className={"text-nb-gray-400"}>
{dayjs(timestamp).format("h:mm:ss A")}
{dayjs(timestamp).format("LT")}
</span>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/modules/users/UserInvitesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,7 @@ export const InvitesTableColumns: ColumnDef<UserInvite>[] = [
sortingFn: "datetime",
cell: ({ row }) => (
<span className="text-nb-gray-400">
{dayjs(row.original.expires_at).format("D MMM, YYYY")}
{dayjs(row.original.expires_at).format("L")}
</span>
),
},
Expand Down