fix: date picker calendar days hidden v4

Orfium · Sep 12, 2023 · 6ec1183 · 6ec1183
1 parent 44c45b8
commit 6ec1183
Show file tree

Hide file tree

Showing 6 changed files with 1,258 additions and 1,023 deletions.
diff --git a/src/components/DatePicker/Month/Month.tsx b/src/components/DatePicker/Month/Month.tsx
@@ -15,18 +15,11 @@ import {
   calculateDisabledDays,
   calculateSelectedDay,
   calculateSelectedDayPosition,
+  getNumWeeksForMonth,
 } from './Month.utils';
 
 dayjs.extend(isBetween);
 
-function getNumWeeksForMonth(year: number, month: number) {
-  const date = new Date(year, month - 1, 1);
-  const day = date.getDay();
-  const numDaysInMonth = new Date(year, month, 0).getDate();
-
-  return Math.ceil((numDaysInMonth + day) / 7);
-}
-
 const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thurdsday', 'Friday', 'Saturday', 'Sunday'];
 
 type WeekRow = number[];
@@ -41,12 +34,9 @@ export type Props = {
 
 const Month: React.FC<Props> = ({ year, month, onDaySelect, selectedDays, disabledDates }) => {
   const weeksWithDays = React.useMemo<WeekRow[]>(() => {
-    const monthDate = currentDay
-      .month(month)
-      .year(year)
-      .date(1);
+    const monthDate = currentDay.month(month).year(year).date(1);
     const daysOfMonth = monthDate.daysInMonth();
-    const startDay = monthDate.day();
+    const startDay = monthDate.day() ? monthDate.day() : 7;
     const daysPerWeekCount = 7;
     const weeksCount = getNumWeeksForMonth(year, month);
     const daysForThisMonthsWeeks = Array(weeksCount * daysPerWeekCount).fill(null);
@@ -70,7 +60,7 @@ const Month: React.FC<Props> = ({ year, month, onDaySelect, selectedDays, disabl
   return (
     <React.Fragment>
       <div css={weekDaysWrapperStyle()}>
-        {DAYS.map(day => (
+        {DAYS.map((day) => (
           <div key={day} css={weekDayStyle()}>
             {day.substr(0, 2)}
           </div>

diff --git a/src/components/DatePicker/Month/Month.utils.ts b/src/components/DatePicker/Month/Month.utils.ts
@@ -11,10 +11,7 @@ export const calculateDisabledDays = (
 ) => {
   if (!day) return false;
 
-  const date = currentDay
-    .month(month)
-    .year(year)
-    .date(day);
+  const date = currentDay.month(month).year(year).date(day);
 
   if (disabledDates?.after && disabledDates?.before) {
     return !date.isBetween(dayjs(disabledDates?.after), dayjs(disabledDates?.before));
@@ -29,7 +26,7 @@ export const calculateDisabledDays = (
     return disabledDates?.daysOfWeek.includes(date.day());
   }
   if (disabledDates?.days) {
-    return Boolean(disabledDates?.days.find(cur => dayjs(cur).isSame(dayjs(date), 'day')));
+    return Boolean(disabledDates?.days.find((cur) => dayjs(cur).isSame(dayjs(date), 'day')));
   }
 
   return false;
@@ -44,10 +41,7 @@ export const calculatedDayIsBetween = (
 ) => {
   if (!day) return false;
 
-  const date = currentDay
-    .month(month)
-    .year(year)
-    .date(day);
+  const date = currentDay.month(month).year(year).date(day);
 
   return from && to && dayjs(date).isBetween(from, to);
 };
@@ -65,28 +59,10 @@ export const calculateSelectedDayPosition = (
     const endDate = from.isAfter(to) ? from : to;
     const pickedDate = position === 'last' ? endDate : startDate;
 
-    return (
-      pickedDate &&
-      pickedDate.isSame(
-        currentDay
-          .month(month)
-          .year(year)
-          .date(day),
-        'day'
-      )
-    );
+    return pickedDate && pickedDate.isSame(currentDay.month(month).year(year).date(day), 'day');
   }
 
-  return (
-    day &&
-    from?.isSame(
-      currentDay
-        .month(month)
-        .year(year)
-        .date(day),
-      'day'
-    )
-  );
+  return day && from?.isSame(currentDay.month(month).year(year).date(day), 'day');
 };
 
 export const calculateSelectedDay = (
@@ -98,10 +74,33 @@ export const calculateSelectedDay = (
 ) => {
   if (!day) return false;
 
-  const date = currentDay
-    .month(month)
-    .year(year)
-    .date(day);
+  const date = currentDay.month(month).year(year).date(day);
 
   return [from?.format('D,M,YYYY'), to?.format('D,M,YYYY')].includes(date.format('D,M,YYYY'));
 };
+
+export const getNumWeeksForMonth = (year: number, month: number): number => {
+  // Create a date object for the first day of the month
+  const firstDayOfMonth = new Date(year, month, 1);
+
+  // Get the day of the week for the first day (0 = Monday, 1 = Tuesday, ..., 6 = Sunday)
+  const firstDayOfWeek = (firstDayOfMonth.getDay() + 6) % 7; // Adjusting the index to start from Monday
+
+  // Calculate the number of days in the month
+  const lastDayOfMonth = new Date(year, month + 1, 0);
+  const totalDaysInMonth = lastDayOfMonth.getDate();
+
+  // Calculate the number of days needed to complete the first week
+  const daysToCompleteFirstWeek = 7 - firstDayOfWeek;
+
+  // Calculate the number of remaining days after completing the first week
+  const remainingDays = totalDaysInMonth - daysToCompleteFirstWeek;
+
+  // Calculate the number of additional weeks needed for the remaining days
+  const additionalWeeks = Math.ceil(remainingDays / 7);
+
+  // Total weeks needed, including the first partial week
+  const totalWeeks = 1 + additionalWeeks;
+
+  return totalWeeks;
+};