From 888c7727c58c6ee0a97ac39be69757dca77201fb Mon Sep 17 00:00:00 2001
From: takurinton <takurinton@takurinton.dev>
Date: Thu, 31 Aug 2023 14:36:15 +0900
Subject: [PATCH 1/5] feat: monthList prop

---
 src/components/Calendar/Calendar/Calendar.tsx |  6 +++
 src/components/Calendar/constants.ts          | 39 +++----------------
 .../internal/InnerCalendar/InnerCalendar.tsx  | 10 +++--
 .../InnerCalendarRange/InnerCalendarRange.tsx |  6 ++-
 .../LocaleProvider/LocaleProvider.stories.tsx |  6 +++
 .../NewDatePicker/NewDatePicker.tsx           | 17 +++++---
 src/constants/locale.ts                       |  8 +++-
 7 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/src/components/Calendar/Calendar/Calendar.tsx b/src/components/Calendar/Calendar/Calendar.tsx
index e7fba8fc3..ef97d0e6c 100644
--- a/src/components/Calendar/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar/Calendar.tsx
@@ -13,6 +13,10 @@ export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
    * @default dayjs()
    */
   date: Dayjs;
+  /**
+   * カレンダーに表示する年月のフォーマット
+   */
+  monthFormat?: string;
   /**
    * カレンダーの左に表示するアクション
    */
