Merged in fix/datepicker-select-first-of-month (pull request #2497)

fix: able to select 1st of month on the 1st of each month

* fix: able to select 1st of month on the 1st of each month


Approved-by: Anton Gunnarsson

apps/scandic-web/components/DatePicker/Range/Desktop.tsx

@@ -33,10 +33,14 @@ export default function DatePickerRangeDesktop({
   /** English is default language and doesn't need to be imported */
   const locale = lang === Lang.en ? undefined : locales[lang]
   const currentDate = dt().toDate()
+  const lastDayOfPreviousMonth = dt(currentDate)
+    .set("date", 1)
+    .subtract(1, "day")
+    .toDate()
   const yesterday = dt(currentDate).subtract(1, "day").toDate()
 
   // Max future date allowed to book kept same as of existing prod.
-  const endDate = dt().add(395, "day").toDate()
+  const endDate = dt(currentDate).add(395, "day").toDate()
   const endOfLastMonth = dt(endDate).endOf("month").toDate()
 
   function handleMonthChange(selected: Date) {
@@ -63,7 +67,7 @@ export default function DatePickerRangeDesktop({
         button_previous: `${classNames.button_previous} ${styles.button_previous}`,
       }}
       disabled={[
-        { from: undefined, to: yesterday },
+        { from: lastDayOfPreviousMonth, to: yesterday },
         { from: endDate, to: endOfLastMonth },
       ]}
       excludeDisabled

apps/scandic-web/components/DatePicker/Range/Mobile.tsx

@@ -33,7 +33,13 @@ export default function DatePickerRangeMobile({
   const [autoScrollEnabled, setAutoScrollEnabled] = useState(true)
 
   const currentDate = dt().toDate()
+  const lastDayOfPreviousMonth = dt(currentDate)
+    .set("date", 1)
+    .subtract(1, "day")
+    .toDate()
+
   const yesterday = dt(currentDate).subtract(1, "day").toDate()
+
   useEffect(() => {
     if (!monthsRef.current || !selectedRange?.from || !autoScrollEnabled) return
 
@@ -57,7 +63,7 @@ export default function DatePickerRangeMobile({
   }
 
   // Max future date allowed to book kept same as of existing prod.
-  const endDate = dt().add(395, "day").toDate()
+  const endDate = dt(currentDate).add(395, "day").toDate()
   const endOfLastMonth = dt(endDate).endOf("month").toDate()
   return (
     <div className={styles.container} ref={monthsRef}>
@@ -83,7 +89,7 @@ export default function DatePickerRangeMobile({
           weekday: `${classNames.weekday} ${styles.weekDay}`,
         }}
         disabled={[
-          { from: undefined, to: yesterday },
+          { from: lastDayOfPreviousMonth, to: yesterday },
           { from: endDate, to: endOfLastMonth },
         ]}
         endMonth={endDate}

apps/scandic-web/components/DatePicker/Single/Desktop.tsx

@@ -34,10 +34,14 @@ export default function DatePickerSingleDesktop({
   /** English is default language and doesn't need to be imported */
   const locale = lang === Lang.en ? undefined : locales[lang]
   const currentDate = dt().toDate()
+  const lastDayOfPreviousMonth = dt(currentDate)
+    .set("date", 1)
+    .subtract(1, "day")
+    .toDate()
   const yesterday = dt(currentDate).subtract(1, "day").toDate()
 
   // Max future date allowed to book kept same as of existing prod.
-  const endDate = dt().add(395, "day").toDate()
+  const endDate = dt(currentDate).add(395, "day").toDate()
   const endOfLastMonth = dt(endDate).endOf("month").toDate()
 
   function handleMonthChange(selected: Date) {
@@ -65,7 +69,7 @@ export default function DatePickerSingleDesktop({
         button_previous: `${classNames.button_previous} ${styles.button_previous}`,
       }}
       disabled={[
-        { from: undefined, to: yesterday },
+        { from: lastDayOfPreviousMonth, to: yesterday },
         { from: endDate, to: endOfLastMonth },
       ]}
       footer

apps/scandic-web/components/DatePicker/Single/Mobile.tsx

@@ -29,10 +29,14 @@ export default function DatePickerSingleMobile({
   /** English is default language and doesn't need to be imported */
   const locale = lang === Lang.en ? undefined : locales[lang]
   const currentDate = dt().toDate()
+  const lastDayOfPreviousMonth = dt(currentDate)
+    .set("date", 1)
+    .subtract(1, "day")
+    .toDate()
   const yesterday = dt(currentDate).subtract(1, "day").toDate()
 
   // Max future date allowed to book kept same as of existing prod.
-  const endDate = dt().add(395, "day").toDate()
+  const endDate = dt(currentDate).add(395, "day").toDate()
   const endOfLastMonth = dt(endDate).endOf("month").toDate()
 
   return (
@@ -51,7 +55,7 @@ export default function DatePickerSingleMobile({
           weekday: `${classNames.weekday} ${styles.weekDay}`,
         }}
         disabled={[
-          { from: undefined, to: yesterday },
+          { from: lastDayOfPreviousMonth, to: yesterday },
           { from: endDate, to: endOfLastMonth },
         ]}
         endMonth={endDate}