Merge pull request #667 from Orfium/fix/NDS-799_date_picker_calendar_…

…days_hidden_v4

[NDS-799] fix: date picker calendar days hidden [v4]

src/components/DatePicker/DatePicker.test.tsx

@@ -99,6 +99,61 @@ describe('DatePicker', () => {
     });
   });
 
+  it('should change months when arrow buttons are clicked', () => {
+    const { getByTestId } = render(
+      <DatePicker
+        dataTestId={'input'}
+        isClearable
+        value={{
+          from: currentDay.toDate(),
+          to: currentDay.add(1, 'day').toDate(),
+        }}
+      />
+    );
+
+    const input = getByTestId('input');
+    // trigger overlay
+    fireEvent.click(input);
+
+    const backButton = getByTestId('month_back');
+    const forwardButton = getByTestId('month_forward');
+    const monthButton = getByTestId('button-month');
+
+    fireEvent.click(backButton);
+
+    expect(monthButton).toContainHTML(currentDay.month(currentDay.month() - 1).format('MMMM YYYY'));
+
+    fireEvent.click(forwardButton);
+
+    expect(monthButton).toContainHTML(currentDay.format('MMMM YYYY'));
+  });
+
+  it('should render the calendars correctly when initial values are given', () => {
+    const { getByTestId } = render(
+      <DatePicker
+        dataTestId={'input'}
+        isClearable
+        isRangePicker
+        value={{
+          from: currentDay.month(currentDay.month() - 1).toDate(),
+          to: currentDay.add(1, 'day').toDate(),
+        }}
+      />
+    );
+
+    const input = getByTestId('input');
+    // trigger overlay
+    fireEvent.click(input);
+
+    const selectedFrom = getByTestId(
+      currentDay.month(currentDay.month() - 1).format('D_M_YYYY') + '_selected'
+    );
+    const selectedTo = getByTestId(currentDay.add(1, 'day').format('D_M_YYYY') + '_selected');
+
+    expect(selectedFrom).toBeInTheDocument();
+    expect(selectedTo).toBeInTheDocument();
+  });
+
   it('should handle escape', async () => {
     const onChange = jest.fn();
     const { getByTestId, getByPlaceholderText } = render(

src/components/DatePicker/Day/Day.tsx

@@ -64,6 +64,7 @@ const Day: React.FC<Props> = ({
           isToday,
           disabled,
         })}
+        data-testid={`${day}_${month + 1}_${year}` + `${isSelected ? '_selected' : ''}`}
       >
         <div
           css={dayStyle({

src/components/DatePicker/Day/__snapshots__/Day.test.tsx.snap

@@ -84,6 +84,7 @@ exports[`Day should render correctly 1`] = `
         >
           <div
             class="emotion-0"
+            data-testid="3_11_2020"
           >
             <div
               class="emotion-1"
@@ -172,6 +173,7 @@ exports[`Day should render disabled correctly 1`] = `
         >
           <div
             class="emotion-0"
+            data-testid="3_11_2020"
           >
             <div
               class="emotion-1"
@@ -304,6 +306,7 @@ exports[`Day should render isFirst, isLast correctly 1`] = `
         >
           <div
             class="emotion-0"
+            data-testid="3_11_2020"
           >
             <div
               class="emotion-1"
@@ -436,6 +439,7 @@ exports[`Day should render isFirst, isLast correctly 2`] = `
         >
           <div
             class="emotion-0"
+            data-testid="3_11_2020"
           >
             <div
               class="emotion-1"

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,14 @@ 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();
+    /**
+     * Dayjs uses 0-6 (Sun-Sat) indexing for days of the week, while the reduce callback on line 48 uses
+     * 1-7 (Mon-Sun) indexing for calculating the days array for the calendar grid. To resolve this conflict,
+     * we replace the 0 used for Sunday with 7, so that Dayjs can match our internal indexing.
+     */
+    const startDay = monthDate.day() || 7;
     const daysPerWeekCount = 7;
     const weeksCount = getNumWeeksForMonth(year, month);
     const daysForThisMonthsWeeks = Array(weeksCount * daysPerWeekCount).fill(null);
@@ -70,7 +65,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>

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;
+};