@@ -37,6 +41,7 @@ export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
 const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
   {
     date,
+    monthFormat,
     actions,
     onClickCloseButton,
     isOutsideRange = () => false,
@@ -74,6 +79,7 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
         <InnerCalendar
           date={date}
           current={current}
+          monthFormat={monthFormat}
           yearIsOpen={yearIsOpen}
           isOutsideRange={isOutsideRange}
           onYearIsOpen={setYearIsOpen}
diff --git a/src/components/Calendar/constants.ts b/src/components/Calendar/constants.ts
index af4131811..f08fc126c 100644
--- a/src/components/Calendar/constants.ts
+++ b/src/components/Calendar/constants.ts
@@ -1,38 +1,9 @@
+import dayjs from "dayjs";
+
 // for `<ScrollArea />`
 export const HEIGHT = "400px";
 
-export const weekList = {
-  en: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-  ja: ["日", "月", "火", "水", "木", "金", "土"],
-};
+const dayIndex = dayjs().day();
+const startDay = dayjs().subtract(dayIndex, "day");
 
-export const monthList = {
-  en: [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "June",
-    "July",
-    "Aug",
-    "Sept",
-    "Oct",
-    "Nov",
-    "Dec",
-  ],
-  ja: [
-    "1月",
-    "2月",
-    "3月",
-    "4月",
-    "5月",
-    "6月",
-    "7月",
-    "8月",
-    "9月",
-    "10月",
-    "11月",
-    "12月",
-  ],
-};
+export const weekList = [...Array(7)].map((_, i) => startDay.add(i, "day"));
diff --git a/src/components/Calendar/internal/InnerCalendar/InnerCalendar.tsx b/src/components/Calendar/internal/InnerCalendar/InnerCalendar.tsx
index d019e516a..ab27a8217 100644
--- a/src/components/Calendar/internal/InnerCalendar/InnerCalendar.tsx
+++ b/src/components/Calendar/internal/InnerCalendar/InnerCalendar.tsx
@@ -16,6 +16,7 @@ import { Day } from "../../Calendar/internal/Day";
 
 type Props = {
   date: Dayjs;
+  monthFormat?: string;
   current: Dayjs;
   yearIsOpen: boolean;
   onYearIsOpen: (yearIsOpen: boolean) => void;
@@ -24,6 +25,7 @@ type Props = {
 };
 export const InnerCalendar: React.FC<Props> = ({
   date,
+  monthFormat,
   current,
   yearIsOpen,
   onYearIsOpen,
@@ -51,7 +53,7 @@ export const InnerCalendar: React.FC<Props> = ({
             {/* 年月の表示 */}
             <CalendarMonth expanded={yearIsOpen}>
               <TitleContainer expanded={yearIsOpen} weight="bold" size="xl">
-                {m.format("YYYY年MM月")}
+                {m.format(monthFormat)}
               </TitleContainer>
               <IconButton
                 expanded={yearIsOpen}
@@ -68,8 +70,10 @@ export const InnerCalendar: React.FC<Props> = ({
             {/* カレンダーの表示 */}
             <CalendarContainer>
               {/* 曜日の表示 */}
-              {weekList["ja"].map((week) => (
-                <DayStyle key={week}>{week}</DayStyle>
+              {weekList.map((week) => (
+                <DayStyle key={week.format("ddd")}>
+                  {week.format("ddd")}
+                </DayStyle>
               ))}
 
               {/* 開始曜日まで空白をセット */}
diff --git a/src/components/Calendar/internal/InnerCalendarRange/InnerCalendarRange.tsx b/src/components/Calendar/internal/InnerCalendarRange/InnerCalendarRange.tsx
index dd2603c80..6271d835e 100644
--- a/src/components/Calendar/internal/InnerCalendarRange/InnerCalendarRange.tsx
+++ b/src/components/Calendar/internal/InnerCalendarRange/InnerCalendarRange.tsx
@@ -68,8 +68,10 @@ export const InnerCalendarRange: React.FC<Props> = ({
               </IconButton>
             </CalendarMonth>
             <CalendarContainer>
-              {weekList["ja"].map((week) => (
-                <DayStyle key={week}>{week}</DayStyle>
+              {weekList.map((week) => (
+                <DayStyle key={week.format("ddd")}>
+                  {week.format("ddd")}
+                </DayStyle>
               ))}
               {Array.from(new Array(m.startOf("month").day()), (_, i) => (
                 <DayStyle key={i} />
diff --git a/src/components/LocaleProvider/LocaleProvider.stories.tsx b/src/components/LocaleProvider/LocaleProvider.stories.tsx
index f7c007dba..d2f910416 100644
--- a/src/components/LocaleProvider/LocaleProvider.stories.tsx
+++ b/src/components/LocaleProvider/LocaleProvider.stories.tsx
@@ -6,6 +6,7 @@ import {
   ConfirmModal,
   DatePicker,
   MultipleFilter,
+  NewDatePicker,
   OptionType,
   Select,
   Spacer,
@@ -184,6 +185,11 @@ export const Example: StoryObj<LocaleProviderProps> = {
         <Spacer pl={2} pt={2} pb={40}>
           <DatePicker date={dayjs()} onDateChange={() => {}} />
         </Spacer>
+
+        <h2>NewDatePicker</h2>
+        <Spacer pl={2} pt={2} pb={40}>
+          <NewDatePicker date={dayjs()} onDateChange={() => {}} />
+        </Spacer>
       </LocaleProvider>
     );
   },
diff --git a/src/components/NewDatePicker/NewDatePicker.tsx b/src/components/NewDatePicker/NewDatePicker.tsx
index e6e72fcce..c7cefdb4b 100644
--- a/src/components/NewDatePicker/NewDatePicker.tsx
+++ b/src/components/NewDatePicker/NewDatePicker.tsx
@@ -10,6 +10,7 @@ import {
   useInteractions,
   useRole,
 } from "@floating-ui/react";
+import { useLocaleProps } from "../../hooks/useLocaleProps";
 
 export type NewDatePickerProps = {
   /**
@@ -35,6 +36,10 @@ export type NewDatePickerProps = {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * カレンダーに表示する年月のフォーマット
+   */
+  monthFormat?: string;
   /**
    * 選択可能なカレンダーの領域を制限する
    * true が返る場合は、選択不可となる
@@ -51,18 +56,19 @@ export type NewDatePickerProps = {
  * @memo 次のメジャーリリースで DatePicker に変更。現行の DatePicker は削除。
  */
 export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
-  function DatePicker(
-    {
+  function DatePicker(inProps, ref) {
+    const props = useLocaleProps({ props: inProps, name: "NewDatePicker" });
+    const {
       date,
       format = "YYYY-MM-DD",
       disabled = false,
+      monthFormat = "MMM YYYY",
       isOutsideRange,
       errorText,
       actions,
       onDateChange,
-    },
-    ref,
-  ) {
+    } = props;
+
     const [open, setOpen] = useState(false);
     const { context, refs, strategy, x, y } = useFloating({
       placement: "right-start",
@@ -112,6 +118,7 @@ export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
           <Calendar
             ref={refs.setFloating}
             date={date}
+            monthFormat={monthFormat}
             actions={actions}
             isOutsideRange={isOutsideRange}
             style={{
diff --git a/src/constants/locale.ts b/src/constants/locale.ts
index 9aac6a0c7..a476dd881 100644
--- a/src/constants/locale.ts
+++ b/src/constants/locale.ts
@@ -7,7 +7,7 @@ import {
   MultipleFilterProps,
   ToggleButtonProps,
 } from "..";
-import { SelectProps } from "../components";
+import { NewDatePickerProps, SelectProps } from "../components";
 import { CreatableSelectProps } from "../components/CreatableSelect";
 import { FullSizeConfirmModalProps } from "../components/FullSizeConfirmModal";
 import { EditFilterCardProps } from "../components/MultipleFilter/internal/EditFilterCard/EditFilterCard";
@@ -75,6 +75,9 @@ export interface Localization {
     DateRangePicker?: {
       defaultProps: Pick<DateRangePickerProps, "displayFormat" | "monthFormat">;
     };
+    NewDatePicker?: {
+      defaultProps: Pick<NewDatePickerProps, "format" | "monthFormat">;
+    };
   };
 }
 
@@ -124,6 +127,9 @@ export const jaJP: Localization = {
     DateRangePicker: {
       defaultProps: { displayFormat: "YYYY/MM/DD", monthFormat: "YYYY年 M月" },
     },
+    NewDatePicker: {
+      defaultProps: { monthFormat: "YYYY年MM月" },
+    },
   },
 };
 

From b76c074ce84fcd092d46afb4547dd08c9cc30c5b Mon Sep 17 00:00:00 2001
From: takurinton <takurinton@takurinton.dev>
Date: Thu, 31 Aug 2023 15:21:34 +0900
Subject: [PATCH 2/5] feat: weekList prop

---
 src/components/Calendar/Calendar/Calendar.tsx          |  7 +++++++
 .../Calendar/internal/InnerCalendar/InnerCalendar.tsx  | 10 ++++------
 src/components/NewDatePicker/NewDatePicker.tsx         |  7 +++++++
 src/constants/locale.ts                                | 10 ++++++++--
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/Calendar/Calendar/Calendar.tsx b/src/components/Calendar/Calendar/Calendar.tsx
index ef97d0e6c..26823fb81 100644
--- a/src/components/Calendar/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar/Calendar.tsx
@@ -17,6 +17,11 @@ export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
    * カレンダーに表示する年月のフォーマット
    */
   monthFormat?: string;
+  /**
+   * カレンダーに表示する曜日のリスト
+   * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
+   */
+  weekList?: string[];
   /**
    * カレンダーの左に表示するアクション
    */
@@ -42,6 +47,7 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
   {
     date,
     monthFormat,
+    weekList,
     actions,
     onClickCloseButton,
     isOutsideRange = () => false,
@@ -80,6 +86,7 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
           date={date}
           current={current}
           monthFormat={monthFormat}
+          weekList={weekList}
           yearIsOpen={yearIsOpen}
           isOutsideRange={isOutsideRange}
           onYearIsOpen={setYearIsOpen}
diff --git a/src/components/Calendar/internal/InnerCalendar/InnerCalendar.tsx b/src/components/Calendar/internal/InnerCalendar/InnerCalendar.tsx
index ab27a8217..bfdae65b0 100644
--- a/src/components/Calendar/internal/InnerCalendar/InnerCalendar.tsx
+++ b/src/components/Calendar/internal/InnerCalendar/InnerCalendar.tsx
@@ -3,7 +3,7 @@ import dayjs, { Dayjs } from "dayjs";
 import { Icon, ScrollArea } from "../../..";
 import { useTheme } from "styled-components";
 import { useScrollCalendar } from "../../hooks/useScrollCalendar";
-import { HEIGHT, weekList } from "../../constants";
+import { HEIGHT } from "../../constants";
 import {
   CalendarContainer,
   CalendarMonth,
@@ -17,6 +17,7 @@ import { Day } from "../../Calendar/internal/Day";
 type Props = {
   date: Dayjs;
   monthFormat?: string;
+  weekList?: string[];
   current: Dayjs;
   yearIsOpen: boolean;
   onYearIsOpen: (yearIsOpen: boolean) => void;
@@ -25,6 +26,7 @@ type Props = {
 };
 export const InnerCalendar: React.FC<Props> = ({
   date,
+  weekList,
   monthFormat,
   current,
   yearIsOpen,
@@ -70,11 +72,7 @@ export const InnerCalendar: React.FC<Props> = ({
             {/* カレンダーの表示 */}
             <CalendarContainer>
               {/* 曜日の表示 */}
-              {weekList.map((week) => (
-                <DayStyle key={week.format("ddd")}>
-                  {week.format("ddd")}
-                </DayStyle>
-              ))}
+              {weekList?.map((week) => <DayStyle key={week}>{week}</DayStyle>)}
 
               {/* 開始曜日まで空白をセット */}
               {Array.from(new Array(m.startOf("month").day()), (_, i) => (
diff --git a/src/components/NewDatePicker/NewDatePicker.tsx b/src/components/NewDatePicker/NewDatePicker.tsx
index c7cefdb4b..76e821c9b 100644
--- a/src/components/NewDatePicker/NewDatePicker.tsx
+++ b/src/components/NewDatePicker/NewDatePicker.tsx
@@ -40,6 +40,11 @@ export type NewDatePickerProps = {
    * カレンダーに表示する年月のフォーマット
    */
   monthFormat?: string;
+  /**
+   * カレンダーに表示する曜日のリスト
+   * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
+   */
+  weekList?: string[];
   /**
    * 選択可能なカレンダーの領域を制限する
    * true が返る場合は、選択不可となる
@@ -63,6 +68,7 @@ export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
       format = "YYYY-MM-DD",
       disabled = false,
       monthFormat = "MMM YYYY",
+      weekList = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
       isOutsideRange,
       errorText,
       actions,
@@ -119,6 +125,7 @@ export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
             ref={refs.setFloating}
             date={date}
             monthFormat={monthFormat}
+            weekList={weekList}
             actions={actions}
             isOutsideRange={isOutsideRange}
             style={{
diff --git a/src/constants/locale.ts b/src/constants/locale.ts
index a476dd881..6734621ab 100644
--- a/src/constants/locale.ts
+++ b/src/constants/locale.ts
@@ -76,7 +76,10 @@ export interface Localization {
       defaultProps: Pick<DateRangePickerProps, "displayFormat" | "monthFormat">;
     };
     NewDatePicker?: {
-      defaultProps: Pick<NewDatePickerProps, "format" | "monthFormat">;
+      defaultProps: Pick<
+        NewDatePickerProps,
+        "format" | "monthFormat" | "weekList"
+      >;
     };
   };
 }
@@ -128,7 +131,10 @@ export const jaJP: Localization = {
       defaultProps: { displayFormat: "YYYY/MM/DD", monthFormat: "YYYY年 M月" },
     },
     NewDatePicker: {
-      defaultProps: { monthFormat: "YYYY年MM月" },
+      defaultProps: {
+        monthFormat: "YYYY年MM月",
+        weekList: ["日", "月", "火", "水", "木", "金", "土"],
+      },
     },
   },
 };

From 0de5aa7d02e820f95a61ad0d984c964fff660d20 Mon Sep 17 00:00:00 2001
From: takurinton <takurinton@takurinton.dev>
Date: Thu, 31 Aug 2023 15:23:01 +0900
Subject: [PATCH 3/5] remove weekList constants

---
 src/components/Calendar/constants.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/components/Calendar/constants.ts b/src/components/Calendar/constants.ts
index f08fc126c..bab56e3fb 100644
--- a/src/components/Calendar/constants.ts
+++ b/src/components/Calendar/constants.ts
@@ -1,9 +1,2 @@
-import dayjs from "dayjs";
-
 // for `<ScrollArea />`
 export const HEIGHT = "400px";
-
-const dayIndex = dayjs().day();
-const startDay = dayjs().subtract(dayIndex, "day");
-
-export const weekList = [...Array(7)].map((_, i) => startDay.add(i, "day"));

From da3dbea0ac939874b3f75e244b2be271a79ba70f Mon Sep 17 00:00:00 2001
From: takurinton <takurinton@takurinton.dev>
Date: Thu, 31 Aug 2023 15:27:45 +0900
Subject: [PATCH 4/5] support DateRangePicker

---
 .../Calendar/CalendarRange/CalendarRange.tsx  | 13 +++++++++
 .../InnerCalendarRange/InnerCalendarRange.tsx | 14 +++++-----
 .../NewDateRangePicker/NewDateRangePicker.tsx | 27 +++++++++++++++----
 src/constants/locale.ts                       | 14 +++++++---
 4 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/src/components/Calendar/CalendarRange/CalendarRange.tsx b/src/components/Calendar/CalendarRange/CalendarRange.tsx
index 89bdd14af..0e3f7210d 100644
--- a/src/components/Calendar/CalendarRange/CalendarRange.tsx
+++ b/src/components/Calendar/CalendarRange/CalendarRange.tsx
@@ -25,6 +25,15 @@ export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
    * @default dayjs()
    */
   endDate: Dayjs;
+  /**
+   * カレンダーに表示する年月のフォーマット
+   */
+  monthFormat?: string;
+  /**
+   * カレンダーに表示する曜日のリスト
+   * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
+   */
+  weekList?: string[];
   /**
    * カレンダーの左に表示するアクション
    */
@@ -60,6 +69,8 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
     {
       startDate,
       endDate,
+      monthFormat,
+      weekList,
       actions,
       onClose,
       isOutsideRange = () => false,
@@ -131,6 +142,8 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
             <InnerCalendarRange
               startDate={startDate}
               endDate={endDate}
+              monthFormat={monthFormat}
+              weekList={weekList}
               current={current}
               yearIsOpen={yearIsOpen}
               isOutsideRange={isOutsideRange}
diff --git a/src/components/Calendar/internal/InnerCalendarRange/InnerCalendarRange.tsx b/src/components/Calendar/internal/InnerCalendarRange/InnerCalendarRange.tsx
index 6271d835e..c83b806ec 100644
--- a/src/components/Calendar/internal/InnerCalendarRange/InnerCalendarRange.tsx
+++ b/src/components/Calendar/internal/InnerCalendarRange/InnerCalendarRange.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { HEIGHT, weekList } from "../../constants";
+import { HEIGHT } from "../../constants";
 import { useTheme } from "../../../../themes";
 import { useScrollCalendar } from "../../hooks/useScrollCalendar";
 import { Icon, ScrollArea } from "../../../";
@@ -18,6 +18,8 @@ import { Day } from "../../CalendarRange/internal/Day";
 type Props = {
   startDate: Dayjs;
   endDate: Dayjs;
+  monthFormat?: string;
+  weekList?: string[];
   current: Dayjs;
   yearIsOpen: boolean;
   onYearIsOpen: (yearIsOpen: boolean) => void;
@@ -28,6 +30,8 @@ type Props = {
 export const InnerCalendarRange: React.FC<Props> = ({
   startDate,
   endDate,
+  monthFormat,
+  weekList,
   current,
   yearIsOpen,
   onYearIsOpen,
@@ -54,7 +58,7 @@ export const InnerCalendarRange: React.FC<Props> = ({
           >
             <CalendarMonth expanded={yearIsOpen}>
               <TitleContainer expanded={yearIsOpen} weight="bold" size="xl">
-                {m.format("YYYY年MM月")}
+                {m.format(monthFormat)}
               </TitleContainer>
               <IconButton
                 expanded={yearIsOpen}
@@ -68,11 +72,7 @@ export const InnerCalendarRange: React.FC<Props> = ({
               </IconButton>
             </CalendarMonth>
             <CalendarContainer>
-              {weekList.map((week) => (
-                <DayStyle key={week.format("ddd")}>
-                  {week.format("ddd")}
-                </DayStyle>
-              ))}
+              {weekList?.map((week) => <DayStyle key={week}>{week}</DayStyle>)}
               {Array.from(new Array(m.startOf("month").day()), (_, i) => (
                 <DayStyle key={i} />
               ))}
diff --git a/src/components/NewDateRangePicker/NewDateRangePicker.tsx b/src/components/NewDateRangePicker/NewDateRangePicker.tsx
index c832fd4cd..1128f72ad 100644
--- a/src/components/NewDateRangePicker/NewDateRangePicker.tsx
+++ b/src/components/NewDateRangePicker/NewDateRangePicker.tsx
@@ -16,6 +16,7 @@ import {
   ClickStateType,
 } from "../Calendar/CalendarRange/constants";
 import { useMergeRefs } from "../../hooks/useMergeRefs";
+import { useLocaleProps } from "../../hooks/useLocaleProps";
 
 export type DateRange = {
   startDate: Dayjs;
@@ -46,6 +47,15 @@ export type NewDateRangePickerProps = {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * カレンダーに表示する年月のフォーマット
+   */
+  monthFormat?: string;
+  /**
+   * カレンダーに表示する曜日のリスト
+   * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
+   */
+  weekList?: string[];
   /**
    * 選択可能なカレンダーの領域を制限する
    * true が返る場合は、選択不可となる
@@ -64,18 +74,23 @@ export type NewDateRangePickerProps = {
 export const DateRangePicker = forwardRef<
   HTMLDivElement,
   NewDateRangePickerProps
->(function DateRangePicker(
-  {
+>(function DateRangePicker(inProps, propRef) {
+  const props = useLocaleProps({
+    props: inProps,
+    name: "NewDateRangePicker",
+  });
+  const {
     startDate,
     endDate,
     errorText,
     disabled = false,
+    monthFormat = "MMM YYYY",
+    weekList = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
     isOutsideRange = () => false,
     actions,
     onDatesChange,
-  },
-  propRef,
-) {
+  } = props;
+
   const [open, setOpen] = useState(false);
   const { context, refs, strategy, x, y } = useFloating({
     placement: "right-start",
@@ -133,6 +148,8 @@ export const DateRangePicker = forwardRef<
           startDate={startDate}
           endDate={endDate}
           actions={actions}
+          monthFormat={monthFormat}
+          weekList={weekList}
           style={{
             position: strategy,
             top: y ?? 0,
diff --git a/src/constants/locale.ts b/src/constants/locale.ts
index 6734621ab..21d7508c1 100644
--- a/src/constants/locale.ts
+++ b/src/constants/locale.ts
@@ -76,10 +76,10 @@ export interface Localization {
       defaultProps: Pick<DateRangePickerProps, "displayFormat" | "monthFormat">;
     };
     NewDatePicker?: {
-      defaultProps: Pick<
-        NewDatePickerProps,
-        "format" | "monthFormat" | "weekList"
-      >;
+      defaultProps: Pick<NewDatePickerProps, "monthFormat" | "weekList">;
+    };
+    NewDateRangePicker?: {
+      defaultProps: Pick<NewDatePickerProps, "monthFormat" | "weekList">;
     };
   };
 }
@@ -136,6 +136,12 @@ export const jaJP: Localization = {
         weekList: ["日", "月", "火", "水", "木", "金", "土"],
       },
     },
+    NewDateRangePicker: {
+      defaultProps: {
+        monthFormat: "YYYY年MM月",
+        weekList: ["日", "月", "火", "水", "木", "金", "土"],
+      },
+    },
   },
 };
 

From d7428671c1d32d4295c419ef964628cef855036d Mon Sep 17 00:00:00 2001
From: takurinton <takurinton@takurinton.dev>
Date: Thu, 31 Aug 2023 15:29:01 +0900
Subject: [PATCH 5/5] changeset

---
 .changeset/weak-spies-happen.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/weak-spies-happen.md

diff --git a/.changeset/weak-spies-happen.md b/.changeset/weak-spies-happen.md
new file mode 100644
index 000000000..779c94504
--- /dev/null
+++ b/.changeset/weak-spies-happen.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": minor
+---
+
+Feat i18n support for DatePicker and DateRangePicker