@acusti/date-picker 0.12.0 → 0.14.0

package/dist/MonthCalendar.d.ts

@@ -9,4 +9,4 @@ export type Props = {
     onChangeEndPreview?: (date: string) => void;
     title?: string;
 };
-export default function MonthCalendar({ className, dateEnd, dateEndPreview, dateStart, isRange, month, onChange, onChangeEndPreview, title, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function MonthCalendar({ className, dateEnd, dateEndPreview, dateStart, isRange, month: _month, onChange, onChangeEndPreview, title, }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -87,12 +87,16 @@ h3.${ROOT_CLASS_NAME$1}-month-title-text {
     cursor: auto;
 }
 
-.${ROOT_CLASS_NAME$1}-month-day-item.is-selected {
-    background-color: #f8f8f8;
+.${ROOT_CLASS_NAME$1}-month-day-item.is-today span.month-day-item-text {
+    color: #eb4e3d;
 }
 
-.${ROOT_CLASS_NAME$1}-month-day-item.start-date {
-    background-color: #f8f8f8;
+.${ROOT_CLASS_NAME$1}.is-range .${ROOT_CLASS_NAME$1}-month-day-item.is-selected {
+    background-color: #f6f6f6;
+}
+
+.${ROOT_CLASS_NAME$1}.is-range .${ROOT_CLASS_NAME$1}-month-day-item.start-date {
+    background-color: #f6f6f6;
     border-top-left-radius: 50%;
     border-bottom-left-radius: 50%;
 }
@@ -102,12 +106,13 @@ h3.${ROOT_CLASS_NAME$1}-month-title-text {
     opacity: 1;
     visibility: visible;
 }
+
 .${ROOT_CLASS_NAME$1}-month-day-item.start-date span.month-day-item-text {
     color: #fff;
 }
 
-.${ROOT_CLASS_NAME$1}-month-day-item.end-date {
-    background-color: #f8f8f8;
+.${ROOT_CLASS_NAME$1}.is-range .${ROOT_CLASS_NAME$1}-month-day-item.end-date {
+    background-color: #f6f6f6;
     border-top-right-radius: 50%;
     border-bottom-right-radius: 50%;
 }
@@ -117,11 +122,14 @@ h3.${ROOT_CLASS_NAME$1}-month-title-text {
     opacity: 1;
     visibility: visible;
 }
+
 .${ROOT_CLASS_NAME$1}-month-day-item.end-date span.month-day-item-text {
     color: #fff;
 }
 
-.${ROOT_CLASS_NAME$1}-month-day-item:hover:after {
+.${ROOT_CLASS_NAME$1}-month-day-item:hover:after,
+.${ROOT_CLASS_NAME$1}-month-day-item.is-today:hover:after {
+    border-color: #000;
     opacity: 1;
     visibility: visible;
 }
@@ -185,278 +193,259 @@ const getLastDateFromMonth = (month, asUTC) => {
 };
 const DAYS = Array(7).fill(null);
 function MonthCalendar(t0) {
-  const $ = c(56);
+  const $ = c(47);
   let {
     className,
     dateEnd,
     dateEndPreview,
     dateStart,
     isRange,
-    month,
+    month: _month,
     onChange,
     onChangeEndPreview,
     title
   } = t0;
-  const year = getYearFromMonth(month);
-  title = title ?? `${getMonthNameFromMonth(month)} ${year}`;
-  let firstDay;
+  let T0;
   let t1;
   let t2;
-  let totalDays;
-  if ($[0] !== month) {
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  if ($[0] !== _month || $[1] !== className || $[2] !== dateEnd || $[3] !== dateEndPreview || $[4] !== dateStart || $[5] !== isRange || $[6] !== onChange || $[7] !== onChangeEndPreview || $[8] !== title) {
+    const today = /* @__PURE__ */ new Date();
+    const month = Number.isFinite(_month) ? Math.max(Number.MIN_SAFE_INTEGER, Math.min(Number.MAX_SAFE_INTEGER, _month)) : getMonthFromDate(today);
+    const year = getYearFromMonth(month);
+    title = title ?? `${getMonthNameFromMonth(month)} ${year}`;
     const firstDate = getDateFromMonthAndDay(month, 1);
     const lastDate = getLastDateFromMonth(month);
-    totalDays = lastDate.getDate();
-    firstDay = firstDate.getDay();
-    t2 = 7;
-    t1 = lastDate.getDay();
-    $[0] = month;
-    $[1] = firstDay;
-    $[2] = t1;
-    $[3] = t2;
-    $[4] = totalDays;
-  } else {
-    firstDay = $[1];
-    t1 = $[2];
-    t2 = $[3];
-    totalDays = $[4];
-  }
-  const spacesAfterLastDay = t2 - t1 % 7;
-  const daySpaces = totalDays + firstDay + spacesAfterLastDay;
-  let t3;
-  if ($[5] !== dateEnd || $[6] !== dateEndPreview || $[7] !== dateStart || $[8] !== month || $[9] !== totalDays) {
-    let t42;
-    if ($[11] !== month || $[12] !== totalDays) {
-      t42 = (acc, date, index) => {
-        if (date != null && !(date instanceof Date)) {
-          date = new Date(date);
+    const totalDays = lastDate.getDate();
+    const firstDay = firstDate.getDay();
+    const spacesAfterLastDay = 7 - lastDate.getDay() % 7;
+    const daySpaces = totalDays + firstDay + spacesAfterLastDay;
+    const [dateRangeStartDay, dateRangeEndDay, dateRangeEndPreviewDay] = [dateStart, dateEnd, dateEndPreview].reduce((acc, date, index) => {
+      if (date != null && !(date instanceof Date)) {
+        date = new Date(date);
+      }
+      if (date == null || Number.isNaN(date.getTime())) {
+        return acc;
+      }
+      const dateMonth = getMonthFromDate(date);
+      if (dateMonth < month) {
+        acc[index] = -1;
+      } else {
+        if (dateMonth > month) {
+          acc[index] = totalDays + 1;
+        } else {
+          acc[index] = date.getDate();
         }
-        if (date == null || Number.isNaN(date.getTime())) {
-          return acc;
+      }
+      if (index === 1) {
+        const startDay = acc[index - 1];
+        const endDay = acc[index];
+        if (startDay != null && endDay != null && startDay > endDay) {
+          acc[index - 1] = endDay;
+          acc[index] = startDay;
         }
-        const dateMonth = getMonthFromDate(date);
-        if (dateMonth < month) {
-          acc[index] = -1;
-        } else {
-          if (dateMonth > month) {
-            acc[index] = totalDays + 1;
-          } else {
-            acc[index] = date.getDate();
-          }
+      }
+      return acc;
+    }, [null, null, null]);
+    let t72;
+    if ($[17] !== onChange) {
+      t72 = (event) => {
+        const {
+          date: date_0
+        } = event.currentTarget.dataset;
+        if (date_0 && onChange) {
+          onChange(date_0);
         }
-        if (index === 1) {
-          const startDay = acc[index - 1];
-          const endDay = acc[index];
-          if (startDay != null && endDay != null && startDay > endDay) {
-            acc[index - 1] = endDay;
-            acc[index] = startDay;
+      };
+      $[17] = onChange;
+      $[18] = t72;
+    } else {
+      t72 = $[18];
+    }
+    const handleClickDay = t72;
+    let t82;
+    if ($[19] !== isRange || $[20] !== onChangeEndPreview) {
+      t82 = (event_0) => {
+        if (isRange && onChangeEndPreview) {
+          const {
+            date: date_1
+          } = event_0.currentTarget.dataset;
+          if (date_1) {
+            onChangeEndPreview(date_1);
           }
         }
-        return acc;
       };
-      $[11] = month;
-      $[12] = totalDays;
-      $[13] = t42;
+      $[19] = isRange;
+      $[20] = onChangeEndPreview;
+      $[21] = t82;
     } else {
-      t42 = $[13];
+      t82 = $[21];
     }
-    t3 = [dateStart, dateEnd, dateEndPreview].reduce(t42, [null, null, null]);
-    $[5] = dateEnd;
-    $[6] = dateEndPreview;
-    $[7] = dateStart;
-    $[8] = month;
-    $[9] = totalDays;
-    $[10] = t3;
-  } else {
-    t3 = $[10];
-  }
-  const [dateRangeStartDay, dateRangeEndDay, dateRangeEndPreviewDay] = t3;
-  let t4;
-  if ($[14] !== onChange) {
-    t4 = (event) => {
-      const {
-        date: date_0
-      } = event.currentTarget.dataset;
-      if (date_0 && onChange) {
-        onChange(date_0);
-      }
-    };
-    $[14] = onChange;
-    $[15] = t4;
-  } else {
-    t4 = $[15];
-  }
-  const handleClickDay = t4;
-  let t5;
-  if ($[16] !== isRange || $[17] !== onChangeEndPreview) {
-    t5 = (event_0) => {
-      if (isRange && onChangeEndPreview) {
-        const {
-          date: date_1
-        } = event_0.currentTarget.dataset;
-        if (date_1) {
-          onChangeEndPreview(date_1);
-        }
-      }
-    };
-    $[16] = isRange;
-    $[17] = onChangeEndPreview;
-    $[18] = t5;
-  } else {
-    t5 = $[18];
-  }
-  const handleMouseEnterDay = t5;
-  let t6;
-  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = /* @__PURE__ */ jsx(Style, { href: "@acusti/date-picker/MonthCalendar", children: STYLES$1 });
-    $[19] = t6;
-  } else {
-    t6 = $[19];
+    const handleMouseEnterDay = t82;
+    T0 = Fragment;
+    if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = /* @__PURE__ */ jsx(Style, { href: "@acusti/date-picker/MonthCalendar", children: STYLES$1 });
+      $[22] = t6;
+    } else {
+      t6 = $[22];
+    }
+    if ($[23] !== className || $[24] !== isRange) {
+      t3 = clsx(ROOT_CLASS_NAME$1, className, {
+        "is-range": isRange
+      });
+      $[23] = className;
+      $[24] = isRange;
+      $[25] = t3;
+    } else {
+      t3 = $[25];
+    }
+    if ($[26] !== title) {
+      t4 = /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME$1}-month-title`, children: /* @__PURE__ */ jsx("h3", { className: `${ROOT_CLASS_NAME$1}-month-title-text`, children: title }) });
+      $[26] = title;
+      $[27] = t4;
+    } else {
+      t4 = $[27];
+    }
+    let t92;
+    if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+      t92 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Su" }) });
+      $[28] = t92;
+    } else {
+      t92 = $[28];
+    }
+    let t10;
+    if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+      t10 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Mo" }) });
+      $[29] = t10;
+    } else {
+      t10 = $[29];
+    }
+    let t11;
+    if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+      t11 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Tu" }) });
+      $[30] = t11;
+    } else {
+      t11 = $[30];
+    }
+    let t12;
+    if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+      t12 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "We" }) });
+      $[31] = t12;
+    } else {
+      t12 = $[31];
+    }
+    let t13;
+    if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+      t13 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Th" }) });
+      $[32] = t13;
+    } else {
+      t13 = $[32];
+    }
+    let t14;
+    if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+      t14 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Fr" }) });
+      $[33] = t14;
+    } else {
+      t14 = $[33];
+    }
+    if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+      t5 = /* @__PURE__ */ jsxs("div", { className: `${ROOT_CLASS_NAME$1}-month-week`, children: [
+        t92,
+        t10,
+        t11,
+        t12,
+        t13,
+        t14,
+        /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Sa" }) })
+      ] });
+      $[34] = t5;
+    } else {
+      t5 = $[34];
+    }
+    t1 = `${ROOT_CLASS_NAME$1}-month-days`;
+    t2 = Array(Math.floor(daySpaces / 7)).fill(null).map((_, weekIndex) => /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME$1}-month-row`, children: DAYS.map((__, dayIndex) => {
+      dayIndex = dayIndex + weekIndex * 7;
+      const dayNumber = dayIndex - firstDay + 1;
+      const isEmpty = dayNumber < 1 || dayNumber > totalDays;
+      const date_2 = isEmpty ? null : getDateFromMonthAndDay(month, dayNumber);
+      const isAfterDateRangeStart = dateRangeStartDay != null && dayNumber > dateRangeStartDay;
+      const isBeforeDateRangeEnd = dateRangeEndDay == null && dateRangeEndPreviewDay != null && dayNumber < dateRangeEndPreviewDay || dateRangeEndDay != null && dayNumber < dateRangeEndDay;
+      return /* @__PURE__ */ jsx("button", { className: clsx(`${ROOT_CLASS_NAME$1}-month-day-item`, {
+        "end-date": !isEmpty && dayNumber === dateRangeEndDay,
+        "is-empty": isEmpty,
+        "is-selected": !isEmpty && isAfterDateRangeStart && isBeforeDateRangeEnd,
+        "is-today": !isEmpty && month === getMonthFromDate(today) && dayNumber === today.getDate(),
+        "start-date": !isEmpty && dayNumber === dateRangeStartDay
+      }), "data-date": date_2?.toISOString(), disabled: isEmpty, onClick: handleClickDay, onMouseEnter: handleMouseEnterDay, type: "button", children: isEmpty ? null : /* @__PURE__ */ jsx("span", { className: "month-day-item-text", children: dayNumber }) }, `MonthDayItem-${dayNumber}`);
+    }) }, `MonthRow-${weekIndex}`));
+    $[0] = _month;
+    $[1] = className;
+    $[2] = dateEnd;
+    $[3] = dateEndPreview;
+    $[4] = dateStart;
+    $[5] = isRange;
+    $[6] = onChange;
+    $[7] = onChangeEndPreview;
+    $[8] = title;
+    $[9] = T0;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+    $[15] = t6;
+    $[16] = title;
+  } else {
+    T0 = $[9];
+    t1 = $[10];
+    t2 = $[11];
+    t3 = $[12];
+    t4 = $[13];
+    t5 = $[14];
+    t6 = $[15];
+    title = $[16];
   }
   let t7;
-  if ($[20] !== className) {
-    t7 = clsx(ROOT_CLASS_NAME$1, className);
-    $[20] = className;
-    $[21] = t7;
+  if ($[35] !== t1 || $[36] !== t2) {
+    t7 = /* @__PURE__ */ jsx("div", { className: t1, children: t2 });
+    $[35] = t1;
+    $[36] = t2;
+    $[37] = t7;
   } else {
-    t7 = $[21];
+    t7 = $[37];
   }
   let t8;
-  if ($[22] !== title) {
-    t8 = /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME$1}-month-title`, children: /* @__PURE__ */ jsx("h3", { className: `${ROOT_CLASS_NAME$1}-month-title-text`, children: title }) });
-    $[22] = title;
-    $[23] = t8;
-  } else {
-    t8 = $[23];
-  }
-  let t9;
-  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-    t9 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Su" }) });
-    $[24] = t9;
-  } else {
-    t9 = $[24];
-  }
-  let t10;
-  if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-    t10 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Mo" }) });
-    $[25] = t10;
-  } else {
-    t10 = $[25];
-  }
-  let t11;
-  if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-    t11 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Tu" }) });
-    $[26] = t11;
-  } else {
-    t11 = $[26];
-  }
-  let t12;
-  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-    t12 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "We" }) });
-    $[27] = t12;
-  } else {
-    t12 = $[27];
-  }
-  let t13;
-  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Th" }) });
-    $[28] = t13;
-  } else {
-    t13 = $[28];
-  }
-  let t14;
-  if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-    t14 = /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Fr" }) });
-    $[29] = t14;
-  } else {
-    t14 = $[29];
-  }
-  let t15;
-  if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-    t15 = /* @__PURE__ */ jsxs("div", { className: `${ROOT_CLASS_NAME$1}-month-week`, children: [
-      t9,
-      t10,
-      t11,
-      t12,
-      t13,
-      t14,
-      /* @__PURE__ */ jsx("div", { className: "week-day-item", children: /* @__PURE__ */ jsx("span", { className: "week-day-item-text", children: "Sa" }) })
+  if ($[38] !== t3 || $[39] !== t4 || $[40] !== t5 || $[41] !== t7) {
+    t8 = /* @__PURE__ */ jsxs("div", { className: t3, children: [
+      t4,
+      t5,
+      t7
     ] });
-    $[30] = t15;
-  } else {
-    t15 = $[30];
-  }
-  const t16 = Math.floor(daySpaces / 7);
-  let t17;
-  if ($[31] !== dateRangeEndDay || $[32] !== dateRangeEndPreviewDay || $[33] !== dateRangeStartDay || $[34] !== firstDay || $[35] !== handleClickDay || $[36] !== handleMouseEnterDay || $[37] !== month || $[38] !== t16 || $[39] !== totalDays) {
-    let t182;
-    if ($[41] !== dateRangeEndDay || $[42] !== dateRangeEndPreviewDay || $[43] !== dateRangeStartDay || $[44] !== firstDay || $[45] !== handleClickDay || $[46] !== handleMouseEnterDay || $[47] !== month || $[48] !== totalDays) {
-      t182 = (_, weekIndex) => /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME$1}-month-row`, children: DAYS.map((__, dayIndex) => {
-        dayIndex = dayIndex + weekIndex * 7;
-        const dayNumber = dayIndex - firstDay + 1;
-        const isEmpty = dayNumber < 1 || dayNumber > totalDays;
-        const date_2 = isEmpty ? null : getDateFromMonthAndDay(month, dayNumber);
-        const isAfterDateRangeStart = dateRangeStartDay != null && dayNumber > dateRangeStartDay;
-        const isBeforeDateRangeEnd = dateRangeEndDay == null && dateRangeEndPreviewDay != null && dayNumber < dateRangeEndPreviewDay || dateRangeEndDay != null && dayNumber < dateRangeEndDay;
-        return /* @__PURE__ */ jsx("button", { className: clsx(`${ROOT_CLASS_NAME$1}-month-day-item`, {
-          "end-date": !isEmpty && dayNumber === dateRangeEndDay,
-          "is-empty": isEmpty,
-          "is-selected": !isEmpty && isAfterDateRangeStart && isBeforeDateRangeEnd,
-          "start-date": !isEmpty && dayNumber === dateRangeStartDay
-        }), "data-date": date_2 == null ? void 0 : date_2.toISOString(), disabled: isEmpty, onClick: handleClickDay, onMouseEnter: handleMouseEnterDay, type: "button", children: isEmpty ? null : /* @__PURE__ */ jsx("span", { className: "month-day-item-text", children: dayNumber }) }, `MonthDayItem-${dayNumber}`);
-      }) }, `MonthRow-${weekIndex}`);
-      $[41] = dateRangeEndDay;
-      $[42] = dateRangeEndPreviewDay;
-      $[43] = dateRangeStartDay;
-      $[44] = firstDay;
-      $[45] = handleClickDay;
-      $[46] = handleMouseEnterDay;
-      $[47] = month;
-      $[48] = totalDays;
-      $[49] = t182;
-    } else {
-      t182 = $[49];
-    }
-    t17 = Array(t16).fill(null).map(t182);
-    $[31] = dateRangeEndDay;
-    $[32] = dateRangeEndPreviewDay;
-    $[33] = dateRangeStartDay;
-    $[34] = firstDay;
-    $[35] = handleClickDay;
-    $[36] = handleMouseEnterDay;
-    $[37] = month;
-    $[38] = t16;
-    $[39] = totalDays;
-    $[40] = t17;
+    $[38] = t3;
+    $[39] = t4;
+    $[40] = t5;
+    $[41] = t7;
+    $[42] = t8;
   } else {
-    t17 = $[40];
+    t8 = $[42];
   }
-  let t18;
-  if ($[50] !== t17) {
-    t18 = /* @__PURE__ */ jsx("div", { className: `${ROOT_CLASS_NAME$1}-month-days`, children: t17 });
-    $[50] = t17;
-    $[51] = t18;
-  } else {
-    t18 = $[51];
-  }
-  let t19;
-  if ($[52] !== t18 || $[53] !== t7 || $[54] !== t8) {
-    t19 = /* @__PURE__ */ jsxs(Fragment, { children: [
+  let t9;
+  if ($[43] !== T0 || $[44] !== t6 || $[45] !== t8) {
+    t9 = /* @__PURE__ */ jsxs(T0, { children: [
       t6,
-      /* @__PURE__ */ jsxs("div", { className: t7, children: [
-        t8,
-        t15,
-        t18
-      ] })
+      t8
     ] });
-    $[52] = t18;
-    $[53] = t7;
-    $[54] = t8;
-    $[55] = t19;
+    $[43] = T0;
+    $[44] = t6;
+    $[45] = t8;
+    $[46] = t9;
   } else {
-    t19 = $[55];
+    t9 = $[46];
   }
-  return t19;
+  return t9;
 }
 const ROOT_CLASS_NAME = "uktdatepicker";
 const STYLES = `
@@ -486,6 +475,8 @@ const STYLES = `
 }
 
 .${ROOT_CLASS_NAME}-range-arrow {
+    background-color: transparent;
+    border: 0;
     width: 35px;
     height: 35px;
     text-align: center;
@@ -506,7 +497,6 @@ const STYLES = `
     content: "‹";
     font-size: 24px;
     line-height: 35px;
-    font-weight: bold;
 }
 
 .${ROOT_CLASS_NAME}-range-arrow.right-arrow:after {
@@ -520,6 +510,10 @@ const STYLES = `
 }
 `;
 const getAbbreviatedMonthTitle = (month) => `${getMonthAbbreviationFromMonth(month)} ${getYearFromMonth(month)}`;
+const normalizeDate = (date) => {
+  if (date == null || date === "") return null;
+  return typeof date === "string" ? date : new Date(date).toISOString();
+};
 function DatePicker(t0) {
   const $ = c(68);
   let {
@@ -539,7 +533,7 @@ function DatePicker(t0) {
   const monthLimitLast = isTwoUp && _monthLimitLast != null ? _monthLimitLast - 1 : _monthLimitLast;
   let t1;
   if ($[0] !== _dateEnd) {
-    t1 = _dateEnd != null && typeof _dateEnd !== "string" ? new Date(_dateEnd).toISOString() : _dateEnd;
+    t1 = normalizeDate(_dateEnd);
     $[0] = _dateEnd;
     $[1] = t1;
   } else {
@@ -548,15 +542,15 @@ function DatePicker(t0) {
   const dateEndFromProps = t1;
   let t2;
   if ($[2] !== _dateStart) {
-    t2 = _dateStart != null && typeof _dateStart !== "string" ? new Date(_dateStart).toISOString() : _dateStart;
+    t2 = normalizeDate(_dateStart);
     $[2] = _dateStart;
     $[3] = t2;
   } else {
     t2 = $[3];
   }
   const dateStartFromProps = t2;
-  const [dateEnd, setDateEnd] = useState(dateEndFromProps ?? null);
-  const [dateStart, setDateStart] = useState(dateStartFromProps ?? null);
+  const [dateEnd, setDateEnd] = useState(dateEndFromProps);
+  const [dateStart, setDateStart] = useState(dateStartFromProps);
   const updatingDateEndRef = useRef(false);
   let t3;
   let t4;
@@ -610,8 +604,10 @@ function DatePicker(t0) {
       initialMonth = initialMonth - 1;
     }
   }
-  const [dateEndPreview, setDateEndPreview] = useState(null);
+  const maxInitialMonth = (monthLimitLast == null ? Number.MAX_SAFE_INTEGER : monthLimitLast) + (isTwoUp ? -1 : 0);
+  initialMonth = Math.max(Math.min(initialMonth, maxInitialMonth), monthLimitFirst ?? Number.MIN_SAFE_INTEGER);
   const [month, setMonth] = useState(initialMonth);
+  const [dateEndPreview, setDateEndPreview] = useState(null);
   const delta = isTwoUp ? 2 : 1;
   let t7;
   if ($[12] !== delta || $[13] !== monthLimitFirst) {
@@ -722,7 +718,7 @@ function DatePicker(t0) {
   }
   let t15;
   if ($[30] !== handleClickLeftArrow || $[31] !== t14) {
-    t15 = /* @__PURE__ */ jsx("div", { className: t14, onClick: handleClickLeftArrow });
+    t15 = /* @__PURE__ */ jsx("button", { "aria-label": "Previous Month", className: t14, onClick: handleClickLeftArrow, type: "button" });
     $[30] = handleClickLeftArrow;
     $[31] = t14;
     $[32] = t15;
@@ -742,7 +738,7 @@ function DatePicker(t0) {
   }
   let t18;
   if ($[35] !== handleClickRightArrow || $[36] !== t17) {
-    t18 = /* @__PURE__ */ jsx("div", { className: t17, onClick: handleClickRightArrow });
+    t18 = /* @__PURE__ */ jsx("button", { "aria-label": "Next Month", className: t17, onClick: handleClickRightArrow, type: "button" });
     $[35] = handleClickRightArrow;
     $[36] = t17;
     $[37] = t18;