From a35e0714be630b448bd8bc074452e27556c10a68 Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Mon, 9 Sep 2024 16:16:53 +0900
Subject: [PATCH 01/15] feat(calendar): today design

---
 packages/styles/bases/calendar.css.ts         |  5 +++
 .../base/calendar/components/calendar.tsx     | 32 ++++++++++++++-----
 .../calendar/stories/calendar.stories.tsx     | 26 +++++++++++++++
 .../date-picker/components/date-picker.tsx    |  3 ++
 .../stories/date-picker.stories.tsx           | 23 +++++++++++++
 .../components/date-range-picker.tsx          |  4 +++
 .../stories/date-range-picker.stories.tsx     | 29 +++++++++++++++++
 7 files changed, 114 insertions(+), 8 deletions(-)

diff --git a/packages/styles/bases/calendar.css.ts b/packages/styles/bases/calendar.css.ts
index 08422e960..36a188499 100644
--- a/packages/styles/bases/calendar.css.ts
+++ b/packages/styles/bases/calendar.css.ts
@@ -125,3 +125,8 @@ export const calendarItemInteractiveStyle = style([
     },
   },
 ]);
+export const calendarItemInteractiveTodayStyle = style({
+  border: `1px solid ${THEME.color.green[800]}`,
+  borderRadius: "50%",
+  boxSizing: "border-box",
+});
diff --git a/packages/wiz-ui-react/src/components/base/calendar/components/calendar.tsx b/packages/wiz-ui-react/src/components/base/calendar/components/calendar.tsx
index 7fc7ac2a0..558d6edd7 100644
--- a/packages/wiz-ui-react/src/components/base/calendar/components/calendar.tsx
+++ b/packages/wiz-ui-react/src/components/base/calendar/components/calendar.tsx
@@ -93,6 +93,7 @@ type Props = BaseProps & {
   currentMonth?: Date;
   activeDates?: DateStatus[];
   filledWeeks?: boolean;
+  _today?: Date;
   onClickDate?: (selectedValue: Date) => void;
   /**
    * @description 日付が無効かどうかを判定する関数です。無効な日付はクリック不可になります。
@@ -108,6 +109,7 @@ const Calendar: FC<Props> = ({
   currentMonth = new Date(),
   activeDates,
   filledWeeks,
+  _today,
   onClickDate,
   disabledDate,
 }) => {
@@ -126,6 +128,18 @@ const Calendar: FC<Props> = ({
     });
   }
 
+  function getItemDate(item: CalendarDataItem) {
+    return new Date(
+      currentMonth.getFullYear(),
+      currentMonth.getMonth(),
+      Number(item.label)
+    );
+  }
+
+  function getIsToday(a: Date) {
+    return a.toDateString() === (_today || new Date()).toDateString();
+  }
+
   function getItemStyleState(
     item: CalendarDataItem,
     dateStatus?: DateStatus
@@ -139,13 +153,7 @@ const Calendar: FC<Props> = ({
     if (item.isOutOfCurrentMonth) {
       return;
     }
-    onClickDate?.(
-      new Date(
-        currentMonth.getFullYear(),
-        currentMonth.getMonth(),
-        Number(item.label)
-      )
-    );
+    onClickDate?.(getItemDate(item));
   }
   const calendarItems = calendarData.map((weekDateItems) => {
     return weekDateItems.map((item) => {
@@ -214,6 +222,7 @@ const Calendar: FC<Props> = ({
               const item = adjacent.current.item;
               const itemStyle = adjacent.current.itemStyle;
               const activeDateStatus = adjacent.current.activeDateStatus;
+              const isToday = getIsToday(getItemDate(item));
               return (
                 <td
                   key={`${item.label}-${col}`}
@@ -244,7 +253,14 @@ const Calendar: FC<Props> = ({
                           adjacent.current.itemStyle === "primary"
                         )}
                       >
-                        <div className={styles.calendarItemInteractiveStyle}>
+                        <div
+                          className={clsx(
+                            styles.calendarItemInteractiveStyle,
+                            !item.isOutOfCurrentMonth &&
+                              isToday &&
+                              styles.calendarItemInteractiveTodayStyle
+                          )}
+                        >
                           {item.label}
                         </div>
                       </div>
diff --git a/packages/wiz-ui-react/src/components/base/calendar/stories/calendar.stories.tsx b/packages/wiz-ui-react/src/components/base/calendar/stories/calendar.stories.tsx
index 7b1d22f42..32dcd8302 100644
--- a/packages/wiz-ui-react/src/components/base/calendar/stories/calendar.stories.tsx
+++ b/packages/wiz-ui-react/src/components/base/calendar/stories/calendar.stories.tsx
@@ -107,3 +107,29 @@ export const FilledWeeks: Story = {
     },
   },
 };
+
+export const Today: Story = {
+  ...Template,
+  args: {
+    currentMonth: new Date("2023-03"),
+    _today: new Date("2023-03-05"),
+  },
+};
+
+export const DisabledToday: Story = {
+  ...Template,
+  args: {
+    currentMonth: new Date("2023-03"),
+    _today: new Date("2023-03-05"),
+    disabledDate: (date: Date) => date.getDate() === 5,
+  },
+};
+
+export const SelectedToday: Story = {
+  ...Template,
+  args: {
+    currentMonth: new Date("2023-03"),
+    _today: new Date("2023-03-05"),
+    activeDates: [{ date: new Date("2023-03-05"), state: "primary" }],
+  },
+};
diff --git a/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx b/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx
index 8455dcbee..8d302636f 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx
@@ -26,6 +26,7 @@ type Props = BaseProps & {
   disabled?: boolean;
   error?: boolean;
   isDirectionFixed?: boolean;
+  _today?: Date;
   onChangeDate: (selectedValue: Date | null) => void;
   /**
    * @description 日付が無効かどうかを判定する関数です。無効な日付はクリック不可になります。
@@ -60,6 +61,7 @@ const DatePicker: FC<Props> = ({
   formatYear = (year) => `${year}`,
   formatDate = (date) =>
     `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`,
+  _today,
 }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
   const cancelButtonVisible = !disabled && !!date;
@@ -243,6 +245,7 @@ const DatePicker: FC<Props> = ({
             onClickDate={(date) => onChangeDate(date)}
             currentMonth={currentMonth}
             filledWeeks
+            _today={_today || new Date()}
             disabledDate={disabledDate}
           />
         </div>
diff --git a/packages/wiz-ui-react/src/components/base/inputs/date-picker/stories/date-picker.stories.tsx b/packages/wiz-ui-react/src/components/base/inputs/date-picker/stories/date-picker.stories.tsx
index 077bd642e..74bfccacc 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/date-picker/stories/date-picker.stories.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/date-picker/stories/date-picker.stories.tsx
@@ -98,3 +98,26 @@ export const Playground: Story = {
     return <WizDatePicker {...args} date={date} onChangeDate={setDate} />;
   },
 };
+
+export const Today: Story = {
+  args: {
+    date: new Date(2023, 0, 1),
+    _today: new Date("2023-01-15"),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    canvas.getByLabelText(ARIA_LABELS.DATE_PICKER_INPUT).click();
+  },
+};
+
+export const DisabledToday: Story = {
+  args: {
+    date: new Date(2023, 0, 1),
+    disabledDate: (date: Date) => date.getDate() >= 10 && date.getDate() < 17,
+    _today: new Date("2023-01-15"),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    canvas.getByLabelText(ARIA_LABELS.DATE_PICKER_INPUT).click();
+  },
+};
diff --git a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
index 17f3b648d..fe41c21ec 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
@@ -40,6 +40,7 @@ type Props = BaseProps & {
   selectBoxValue?: string;
   isDirectionFixed?: boolean;
   error?: boolean;
+  _today?: Date;
   onChangeDateRange: (dateRange: DateRange) => void;
   onChangeSelectBoxValue?: (value: string) => void;
   disabledDate?: (date: Date) => boolean;
@@ -60,6 +61,7 @@ const DateRangePicker: FC<Props> = ({
   selectBoxValue,
   isDirectionFixed = false,
   error,
+  _today,
   onChangeDateRange,
   onChangeSelectBoxValue,
   disabledDate = () => false,
@@ -316,6 +318,7 @@ const DateRangePicker: FC<Props> = ({
                   onClickDate={onClickDate}
                   disabledDate={disabledDate}
                   filledWeeks={true}
+                  _today={_today || new Date()}
                 />
               </div>
               <div className={styles.popupCalendarContainerStyle["right"]}>
@@ -345,6 +348,7 @@ const DateRangePicker: FC<Props> = ({
                   onClickDate={onClickDate}
                   disabledDate={disabledDate}
                   filledWeeks={true}
+                  _today={_today || new Date()}
                 />
               </div>
             </div>
diff --git a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/stories/date-range-picker.stories.tsx b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/stories/date-range-picker.stories.tsx
index 43ef9505e..3ca2c245a 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/stories/date-range-picker.stories.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/stories/date-range-picker.stories.tsx
@@ -185,3 +185,32 @@ export const Playground: Story = {
     );
   },
 };
+
+export const Today: Story = {
+  args: {
+    dateRange: {
+      start: new Date("2021-01-15"),
+      end: new Date("2021-02-15"),
+    },
+    _today: new Date("2021-01-28"),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    canvas.getByLabelText(ARIA_LABELS.RANGE_DATE_PICKER_INPUT).click();
+  },
+};
+
+export const DisabledWithToday: Story = {
+  args: {
+    dateRange: {
+      start: new Date("2021-01-01"),
+      end: new Date("2021-01-31"),
+    },
+    disabledDate: (date: Date) => date.getDate() >= 10 && date.getDate() < 17,
+    _today: new Date("2021-01-15"),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    canvas.getByLabelText(ARIA_LABELS.RANGE_DATE_PICKER_INPUT).click();
+  },
+};

From 1666ab0cc913934b114455f1c6782543432c11a2 Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Tue, 10 Sep 2024 14:44:50 +0900
Subject: [PATCH 02/15] =?UTF-8?q?feat(calendar):=20=E3=82=AD=E3=83=A3?=
 =?UTF-8?q?=E3=83=B3=E3=82=BB=E3=83=AB=E3=83=BB=E9=81=A9=E7=94=A8=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/constants/component/aria-label.ts    |  2 +
 .../date-picker/components/date-picker.tsx    | 35 ++++++++++++++++--
 .../components/date-range-picker.tsx          | 37 +++++++++++++++----
 3 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/packages/constants/component/aria-label.ts b/packages/constants/component/aria-label.ts
index 374553272..6e982a5a7 100644
--- a/packages/constants/component/aria-label.ts
+++ b/packages/constants/component/aria-label.ts
@@ -36,4 +36,6 @@ export const ARIA_LABELS = {
   FULL_MODAL_VIEW: {
     CLOSE: "モーダルを閉じる",
   },
+  APPLY: "適用",
+  CANCEL: "キャンセル",
 } as const;
diff --git a/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx b/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx
index 8d302636f..23f868bcd 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx
@@ -8,7 +8,13 @@ import {
 import clsx from "clsx";
 import { FC, KeyboardEvent, useContext, useRef, useState } from "react";
 
-import { WizCalendar, WizPopup, WizText } from "@/components";
+import {
+  WizCalendar,
+  WizDivider,
+  WizPopup,
+  WizText,
+  WizTextButton,
+} from "@/components";
 import { WizIcon } from "@/components/base/icon";
 import { WizHStack, WizVStack } from "@/components/base/stack";
 import { FormControlContext } from "@/components/custom/form/components/form-control-context";
@@ -75,6 +81,7 @@ const DatePicker: FC<Props> = ({
       )
     );
   };
+  const [tempDate, setTempDate] = useState(date);
 
   const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
     e.preventDefault();
@@ -110,6 +117,17 @@ const DatePicker: FC<Props> = ({
     return "default";
   })();
   const wrapperButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  const onClose = () => {
+    setTempDate(date);
+    setIsOpen(false);
+  };
+
+  const onSubmit = () => {
+    onChangeDate(tempDate);
+    setIsOpen(false);
+  };
+
   return (
     <>
       <button
@@ -151,7 +169,7 @@ const DatePicker: FC<Props> = ({
       </button>
       <WizPopup
         isOpen={!disabled && isOpen}
-        onClose={() => setIsOpen(false)}
+        onClose={onClose}
         direction="bottomLeft"
         isDirectionFixed={isDirectionFixed}
         anchorElement={wrapperButtonRef}
@@ -240,14 +258,23 @@ const DatePicker: FC<Props> = ({
           </WizHStack>
           <WizCalendar
             activeDates={
-              (date && [{ date: date, state: "primary" }]) || undefined
+              (tempDate && [{ date: tempDate, state: "primary" }]) || undefined
             }
-            onClickDate={(date) => onChangeDate(date)}
+            onClickDate={(date) => setTempDate(date)}
             currentMonth={currentMonth}
             filledWeeks
             _today={_today || new Date()}
             disabledDate={disabledDate}
           />
+          <WizDivider color="gray.300" />
+          <WizHStack p="sm" gap="sm" justify="end">
+            <WizTextButton onClick={onClose} variant="sub">
+              {ARIA_LABELS.CANCEL}
+            </WizTextButton>
+            <WizTextButton onClick={onSubmit}>
+              {ARIA_LABELS.APPLY}
+            </WizTextButton>
+          </WizHStack>
         </div>
       </WizPopup>
     </>
diff --git a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
index fe41c21ec..e053c9514 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
@@ -15,6 +15,7 @@ import {
 import {
   WizCalendar,
   WizCard,
+  WizDivider,
   WizHStack,
   WizICalendar,
   WizICancel,
@@ -24,6 +25,7 @@ import {
   WizIExpandMore,
   WizIcon,
   WizPopup,
+  WizTextButton,
 } from "@/components";
 import { DateStatus } from "@/components/base/calendar/components/types";
 import { FormControlContext } from "@/components/custom/form/components/form-control-context";
@@ -70,6 +72,7 @@ const DateRangePicker: FC<Props> = ({
 }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isSelectBoxOpen, setIsSelectBoxOpen] = useState(false);
+  const [tempDateRange, setTempDateRange] = useState(dateRange);
   const cancelButtonVisible = !disabled && !!dateRange.start;
   const [rightCalendarDate, setRightCalendarDate] = useState(
     (() => {
@@ -112,7 +115,7 @@ const DateRangePicker: FC<Props> = ({
       date,
       state,
     });
-    const [start, end] = [dateRange.start, dateRange.end];
+    const [start, end] = [tempDateRange.start, tempDateRange.end];
     if (start && end) {
       const secondaries: DateStatus[] = [];
       const tomorrowOfStart = new Date(start);
@@ -130,7 +133,7 @@ const DateRangePicker: FC<Props> = ({
       return [getDateStatus(start, "primary")];
     }
     return [];
-  }, [dateRange]);
+  }, [tempDateRange]);
 
   const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
     e.preventDefault();
@@ -146,18 +149,18 @@ const DateRangePicker: FC<Props> = ({
 
   const onClickDate = useCallback(
     (date: Date) => {
-      const [start, end] = [dateRange.start, dateRange.end];
+      const [start, end] = [tempDateRange.start, tempDateRange.end];
       if (start && end) {
-        onChangeDateRange({ start: date, end: null });
+        setTempDateRange({ start: date, end: null });
       } else if (start) {
         const [nextStart, nextEnd] =
           start > date ? [date, start] : [start, date];
-        onChangeDateRange({ start: nextStart, end: nextEnd });
+        setTempDateRange({ start: nextStart, end: nextEnd });
       } else {
-        onChangeDateRange({ start: date, end: null });
+        setTempDateRange({ start: date, end: null });
       }
     },
-    [dateRange, onChangeDateRange]
+    [tempDateRange]
   );
 
   const selectedOption = (() => {
@@ -184,6 +187,17 @@ const DateRangePicker: FC<Props> = ({
     if (isOpen && !disabled) return "active";
     return "default";
   })();
+
+  const onClose = () => {
+    setTempDateRange(dateRange);
+    setIsOpen(false);
+  };
+
+  const onSubmit = () => {
+    onChangeDateRange(tempDateRange);
+    setIsOpen(false);
+  };
+
   return (
     <>
       <button
@@ -352,6 +366,15 @@ const DateRangePicker: FC<Props> = ({
                 />
               </div>
             </div>
+            <WizDivider color="gray.300" />
+            <WizHStack p="sm" gap="sm" justify="end">
+              <WizTextButton onClick={onClose} variant="sub">
+                {ARIA_LABELS.CANCEL}
+              </WizTextButton>
+              <WizTextButton onClick={onSubmit}>
+                {ARIA_LABELS.APPLY}
+              </WizTextButton>
+            </WizHStack>
           </div>
         </WizCard>
       </WizPopup>

From 689100e2df32a9c66a2f8f193668cbea60270772 Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Tue, 10 Sep 2024 14:49:49 +0900
Subject: [PATCH 03/15] chore: add changeset

---
 .changeset/olive-snails-tie.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/olive-snails-tie.md

diff --git a/.changeset/olive-snails-tie.md b/.changeset/olive-snails-tie.md
new file mode 100644
index 000000000..ebbf390d6
--- /dev/null
+++ b/.changeset/olive-snails-tie.md
@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-constants": minor
+"@wizleap-inc/wiz-ui-styles": minor
+---
+
+今日の日付を目立つようにする & キャンセル・適用ボタンの追加

From 8b5fca8cffaaa4f59abf5b97c008ea8aef0931f0 Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Tue, 10 Sep 2024 16:01:56 +0900
Subject: [PATCH 04/15] =?UTF-8?q?feat(calendar):=20today=20Style=E3=81=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/styles/bases/calendar.css.ts               | 13 ++++++++-----
 .../base/calendar/components/calendar.tsx           | 11 +++++------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/styles/bases/calendar.css.ts b/packages/styles/bases/calendar.css.ts
index 36a188499..2f5ea8028 100644
--- a/packages/styles/bases/calendar.css.ts
+++ b/packages/styles/bases/calendar.css.ts
@@ -125,8 +125,11 @@ export const calendarItemInteractiveStyle = style([
     },
   },
 ]);
-export const calendarItemInteractiveTodayStyle = style({
-  border: `1px solid ${THEME.color.green[800]}`,
-  borderRadius: "50%",
-  boxSizing: "border-box",
-});
+export const calendarItemInteractiveTodayStyle = style([
+  calendarItemInteractiveStyle,
+  {
+    border: `1px solid ${THEME.color.green[800]}`,
+    borderRadius: "50%",
+    boxSizing: "border-box",
+  },
+]);
diff --git a/packages/wiz-ui-react/src/components/base/calendar/components/calendar.tsx b/packages/wiz-ui-react/src/components/base/calendar/components/calendar.tsx
index 558d6edd7..997a36770 100644
--- a/packages/wiz-ui-react/src/components/base/calendar/components/calendar.tsx
+++ b/packages/wiz-ui-react/src/components/base/calendar/components/calendar.tsx
@@ -254,12 +254,11 @@ const Calendar: FC<Props> = ({
                         )}
                       >
                         <div
-                          className={clsx(
-                            styles.calendarItemInteractiveStyle,
-                            !item.isOutOfCurrentMonth &&
-                              isToday &&
-                              styles.calendarItemInteractiveTodayStyle
-                          )}
+                          className={
+                            !item.isOutOfCurrentMonth && isToday
+                              ? styles.calendarItemInteractiveTodayStyle
+                              : styles.calendarItemInteractiveStyle
+                          }
                         >
                           {item.label}
                         </div>

From 03f1db8ba0c3591f63231d78358e857dceb86a8f Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Tue, 10 Sep 2024 17:11:03 +0900
Subject: [PATCH 05/15] feat(calendar): today design

---
 .../base/calendar/calendar.stories.ts         | 69 ++++++++++++++++
 .../src/components/base/calendar/calendar.vue | 25 +++++-
 .../inputs/date-picker/date-picker.stories.ts | 45 +++++++++++
 .../base/inputs/date-picker/date-picker.vue   |  7 ++
 .../date-range-picker.stories.ts              | 78 +++++++++++++++++++
 .../date-range-picker/date-range-picker.vue   |  8 ++
 6 files changed, 231 insertions(+), 1 deletion(-)

diff --git a/packages/wiz-ui-next/src/components/base/calendar/calendar.stories.ts b/packages/wiz-ui-next/src/components/base/calendar/calendar.stories.ts
index 55e26bf07..b95be4b66 100644
--- a/packages/wiz-ui-next/src/components/base/calendar/calendar.stories.ts
+++ b/packages/wiz-ui-next/src/components/base/calendar/calendar.stories.ts
@@ -179,3 +179,72 @@ FilledWeeks.parameters = {
     },
   },
 };
+
+export const Today = Template.bind({});
+Today.args = {
+  currentMonth: new Date("2023-03"),
+  _today: new Date("2023-03-05"),
+};
+Today.parameters = {
+  docs: {
+    description: {
+      story:
+        "本日の日付が丸で囲われるようになっています。通常利用では `_today` パラメータの設定は不要ですが、 `_today`パラメータを設定することで任意の日付を本日の日付として扱うことができます。",
+    },
+    source: {
+      code: `
+<template>
+  <div>
+    <WizCalendar :_today="new Date('2023-03-05')" />
+  </div>
+</template>
+      `,
+    },
+  },
+};
+
+export const DisabledToday = Template.bind({});
+DisabledToday.args = {
+  currentMonth: new Date("2023-03"),
+  _today: new Date("2023-03-05"),
+  disabledDate: (date: Date) => date.getDate() === 5,
+};
+DisabledToday.parameters = {
+  docs: {
+    description: {
+      story: "本日の日付がdisabledの場合も丸で囲われます。",
+    },
+    source: {
+      code: `
+<template>
+  <div>
+    <WizCalendar :_today="new Date('2023-03-05')" :disabledDate="(date: Date) => date.getDate() === 5" />
+  </div>
+</template>
+      `,
+    },
+  },
+};
+
+export const SelectedToday = Template.bind({});
+SelectedToday.args = {
+  currentMonth: new Date("2023-03"),
+  _today: new Date("2023-03-05"),
+  activeDates: [{ date: new Date("2023-03-05"), state: "primary" }],
+};
+SelectedToday.parameters = {
+  docs: {
+    description: {
+      story: "本日の日付がActiveの場合はActiveの見た目が優先されます。",
+    },
+    source: {
+      code: `
+<template>
+  <div>
+    <WizCalendar :_today="new Date('2023-03-05')" :activeDates="[{ date: new Date("2023-03-05"), state: "primary" }]" />
+  </div>
+</template>
+      `,
+    },
+  },
+};
diff --git a/packages/wiz-ui-next/src/components/base/calendar/calendar.vue b/packages/wiz-ui-next/src/components/base/calendar/calendar.vue
index 09b4ce34f..404740a07 100644
--- a/packages/wiz-ui-next/src/components/base/calendar/calendar.vue
+++ b/packages/wiz-ui-next/src/components/base/calendar/calendar.vue
@@ -50,7 +50,13 @@
                 )
               "
             >
-              <div :class="styles.calendarItemInteractiveStyle">
+              <div
+                :class="
+                  isToday(row, col, adjacent.current.day)
+                    ? styles.calendarItemInteractiveTodayStyle
+                    : styles.calendarItemInteractiveStyle
+                "
+              >
                 {{ adjacent.current.day }}
               </div>
             </div>
@@ -99,6 +105,12 @@ const props = defineProps({
     required: false,
     default: () => false,
   },
+  // eslint-disable-next-line vue/prop-name-casing
+  _today: {
+    type: Date as PropType<Date>,
+    required: false,
+    default: new Date(),
+  },
 });
 
 const calendars = computed(() => {
@@ -250,6 +262,17 @@ const updateSelectedDate = (row: number, col: number, day: string) => {
   }
 };
 
+const isToday = (row: number, col: number, day: string) => {
+  if (!isCurrentMonth(row, col)) return false;
+  const date = new Date(
+    props.currentMonth.getFullYear(),
+    props.currentMonth.getMonth(),
+    Number(day)
+  );
+
+  return date.toDateString() === (props._today || new Date()).toDateString();
+};
+
 const isActiveDate = computed(() => {
   const activeDatesSet = new Set(
     props.activeDates?.map((activeDate) => {
diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.stories.ts b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.stories.ts
index aa92ec8d7..b43b552ff 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.stories.ts
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.stories.ts
@@ -340,3 +340,48 @@ const date = ref<Date | null>(null);
     },
   },
 };
+
+export const Today: StoryFn<typeof WizDatepicker> = (args) => ({
+  components: { WizDatepicker, WizHStack },
+  setup() {
+    const date = ref<Date | null>(new Date(2023, 2, 1));
+    const isOpen = ref(true);
+    const setIsOpen = (value: boolean) => (isOpen.value = value);
+    const today = new Date(2023, 2, 5);
+    return { args, date, isOpen, setIsOpen, today };
+  },
+  template: ` 
+    <WizDatepicker
+      v-bind="args"
+      v-model="date"
+      :isOpen="isOpen"
+      :_today="today"
+      @update:modelValue="args.onClick"
+      @update:isOpen="setIsOpen"
+    /> 
+  `,
+});
+
+export const DisabledToday: StoryFn<typeof WizDatepicker> = (args) => ({
+  components: { WizDatepicker, WizHStack },
+  setup() {
+    const date = ref<Date | null>(new Date(2023, 2, 1));
+    const isOpen = ref(true);
+    const setIsOpen = (value: boolean) => (isOpen.value = value);
+    const today = new Date(2023, 2, 15);
+    const disabledDate = (date: Date) =>
+      date.getDate() >= 10 && date.getDate() < 17;
+    return { args, date, isOpen, setIsOpen, today, disabledDate };
+  },
+  template: ` 
+    <WizDatepicker
+      v-bind="args"
+      v-model="date"
+      :isOpen="isOpen"
+      :_today="today"
+      :disabledDate="disabledDate"
+      @update:modelValue="args.onClick"
+      @update:isOpen="setIsOpen"
+    /> 
+  `,
+});
diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
index 9f740ac25..cace12f6e 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
@@ -120,6 +120,7 @@
           :currentMonth="currentMonth"
           filledWeeks
           :disabledDate="disabledDate"
+          :_today="_today || new Date()"
         />
       </div>
     </WizPopup>
@@ -231,6 +232,12 @@ const props = defineProps({
     default: (date: Date) =>
       `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`,
   },
+  // eslint-disable-next-line vue/prop-name-casing
+  _today: {
+    type: Date as PropType<Date>,
+    required: false,
+    default: new Date(),
+  },
 });
 
 const emit = defineEmits<Emit>();
diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts
index 51fb0437e..94d10b31c 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts
@@ -539,3 +539,81 @@ Test.play = async ({ canvasElement }) => {
   await userEvent.tab();
   await userEvent.tab();
 };
+
+export const Today: StoryFn<typeof WizDateRangePicker> = (args) => ({
+  components: { WizDateRangePicker },
+  setup() {
+    const dateRange1 = ref<DateRange>({
+      start: new Date(2000, 0, 15),
+      end: new Date(2000, 1, 15),
+    });
+    const selectBoxValue1 = ref<string>();
+    const isOpen1 = ref(true);
+    const setIsOpen1 = (value: boolean) => (isOpen1.value = value);
+    const today = new Date(2000, 0, 28);
+    return {
+      dateRange1,
+      selectBoxValue1,
+      selectBoxOptions,
+      isOpen1,
+      setIsOpen1,
+      today,
+      args,
+    };
+  },
+  template: `
+    <div style="display: flex; gap: 20rem; flex-direction: column; height: 90rem">
+      <WizDateRangePicker
+        v-model="dateRange1"
+        v-model:selectBoxValue="selectBoxValue1"
+        :selectBoxOptions="selectBoxOptions"
+        @update:modelValue="args.onDateSelected"
+        @update:selectBoxValue="args.onSelectBoxValueChange"
+        :isOpen="isOpen1"
+        @update:isOpen="setIsOpen1"
+        :_today="today"
+      />
+    </div>
+  `,
+});
+
+export const DisabledToday: StoryFn<typeof WizDateRangePicker> = (args) => ({
+  components: { WizDateRangePicker },
+  setup() {
+    const dateRange1 = ref<DateRange>({
+      start: new Date(2000, 0, 15),
+      end: new Date(2000, 1, 15),
+    });
+    const selectBoxValue1 = ref<string>();
+    const isOpen1 = ref(true);
+    const setIsOpen1 = (value: boolean) => (isOpen1.value = value);
+    const today = new Date(2000, 0, 28);
+    const disabledDate = (date: Date) =>
+      date.getDate() >= 20 && date.getDate() < 31;
+    return {
+      dateRange1,
+      selectBoxValue1,
+      selectBoxOptions,
+      isOpen1,
+      setIsOpen1,
+      today,
+      disabledDate,
+      args,
+    };
+  },
+  template: `
+    <div style="display: flex; gap: 20rem; flex-direction: column; height: 90rem">
+      <WizDateRangePicker
+        v-model="dateRange1"
+        v-model:selectBoxValue="selectBoxValue1"
+        :selectBoxOptions="selectBoxOptions"
+        @update:modelValue="args.onDateSelected"
+        @update:selectBoxValue="args.onSelectBoxValueChange"
+        :isOpen="isOpen1"
+        @update:isOpen="setIsOpen1"
+        :_today="today"
+        :disabledDate="disabledDate"
+      />
+    </div>
+  `,
+});
diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
index 7df5cc389..148348dbb 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
@@ -116,6 +116,7 @@
                 @click="handleDayClick"
                 :disabledDate="disabledDate"
                 :filledWeeks="true"
+                :_today="_today || new Date()"
               />
             </div>
             <div :class="styles.popupCalendarContainerStyle['right']">
@@ -141,6 +142,7 @@
                 @click="handleDayClick"
                 :disabledDate="disabledDate"
                 :filledWeeks="true"
+                :_today="_today || new Date()"
               />
             </div>
           </div>
@@ -233,6 +235,12 @@ const props = defineProps({
     default: (date: Date) =>
       `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`,
   },
+  // eslint-disable-next-line vue/prop-name-casing
+  _today: {
+    type: Date as PropType<Date>,
+    required: false,
+    default: new Date(),
+  },
 });
 
 const emit = defineEmits<Emit>();

From 58ba4165004169673c6bfd7759e979eca6b3a4ae Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Tue, 10 Sep 2024 18:41:03 +0900
Subject: [PATCH 06/15] =?UTF-8?q?feat(calendar):=20=E3=82=AD=E3=83=A3?=
 =?UTF-8?q?=E3=83=B3=E3=82=BB=E3=83=AB=E3=83=BB=E9=81=A9=E7=94=A8=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/inputs/date-picker/date-picker.vue   | 33 ++++++++++++++---
 .../date-range-picker/date-range-picker.vue   | 35 +++++++++++++++----
 2 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
index cace12f6e..4914db4ef 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
@@ -36,7 +36,7 @@
     </button>
     <WizPopup
       :isOpen="!disabled && isOpen"
-      @onClose="setIsOpen(false)"
+      @onClose="onClose"
       :isDirectionFixed="isDirectionFixed"
     >
       <div :class="datePickerSelectorStyle">
@@ -107,10 +107,10 @@
         </WizHStack>
         <WizCalendar
           :activeDates="
-            calendarValue
+            tempDate
               ? [
                   {
-                    date: calendarValue,
+                    date: tempDate,
                     state: 'primary',
                   },
                 ]
@@ -122,6 +122,15 @@
           :disabledDate="disabledDate"
           :_today="_today || new Date()"
         />
+        <WizDivider color="gray.300" />
+        <WizHStack p="sm" gap="sm" justify="end">
+          <WizTextButton @click="onClose" variant="sub">
+            {{ ARIA_LABELS.CANCEL }}
+          </WizTextButton>
+          <WizTextButton @click="onSubmit">
+            {{ ARIA_LABELS.APPLY }}
+          </WizTextButton>
+        </WizHStack>
       </div>
     </WizPopup>
   </WizPopupContainer>
@@ -148,11 +157,13 @@ import { PropType, computed, inject, ref } from "vue";
 
 import {
   WizCalendar,
+  WizDivider,
   WizHStack,
   WizIcon,
   WizPopup,
   WizPopupContainer,
   WizText,
+  WizTextButton,
   WizVStack,
 } from "@/components";
 import {
@@ -248,6 +259,8 @@ const currentMonth = ref(defaultCurrentMonth);
 const setIsOpen = (value: boolean) => emit("update:isOpen", value);
 const onClickCancel = () => emit("update:modelValue", null);
 
+const tempDate = ref(props.modelValue);
+
 const clickToNextMonth = (e: KeyboardEvent | MouseEvent) => {
   e.preventDefault();
   const setDateTime = new Date(
@@ -308,9 +321,19 @@ const borderState = computed(() => {
 
 const variant = computed(() => {
   if (props.disabled) return "disabled";
-  if (calendarValue.value) return "selected";
+  if (tempDate.value) return "selected";
   return "default";
 });
 
-const handleClickCalendar = (date: Date) => (calendarValue.value = date);
+const handleClickCalendar = (date: Date) => (tempDate.value = date);
+
+const onClose = () => {
+  tempDate.value = calendarValue.value;
+  setIsOpen(false);
+};
+
+const onSubmit = () => {
+  calendarValue.value = tempDate.value;
+  setIsOpen(false);
+};
 </script>
diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
index 148348dbb..b59a9a196 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
@@ -49,7 +49,7 @@
     </button>
     <WizPopup
       :isOpen="!disabled && isOpen"
-      @onClose="setIsOpen(false)"
+      @onClose="onClose"
       :isDirectionFixed="isDirectionFixed"
     >
       <WizCard p="no">
@@ -146,6 +146,15 @@
               />
             </div>
           </div>
+          <WizDivider color="gray.300" />
+          <WizHStack p="sm" gap="sm" justify="end">
+            <WizTextButton @click="onClose" variant="sub">
+              {{ ARIA_LABELS.CANCEL }}
+            </WizTextButton>
+            <WizTextButton @click="onSubmit">
+              {{ ARIA_LABELS.APPLY }}
+            </WizTextButton>
+          </WizHStack>
         </div>
       </WizCard>
     </WizPopup>
@@ -161,6 +170,7 @@ import { computed, inject, PropType, ref } from "vue";
 import {
   WizCalendar,
   WizCard,
+  WizDivider,
   WizHStack,
   WizICalendar,
   WizICancel,
@@ -171,6 +181,7 @@ import {
   WizIExpandMore,
   WizPopup,
   WizPopupContainer,
+  WizTextButton,
 } from "@/components";
 import { useClickOutside } from "@/hooks/use-click-outside";
 import { formControlKey } from "@/hooks/use-form-control-provider";
@@ -272,6 +283,8 @@ const setIsOpen = (value: boolean) => emit("update:isOpen", value);
 const onClickCancel = () =>
   emit("update:modelValue", { start: null, end: null });
 
+const tempDateRange = ref(props.modelValue);
+
 const moveToNextMonth = (e: KeyboardEvent | MouseEvent) => {
   e.preventDefault();
   rightCalendarDate.value = new Date(
@@ -289,7 +302,7 @@ const selectedDates = computed<DateStatus[]>(() => {
     date,
     state,
   });
-  const [start, end] = [props.modelValue.start, props.modelValue.end];
+  const [start, end] = [tempDateRange.value.start, tempDateRange.value.end];
   if (start && end) {
     const secondaries: DateStatus[] = [];
     const tomorrowOfStart = new Date(start);
@@ -310,17 +323,17 @@ const selectedDates = computed<DateStatus[]>(() => {
 });
 
 const handleDayClick = (date: Date) => {
-  const [start, end] = [props.modelValue.start, props.modelValue.end];
+  const [start, end] = [tempDateRange.value.start, tempDateRange.value.end];
   if (start && end) {
-    emit("update:modelValue", { start: date, end: null });
+    tempDateRange.value = { start: date, end: null };
     return;
   }
   if (start) {
     const [nextStart, nextEnd] = start > date ? [date, start] : [start, date];
-    emit("update:modelValue", { start: nextStart, end: nextEnd });
+    tempDateRange.value = { start: nextStart, end: nextEnd };
     return;
   }
-  emit("update:modelValue", { start: date, end: null });
+  tempDateRange.value = { start: date, end: null };
 };
 
 const toggleSelectBoxOpen = () => {
@@ -353,4 +366,14 @@ const borderState = computed(() => {
   if (props.isOpen && !props.disabled) return "active";
   return "default";
 });
+
+const onClose = () => {
+  tempDateRange.value = props.modelValue;
+  setIsOpen(false);
+};
+
+const onSubmit = () => {
+  emit("update:modelValue", tempDateRange.value);
+  setIsOpen(false);
+};
 </script>

From b7f433774f2e734f3ca6303a4c1bedb255293e18 Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Wed, 11 Sep 2024 18:45:24 +0900
Subject: [PATCH 07/15] =?UTF-8?q?test(date-picker,date-range-picker):=20?=
 =?UTF-8?q?=E3=83=86=E3=82=B9=E3=83=88=E3=81=8C=E8=90=BD=E3=81=A1=E3=81=A6?=
 =?UTF-8?q?=E3=81=84=E3=81=9F=E3=81=AE=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../inputs/date-picker/date-picker.stories.ts | 22 +++++++++++
 .../date-range-picker.stories.ts              | 37 +++++++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.stories.ts b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.stories.ts
index b43b552ff..d023c2843 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.stories.ts
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.stories.ts
@@ -259,6 +259,7 @@ Test.play = async ({ canvasElement }) => {
 
   // その月の15日を選択
   const body = within(canvasElement.ownerDocument.body);
+  const initialDate = new Date(date.getFullYear(), date.getMonth(), 1);
   const clickDate = new Date(date.getFullYear(), date.getMonth(), 15);
   const pastClickDate = new Date(date.getFullYear(), date.getMonth() - 1, 15);
   const clickDateEl = body.getByLabelText(_formatDateJp(clickDate));
@@ -270,11 +271,24 @@ Test.play = async ({ canvasElement }) => {
       `${_formatDateJp(clickDate)}-選択済み`
     )
   );
+
+  // クリックした段階ではまだInputに反映されていないこと
+  await waitFor(() =>
+    expect(button.textContent).toBe(_formatDateJp(initialDate))
+  );
+
+  // 適用ボタンをクリック
+  const applyButton = body.getByText(ARIA_LABELS.APPLY);
+  await userEvent.click(applyButton);
+
   // Input内が選択した日付になることを確認
   await waitFor(() =>
     expect(button.textContent).toBe(_formatDateJp(clickDate))
   );
 
+  // カレンダー再オープン
+  await userEvent.click(button);
+
   // 月セレクターのPrevを1回押して操作月を1ヶ月前にする
   const monthSelectorPrev = body.getByLabelText(
     ARIA_LABELS.MONTH_SELECTOR_PREV
@@ -296,6 +310,14 @@ Test.play = async ({ canvasElement }) => {
     )
   );
 
+  // Input内が選択した日付になることを確認
+  await waitFor(() =>
+    expect(button.textContent).toBe(_formatDateJp(new Date(clickDate)))
+  );
+
+  // 適用ボタンをクリック
+  await userEvent.click(applyButton);
+
   // Input内が選択した日付になることを確認
   await waitFor(() =>
     expect(button.textContent).toBe(_formatDateJp(new Date(pastClickDate)))
diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts
index 94d10b31c..e6e2d0b4e 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts
@@ -460,6 +460,16 @@ Test.play = async ({ canvasElement }) => {
 
   //左のCalenderから15日を選択
   const body = within(canvasElement.ownerDocument.body);
+  const initialLeftDate = new Date(
+    intermediateDate.getFullYear(),
+    intermediateDate.getMonth(),
+    0
+  );
+  const initialRightDate = new Date(
+    intermediateDate.getFullYear(),
+    intermediateDate.getMonth() + 1,
+    0
+  );
   const leftClickDate = new Date(
     intermediateDate.getFullYear(),
     intermediateDate.getMonth() - 1,
@@ -474,11 +484,26 @@ Test.play = async ({ canvasElement }) => {
       `${_formatDateJp(leftClickDate)}-選択済み`
     )
   );
+
+  // クリックした段階ではまだInputに反映されていないこと
+  await waitFor(() =>
+    expect(button.textContent).toBe(
+      `${_formatDateJp(initialLeftDate)}-${_formatDateJp(initialRightDate)}`
+    )
+  );
+
+  // 適用ボタンをクリック
+  const applyButton = body.getByText(ARIA_LABELS.APPLY);
+  await userEvent.click(applyButton);
+
   // Input内が選択した日付になることを確認
   await waitFor(() =>
     expect(button.textContent).toBe(_formatDateJp(leftClickDate) + "-終了日")
   );
 
+  // カレンダー再オープン
+  await userEvent.click(button);
+
   // 右のCalenderから15日を選択
   const rightClickDate = new Date(
     intermediateDate.getFullYear(),
@@ -494,12 +519,24 @@ Test.play = async ({ canvasElement }) => {
       `${_formatDateJp(rightClickDate)}-選択済み`
     )
   );
+  // クリックした段階ではまだInputに反映されていないこと
+  await waitFor(() =>
+    expect(button.textContent).toBe(_formatDateJp(leftClickDate) + "-終了日")
+  );
+
+  // 適用ボタンをクリック
+  await userEvent.click(applyButton);
+
   // Input内が選択した日付になることを確認
   await waitFor(() =>
     expect(button.textContent?.replace(/\s+/g, "")).toBe(
       `${_formatDateJp(leftClickDate)}-${_formatDateJp(rightClickDate)}`
     )
   );
+
+  // カレンダー再オープン
+  await userEvent.click(button);
+
   // data-is-selectedなボタンがrightClickedDate ~ leftClickedDateの間の数だけあることを確認
   const diff = Math.floor(
     (rightClickDate.getTime() - leftClickDate.getTime()) / (1000 * 60 * 60 * 24)

From bd0489ab0bd38b8c6cd303a0fe68b35c149c797c Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Tue, 12 Nov 2024 18:33:29 +0900
Subject: [PATCH 08/15] =?UTF-8?q?feat(date-range-picker):=20=E3=82=AD?=
 =?UTF-8?q?=E3=83=A3=E3=83=B3=E3=82=BB=E3=83=AB=E6=99=82=E3=81=AB=E3=82=BB?=
 =?UTF-8?q?=E3=83=AC=E3=82=AF=E3=82=BF=E3=83=BC=E3=82=92=E6=88=BB=E3=81=99?=
 =?UTF-8?q?=EF=BC=86popup=E5=A4=96=E3=82=92=E3=82=AF=E3=83=AA=E3=83=83?=
 =?UTF-8?q?=E3=82=AF=E3=81=A7=E5=85=A5=E5=8A=9B=E3=82=92=E6=88=BB=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/date-range-picker.tsx             | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
index fd24fb93d..69db08db4 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
@@ -107,6 +107,19 @@ const DateRangePicker: FC<Props> = ({
     );
   };
 
+  const initiaizeRightCalendarDate = () => {
+    const [start, end] = [dateRange.start, dateRange.end];
+    if (end) {
+      setRightCalendarDate(new Date(end));
+    } else if (start) {
+      setRightCalendarDate(
+        new Date(start.getFullYear(), start.getMonth() + 1, 1)
+      );
+    } else {
+      setRightCalendarDate(new Date());
+    }
+  };
+
   const selectedDates = useMemo(() => {
     const getDateStatus = (
       date: Date,
@@ -189,6 +202,7 @@ const DateRangePicker: FC<Props> = ({
   })();
 
   const onClose = () => {
+    initiaizeRightCalendarDate();
     setTempDateRange(dateRange);
     setIsOpen(false);
   };
@@ -265,7 +279,7 @@ const DateRangePicker: FC<Props> = ({
       </button>
       <WizPopup
         isOpen={!disabled && isOpen}
-        onClose={() => setIsOpen(false)}
+        onClose={onClose}
         isDirectionFixed={isDirectionFixed}
         anchorElement={anchor}
       >

From ed07160aa3dfee87c5245a153ae7db25a0a66514 Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Tue, 12 Nov 2024 18:39:31 +0900
Subject: [PATCH 09/15] =?UTF-8?q?feat(date-range-picker):=20=E3=82=AD?=
 =?UTF-8?q?=E3=83=A3=E3=83=B3=E3=82=BB=E3=83=AB=E6=99=82=E3=81=AB=E3=82=BB?=
 =?UTF-8?q?=E3=83=AC=E3=82=AF=E3=82=BF=E3=83=BC=E3=82=92=E6=88=BB=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../date-range-picker/date-range-picker.vue      | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
index 512082efb..88233cd72 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
@@ -282,6 +282,21 @@ const leftCalendarDate = computed(() => {
   );
   return date;
 });
+const initializeRightCalendarDate = () => {
+  rightCalendarDate.value = new Date();
+  const [start, end] = [props.modelValue.start, props.modelValue.end];
+  if (end) {
+    rightCalendarDate.value = new Date(end);
+  } else if (start) {
+    rightCalendarDate.value = new Date(
+      start.getFullYear(),
+      start.getMonth() + 1,
+      1
+    );
+  } else {
+    rightCalendarDate.value = new Date();
+  }
+};
 
 const setIsOpen = (value: boolean) => emit("update:isOpen", value);
 const onClickCancel = () =>
@@ -373,6 +388,7 @@ const borderState = computed(() => {
 
 const onClose = () => {
   tempDateRange.value = props.modelValue;
+  initializeRightCalendarDate();
   setIsOpen(false);
 };
 

From 52f569ceabcb2ecb4dc1f68b1e2cb77cb07c1f69 Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Tue, 12 Nov 2024 18:46:41 +0900
Subject: [PATCH 10/15] =?UTF-8?q?feat(date-picker):=20=E3=82=AD=E3=83=A3?=
 =?UTF-8?q?=E3=83=B3=E3=82=BB=E3=83=AB=E6=99=82=E3=81=AB=E3=82=BB=E3=83=AC?=
 =?UTF-8?q?=E3=82=AF=E3=82=BF=E3=83=BC=E3=82=92=E6=88=BB=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/inputs/date-picker/components/date-picker.tsx           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx b/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx
index 23f868bcd..cd296a066 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx
@@ -120,6 +120,7 @@ const DatePicker: FC<Props> = ({
 
   const onClose = () => {
     setTempDate(date);
+    setCurrentMonth(date || new Date());
     setIsOpen(false);
   };
 

From d320993a0299165db814de78ae29b1072f7b2a4b Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Tue, 12 Nov 2024 18:48:40 +0900
Subject: [PATCH 11/15] =?UTF-8?q?feat(date-picker):=20=E3=82=AD=E3=83=A3?=
 =?UTF-8?q?=E3=83=B3=E3=82=BB=E3=83=AB=E6=99=82=E3=81=AB=E3=82=BB=E3=83=AC?=
 =?UTF-8?q?=E3=82=AF=E3=82=BF=E3=83=BC=E3=82=92=E6=88=BB=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/base/inputs/date-picker/date-picker.vue       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
index 4914db4ef..b9ad77810 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
@@ -329,6 +329,7 @@ const handleClickCalendar = (date: Date) => (tempDate.value = date);
 
 const onClose = () => {
   tempDate.value = calendarValue.value;
+  currentMonth.value = new Date(defaultCurrentMonth);
   setIsOpen(false);
 };
 

From 2c5566a0203d22a08198952ce5c7d35529736d2f Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Tue, 24 Dec 2024 18:26:29 +0900
Subject: [PATCH 12/15] =?UTF-8?q?feat(date-picker):=20=EF=BD=98=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E6=8A=BC=E4=B8=8B=E3=81=A7=E3=82=AB=E3=83=AC?=
 =?UTF-8?q?=E3=83=B3=E3=83=80=E3=83=BC=E9=81=B8=E6=8A=9E=E7=8A=B6=E6=85=8B?=
 =?UTF-8?q?=E3=82=92=E3=82=AF=E3=83=AA=E3=82=A2=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../date-picker/components/date-picker.tsx    | 19 +++++++++++++++++--
 .../components/date-range-picker.tsx          | 10 +++++++++-
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx b/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx
index cd296a066..b1b43ea76 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/date-picker/components/date-picker.tsx
@@ -6,7 +6,14 @@ import {
   inputBorderStyle,
 } from "@wizleap-inc/wiz-ui-styles/commons";
 import clsx from "clsx";
-import { FC, KeyboardEvent, useContext, useRef, useState } from "react";
+import {
+  FC,
+  KeyboardEvent,
+  MouseEvent,
+  useContext,
+  useRef,
+  useState,
+} from "react";
 
 import {
   WizCalendar,
@@ -118,6 +125,14 @@ const DatePicker: FC<Props> = ({
   })();
   const wrapperButtonRef = useRef<HTMLButtonElement | null>(null);
 
+  const onCancel = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    setTempDate(null);
+    setCurrentMonth(new Date());
+    onChangeDate(null);
+    setIsOpen(false);
+  };
+
   const onClose = () => {
     setTempDate(date);
     setCurrentMonth(date || new Date());
@@ -160,7 +175,7 @@ const DatePicker: FC<Props> = ({
               type="button"
               className={styles.datePickerCancelIconStyle}
               disabled={disabled}
-              onClick={() => onChangeDate(null)}
+              onClick={onCancel}
               aria-label={ARIA_LABELS.DATE_PICKER_CANCEL}
             >
               <WizIcon size="xl2" color="inherit" icon={WizICancel} />
diff --git a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
index 69db08db4..9ff0ecaeb 100644
--- a/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
+++ b/packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx
@@ -5,6 +5,7 @@ import clsx from "clsx";
 import {
   FC,
   KeyboardEvent,
+  MouseEvent,
   useCallback,
   useContext,
   useMemo,
@@ -95,7 +96,6 @@ const DateRangePicker: FC<Props> = ({
       ),
     [rightCalendarDate]
   );
-  const onClickCancel = () => onChangeDateRange({ start: null, end: null });
   const moveCalendar = (command: "nextMonth" | "prevMonth") => {
     const dm = command === "nextMonth" ? 1 : -1;
     setRightCalendarDate(
@@ -201,6 +201,14 @@ const DateRangePicker: FC<Props> = ({
     return "default";
   })();
 
+  const onClickCancel = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    initiaizeRightCalendarDate();
+    setTempDateRange({ start: null, end: null });
+    onChangeDateRange({ start: null, end: null });
+    setIsOpen(false);
+  };
+
   const onClose = () => {
     initiaizeRightCalendarDate();
     setTempDateRange(dateRange);

From 3fe1ffc43242e2f569bdb7051c90cb0f2e0de933 Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Tue, 24 Dec 2024 18:41:49 +0900
Subject: [PATCH 13/15] =?UTF-8?q?feat(date-picker):=20=EF=BD=98=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E6=8A=BC=E4=B8=8B=E3=81=A7=E3=82=AB=E3=83=AC?=
 =?UTF-8?q?=E3=83=B3=E3=83=80=E3=83=BC=E9=81=B8=E6=8A=9E=E7=8A=B6=E6=85=8B?=
 =?UTF-8?q?=E3=82=92=E3=82=AF=E3=83=AA=E3=82=A2=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/inputs/date-picker/date-picker.vue           | 10 ++++++++--
 .../inputs/date-range-picker/date-range-picker.vue    | 11 ++++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
index b9ad77810..c29c4b8dc 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
@@ -257,8 +257,6 @@ const defaultCurrentMonth = props.modelValue || new Date();
 const currentMonth = ref(defaultCurrentMonth);
 
 const setIsOpen = (value: boolean) => emit("update:isOpen", value);
-const onClickCancel = () => emit("update:modelValue", null);
-
 const tempDate = ref(props.modelValue);
 
 const clickToNextMonth = (e: KeyboardEvent | MouseEvent) => {
@@ -327,6 +325,14 @@ const variant = computed(() => {
 
 const handleClickCalendar = (date: Date) => (tempDate.value = date);
 
+const onClickCancel = (e: MouseEvent) => {
+  e.stopPropagation();
+  tempDate.value = null;
+  currentMonth.value = new Date(defaultCurrentMonth);
+  calendarValue.value = null;
+  setIsOpen(false);
+};
+
 const onClose = () => {
   tempDate.value = calendarValue.value;
   currentMonth.value = new Date(defaultCurrentMonth);
diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
index 88233cd72..71ce7dbeb 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue
@@ -299,9 +299,6 @@ const initializeRightCalendarDate = () => {
 };
 
 const setIsOpen = (value: boolean) => emit("update:isOpen", value);
-const onClickCancel = () =>
-  emit("update:modelValue", { start: null, end: null });
-
 const tempDateRange = ref(props.modelValue);
 
 const moveToNextMonth = (e: KeyboardEvent | MouseEvent) => {
@@ -386,6 +383,14 @@ const borderState = computed(() => {
   return "default";
 });
 
+const onClickCancel = (e: MouseEvent) => {
+  e.stopPropagation();
+  tempDateRange.value = { start: null, end: null };
+  initializeRightCalendarDate();
+  emit("update:modelValue", tempDateRange.value);
+  setIsOpen(false);
+};
+
 const onClose = () => {
   tempDateRange.value = props.modelValue;
   initializeRightCalendarDate();

From d92cc4f646240feb4d89cbfcffef9e13c8b20be3 Mon Sep 17 00:00:00 2001
From: "k.tada" <white.rv0925@gmail.com>
Date: Wed, 25 Dec 2024 16:38:23 +0900
Subject: [PATCH 14/15] =?UTF-8?q?feat(date-picker):=20placeholder=E5=91=A8?=
 =?UTF-8?q?=E3=82=8A=E3=81=AE=E5=87=A6=E7=90=86=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/base/inputs/date-picker/date-picker.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
index c29c4b8dc..1f80c9c78 100644
--- a/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
+++ b/packages/wiz-ui-next/src/components/base/inputs/date-picker/date-picker.vue
@@ -319,7 +319,7 @@ const borderState = computed(() => {
 
 const variant = computed(() => {
   if (props.disabled) return "disabled";
-  if (tempDate.value) return "selected";
+  if (calendarValue.value) return "selected";
   return "default";
 });
 
@@ -329,7 +329,7 @@ const onClickCancel = (e: MouseEvent) => {
   e.stopPropagation();
   tempDate.value = null;
   currentMonth.value = new Date(defaultCurrentMonth);
-  calendarValue.value = null;
+  emit("update:modelValue", null);
   setIsOpen(false);
 };
 

From 44c0b9b1bbdd2c8797e59119473e5ea3339d4313 Mon Sep 17 00:00:00 2001
From: ichi-h <85932406+ichi-h@users.noreply.github.com>
Date: Thu, 26 Dec 2024 13:54:49 +0900
Subject: [PATCH 15/15] =?UTF-8?q?chore:=20wiz-ui-next=E3=81=AE=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/olive-snails-tie.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.changeset/olive-snails-tie.md b/.changeset/olive-snails-tie.md
index ebbf390d6..53328610b 100644
--- a/.changeset/olive-snails-tie.md
+++ b/.changeset/olive-snails-tie.md
@@ -1,5 +1,6 @@
 ---
 "@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
 "@wizleap-inc/wiz-ui-constants": minor
 "@wizleap-inc/wiz-ui-styles": minor
 ---