The Appview for the kipclip.com atproto bookmarking service
1/**
2 * Date formatting preferences.
3 * Stored in localStorage, used across all frontend components.
4 */
5
6export type DateFormatOption = "us" | "eu" | "eu-dot" | "iso" | "text";
7
8const STORAGE_KEY = "kipclip-date-format";
9
10function pad(n: number): string {
11 return n < 10 ? `0${n}` : `${n}`;
12}
13
14export const DATE_FORMATS: {
15 id: DateFormatOption;
16 label: string;
17 format: (d: Date) => string;
18}[] = [
19 {
20 id: "us",
21 label: "US",
22 format: (d) =>
23 `${pad(d.getMonth() + 1)}/${pad(d.getDate())}/${d.getFullYear()}`,
24 },
25 {
26 id: "eu",
27 label: "EU",
28 format: (d) =>
29 `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()}`,
30 },
31 {
32 id: "eu-dot",
33 label: "EU (dot)",
34 format: (d) =>
35 `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()}`,
36 },
37 {
38 id: "iso",
39 label: "ISO",
40 format: (d) =>
41 `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`,
42 },
43 {
44 id: "text",
45 label: "Text",
46 format: (d) =>
47 d.toLocaleDateString("en-US", {
48 month: "short",
49 day: "numeric",
50 year: "numeric",
51 }),
52 },
53];
54
55export function getDateFormat(): DateFormatOption {
56 try {
57 const stored = localStorage.getItem(STORAGE_KEY);
58 if (DATE_FORMATS.some((f) => f.id === stored)) {
59 return stored as DateFormatOption;
60 }
61 } catch { /* ignore */ }
62 return "us";
63}
64
65export function setDateFormat(format: DateFormatOption) {
66 try {
67 localStorage.setItem(STORAGE_KEY, format);
68 } catch { /* ignore */ }
69}
70
71export function formatDate(
72 isoDate: string,
73 format?: DateFormatOption,
74): string {
75 const effectiveFormat = format || getDateFormat();
76 const d = new Date(isoDate);
77 const entry = DATE_FORMATS.find((f) => f.id === effectiveFormat);
78 return entry ? entry.format(d) : d.toLocaleDateString();
79}