feat(datetime): add showAdjacentDays to display days from the previous and next months

core/api.txt

@@ -529,6 +529,7 @@ ion-datetime,prop,name,string,this.inputId,false,false
 ion-datetime,prop,preferWheel,boolean,false,false,false
 ion-datetime,prop,presentation,"date" | "date-time" | "month" | "month-year" | "time" | "time-date" | "year",'date-time',false,false
 ion-datetime,prop,readonly,boolean,false,false,false
+ion-datetime,prop,showAdjacentDays,boolean,false,false,false
 ion-datetime,prop,showClearButton,boolean,false,false,false
 ion-datetime,prop,showDefaultButtons,boolean,false,false,false
 ion-datetime,prop,showDefaultTimeLabel,boolean,true,false,false

core/src/components.d.ts

@@ -936,6 +936,10 @@ export namespace Components {
           * Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
          */
         "reset": (startDate?: string) => Promise<void>;
+        /**
+          * If `true`, the datetime will show the last days of the previous month and the first days of the next month on a table of 42 elements.
+         */
+        "showAdjacentDays": boolean;
         /**
           * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          */
@@ -5739,6 +5743,10 @@ declare namespace LocalJSX {
           * If `true`, the datetime appears normal but the selected date cannot be changed.
          */
         "readonly"?: boolean;
+        /**
+          * If `true`, the datetime will show the last days of the previous month and the first days of the next month on a table of 42 elements.
+         */
+        "showAdjacentDays"?: boolean;
         /**
           * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          */

core/src/components/datetime/datetime-interface.ts

@@ -15,6 +15,7 @@ export interface DatetimeParts {
   hour?: number;
   minute?: number;
   ampm?: 'am' | 'pm';
+  adjacentDay?: boolean;
 }
 
 export type DatetimePresentation = 'date-time' | 'time-date' | 'date' | 'time' | 'month' | 'year' | 'month-year';

core/src/components/datetime/datetime.ios.scss

@@ -267,6 +267,12 @@
   color: current-color(contrast);
 }
 
+:host .calendar-day.calendar-day-adjacent-day:not([disabled])  {
+  color: $text-color-step-700;
+
+  opacity: 1;
+}
+
 // Time / Header
 // -----------------------------------
 :host .datetime-time {

core/src/components/datetime/datetime.md.scss

@@ -121,12 +121,19 @@
   color: current-color(contrast);
 }
 
-.calendar-day.calendar-day-active {
+.calendar-day.calendar-day-active,
+.calendar-day.calendar-day-active:focus {
   border: 1px solid current-color(base);
 
   background: current-color(base);
 }
 
+:host .calendar-day.calendar-day-adjacent-day:not([disabled]) {
+  color: $text-color-step-500;
+
+  opacity: 1;
+}
+
 // Time / Header
 // -----------------------------------
 :host .datetime-time {

core/src/components/datetime/datetime.scss

@@ -364,7 +364,11 @@
   opacity: 0.4;
 }
 
-.calendar-day:focus {
+:host .calendar-day.calendar-day-adjacent-day {
+  opacity: 0.4;
+}
+
+.calendar-day:not(.calendar-day-adjacent-day):focus {
   background: current-color(base, 0.2);
 
   box-shadow: 0px 0px 0px 4px current-color(base, 0.2);

core/src/components/datetime/datetime.tsx

@@ -139,6 +139,7 @@ export class Datetime implements ComponentInterface {
     hour: 13,
     minute: 52,
     ampm: 'pm',
+    adjacentDay: false,
   };
 
   @Element() el!: HTMLIonDatetimeElement;
@@ -207,6 +208,11 @@ export class Datetime implements ComponentInterface {
    */
   @Prop() isDateEnabled?: (dateIsoString: string) => boolean;
 
+  /**
+   * If `true`, the datetime will show the last days of the previous month and the first days of the next month on a table of 42 elements.
+   */
+  @Prop() showAdjacentDays = false;
+
   @Watch('disabled')
   protected disabledChanged() {
     this.emitStyle();
@@ -810,9 +816,9 @@ export class Datetime implements ComponentInterface {
      * to grab the correct calendar-day element.
      */
     const padding = currentMonth.querySelectorAll('.calendar-day-padding');
-    const { day } = this.workingParts;
+    const { day, adjacentDay } = this.workingParts;
 
-    if (day === null) {
+    if (day === null || adjacentDay) {
       return;
     }
 
@@ -2226,10 +2232,34 @@ export class Datetime implements ComponentInterface {
         }}
       >
         <div class="calendar-month-grid">
-          {getDaysOfMonth(month, year, this.firstDayOfWeek % 7).map((dateObject, index) => {
-            const { day, dayOfWeek } = dateObject;
-            const { el, highlightedDates, isDateEnabled, multiple } = this;
-            const referenceParts = { month, day, year };
+          {getDaysOfMonth(month, year, this.firstDayOfWeek % 7, this.showAdjacentDays).map((dateObject, index) => {
+            const { day, dayOfWeek, adjacentDay } = dateObject;
+            const { el, highlightedDates, isDateEnabled, multiple, showAdjacentDays } = this;
+            let _month = month;
+            let _year = year;
+            if (showAdjacentDays && adjacentDay && day !== null) {
+              if (day > 20) {
+                // Leading with the adjacent day from the previous month
+                // if its a adjacent day and is higher than '20' (last week even in feb)
+                if (month === 1) {
+                  _year = year - 1;
+                  _month = 12;
+                } else {
+                  _month = month - 1;
+                }
+              } else if (day < 15) {
+                // Leading with the adjacent day from the next month
+                // if its a adjacent day and is lower than '15' (first two weeks)
+                if (month === 12) {
+                  _year = year + 1;
+                  _month = 1;
+                } else {
+                  _month = month + 1;
+                }
+              }
+            }
+
+            const referenceParts = { month: _month, day, year: _year, adjacentDay };
             const isCalendarPadding = day === null;
             const {
               isActive,
@@ -2284,18 +2314,20 @@ export class Datetime implements ComponentInterface {
              * Custom highlight styles should not override the style for selected dates,
              * nor apply to "filler days" at the start of the grid.
              */
-            if (highlightedDates !== undefined && !isActive && day !== null) {
+            if (highlightedDates !== undefined && !isActive && day !== null && !adjacentDay) {
               dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
             }
 
             let dateParts = undefined;
 
             // "Filler days" at the beginning of the grid should not get the calendar day
             // CSS parts added to them
-            if (!isCalendarPadding) {
+            if (!isCalendarPadding && !adjacentDay) {
               dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${
                 isCalDayDisabled ? ' disabled' : ''
               }`;
+            } else if (adjacentDay) {
+              dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}`;
             }
 
             return (
@@ -2319,8 +2351,8 @@ export class Datetime implements ComponentInterface {
                   }}
                   tabindex="-1"
                   data-day={day}
-                  data-month={month}
-                  data-year={year}
+                  data-month={_month}
+                  data-year={_year}
                   data-index={index}
                   data-day-of-week={dayOfWeek}
                   disabled={isButtonDisabled}
@@ -2330,6 +2362,7 @@ export class Datetime implements ComponentInterface {
                     'calendar-day-active': isActive,
                     'calendar-day-constrained': isCalDayConstrained,
                     'calendar-day-today': isToday,
+                    'calendar-day-adjacent-day': adjacentDay,
                   }}
                   part={dateParts}
                   aria-hidden={isCalendarPadding ? 'true' : null}
@@ -2340,29 +2373,37 @@ export class Datetime implements ComponentInterface {
                       return;
                     }
 
+                    if (adjacentDay) {
+                      //the user selected a day outside the current month, let's not focus on this button since the month will be re-render;
+                      this.el.blur();
+                    }
+
                     this.setWorkingParts({
                       ...this.workingParts,
-                      month,
+                      month: _month,
                       day,
-                      year,
+                      year: _year,
+                      adjacentDay: adjacentDay,
                     });
 
                     // multiple only needs date info, so we can wipe out other fields like time
                     if (multiple) {
                       this.setActiveParts(
                         {
-                          month,
+                          month: _month,
                           day,
-                          year,
+                          year: _year,
+                          adjacentDay: adjacentDay,
                         },
                         isActive
                       );
                     } else {
                       this.setActiveParts({
                         ...activePart,
-                        month,
+                        month: _month,
                         day,
-                        year,
+                        year: _year,
+                        adjacentDay: adjacentDay,
                       });
                     }
                   }}

core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts

@@ -0,0 +1,48 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime: ShowDaysOutsideCustomMonth'), () => {
+    test('with custom-grid should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const customGrid = page.locator('#custom-grid');
+      await expect(customGrid).toHaveScreenshot(screenshot(`customGrid-with-adjacent-days`));
+    });
+
+    test('should set the first day of the week correctly', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const customDatetime = page.locator('#custom-calendar-days');
+      await expect(customDatetime).toHaveScreenshot(screenshot(`custom-calendar-with-adjacent-days`));
+    });
+
+    test('with specific date disabled  should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const specificDateDisabled = page.locator('#specificDate');
+      await expect(specificDateDisabled).toHaveScreenshot(screenshot(`specificDate-with-adjacent-days`));
+    });
+
+    test('with weekends disabled should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const weekendsDisabled = page.locator('#weekends');
+      await expect(weekendsDisabled).toHaveScreenshot(screenshot(`weekendsDisabled-with-adjacent-days`));
+    });
+
+    test('with date range disabled should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const dateRangeDisabled = page.locator('#dateRange');
+      await expect(dateRangeDisabled).toHaveScreenshot(screenshot(`dateRangeDisabled-with-adjacent-days`));
+    });
+
+    test('with month disabled should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const monthDisabled = page.locator('#month');
+      await expect(monthDisabled).toHaveScreenshot(screenshot(`monthDisabled-with-adjacent-days`));
+    });
+
+    test('with specific display should not have any visual regressions', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/show-adjacent-days', config);
+      const display = page.locator('#display');
+      await expect(display).toHaveScreenshot(screenshot(`display-with-adjacent-days`));
+    });
+  });
+});