From b4e4f2119a74ce0071e13ca37f6f4bd33f7760e6 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 14 Aug 2026 04:53:47 +0700
Subject: [PATCH] fix: update date formatting and locale handling in DatePicker
 and Calendar components

---
 resources/js/components/inputs/date-picker.tsx | 5 +++--
 resources/js/components/ui/calendar.tsx        | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/inputs/date-picker.tsx b/resources/js/components/inputs/date-picker.tsx
index 93050a9..6cf1b05 100644
--- a/resources/js/components/inputs/date-picker.tsx
+++ b/resources/js/components/inputs/date-picker.tsx
@@ -1,5 +1,5 @@
 import { format } from 'date-fns';
-import { id } from 'date-fns/locale';
+import { id as idLocale } from 'react-day-picker/locale';
 import { CalendarIcon } from 'lucide-react';
 import * as React from 'react';
 
@@ -59,7 +59,7 @@ function DatePicker({
 return '';
 }
 
-        return format(date, 'dd MMM yyyy', { locale: id });
+        return format(date, 'dd MMM yyyy', { locale: idLocale });
     }, [date]);
 
     return (
@@ -82,6 +82,7 @@ return '';
             <PopoverContent className="w-auto p-0" align="start">
                 <Calendar
                     mode="single"
+                    locale={idLocale}
                     selected={date}
                     onSelect={(selectedDate) => {
                         onChange?.(selectedDate);
diff --git a/resources/js/components/ui/calendar.tsx b/resources/js/components/ui/calendar.tsx
index be12f05..306accf 100644
--- a/resources/js/components/ui/calendar.tsx
+++ b/resources/js/components/ui/calendar.tsx
@@ -38,8 +38,8 @@ function Calendar({
       )}
       captionLayout={captionLayout}
       formatters={{
-        formatMonthDropdown: (date) =>
-          date.toLocaleString("default", { month: "short" }),
+        formatMonthDropdown: (date, options) =>
+          date.toLocaleString(options?.locale?.code ?? "id", { month: "short" }),
         ...formatters,
       }}
       classNames={{