From 387733e8b153dbddc9aee3cf30510080a45842b7 Mon Sep 17 00:00:00 2001
From: JOYCEQL <1449239013@qq.com>
Date: Sat, 1 Mar 2025 10:44:18 +0800
Subject: [PATCH] feat: update date formatting to respect user locale in editor
 and preview components

---
 src/components/editor/Field.tsx             | 6 +++++-
 src/components/preview/BaseInfo.tsx         | 5 +++--
 src/components/preview/EducationSection.tsx | 8 +++++---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/editor/Field.tsx b/src/components/editor/Field.tsx
index d6be61b..717362c 100644
--- a/src/components/editor/Field.tsx
+++ b/src/components/editor/Field.tsx
@@ -112,7 +112,11 @@ const Field = ({
   if (type === "date") {
     const formatDate = (date: Date | undefined) => {
       if (!date) return "";
-      return format(date, "yyyy/MM/dd");
+      return date.toLocaleDateString(["zh-CN", "en-US"], {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+      });
     };
 
     const handleYearInput = (e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/src/components/preview/BaseInfo.tsx b/src/components/preview/BaseInfo.tsx
index 85fbedd..0f80b13 100644
--- a/src/components/preview/BaseInfo.tsx
+++ b/src/components/preview/BaseInfo.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useTranslations } from "next-intl";
+import { useTranslations, useLocale } from "next-intl";
 import { motion } from "framer-motion";
 import * as Icons from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -24,6 +24,7 @@ const BaseInfo = ({
   template
 }: BaseInfoProps) => {
   const t = useTranslations("workbench");
+  const locale = useLocale();
   const { setActiveSection } = useResumeStore();
   const useIconMode = globalSettings?.useIconMode ?? false;
   const layout = basic?.layout || "left";
@@ -64,7 +65,7 @@ const BaseInfo = ({
         key: field.key,
         value:
           field.key === "birthDate" && basic[field.key]
-            ? new Date(basic[field.key] as string).toLocaleDateString()
+            ? new Date(basic[field.key] as string).toLocaleDateString(locale)
             : (basic[field.key] as string),
         icon: basic.icons?.[field.key] || "User",
         label: field.label,
diff --git a/src/components/preview/EducationSection.tsx b/src/components/preview/EducationSection.tsx
index 318b75f..e5ec8cf 100644
--- a/src/components/preview/EducationSection.tsx
+++ b/src/components/preview/EducationSection.tsx
@@ -3,6 +3,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import { Education, GlobalSettings } from "@/types/resume";
 import SectionTitle from "./SectionTitle";
 import { useResumeStore } from "@/store/useResumeStore";
+import { useLocale } from "next-intl";
 
 interface EducationSectionProps {
   education?: Education[];
@@ -16,6 +17,7 @@ const EducationSection = ({
   showTitle = true,
 }: EducationSectionProps) => {
   const { setActiveSection } = useResumeStore();
+  const locale = useLocale();
   const visibleEducation = education?.filter((edu) => edu.visible);
   return (
     <motion.div
@@ -74,9 +76,9 @@ const EducationSection = ({
                 className="text-subtitleFont shrink-0"
                 suppressHydrationWarning
               >
-                {`${new Date(edu.startDate).toLocaleDateString()} - ${new Date(
-                  edu.endDate
-                ).toLocaleDateString()}`}
+                {`${new Date(edu.startDate).toLocaleDateString(
+                  locale
+                )} - ${new Date(edu.endDate).toLocaleDateString(locale)}`}
               </span>
             </motion.div>