- change datetime attribute naming;

Author: JoaoFerreira-FrontEnd

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

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

core/src/components/datetime/datetime.tsx

@@ -139,7 +139,7 @@ export class Datetime implements ComponentInterface {
     hour: 13,
     minute: 52,
     ampm: 'pm',
-    adjacentDay: false,
+    isAdjacentDay: false,
   };
 
   @Element() el!: HTMLIonDatetimeElement;
@@ -2240,11 +2240,11 @@ export class Datetime implements ComponentInterface {
       >
         <div class="calendar-month-grid">
           {getDaysOfMonth(month, year, this.firstDayOfWeek % 7, this.showAdjacentDays).map((dateObject, index) => {
-            const { day, dayOfWeek, adjacentDay } = dateObject;
+            const { day, dayOfWeek, isAdjacentDay } = dateObject;
             const { el, highlightedDates, isDateEnabled, multiple, showAdjacentDays } = this;
             let _month = month;
             let _year = year;
-            if (showAdjacentDays && adjacentDay && day !== null) {
+            if (showAdjacentDays && isAdjacentDay && 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)
@@ -2266,7 +2266,7 @@ export class Datetime implements ComponentInterface {
               }
             }
 
-            const referenceParts = { month: _month, day, year: _year, adjacentDay };
+            const referenceParts = { month: _month, day, year: _year, isAdjacentDay };
             const isCalendarPadding = day === null;
             const {
               isActive,
@@ -2321,19 +2321,19 @@ 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 && !adjacentDay) {
+            if (highlightedDates !== undefined && !isActive && day !== null && !isAdjacentDay) {
               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 && !adjacentDay) {
+            if (!isCalendarPadding && !isAdjacentDay) {
               dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${
                 isCalDayDisabled ? ' disabled' : ''
               }`;
-            } else if (adjacentDay) {
+            } else if (isAdjacentDay) {
               dateParts = `calendar-day${isCalDayDisabled ? ' disabled' : ''}`;
             }
 
@@ -2369,7 +2369,7 @@ export class Datetime implements ComponentInterface {
                     'calendar-day-active': isActive,
                     'calendar-day-constrained': isCalDayConstrained,
                     'calendar-day-today': isToday,
-                    'calendar-day-adjacent-day': adjacentDay,
+                    'calendar-day-adjacent-day': isAdjacentDay,
                   }}
                   part={dateParts}
                   aria-hidden={isCalendarPadding ? 'true' : null}
@@ -2380,7 +2380,7 @@ export class Datetime implements ComponentInterface {
                       return;
                     }
 
-                    if (adjacentDay) {
+                    if (isAdjacentDay) {
                       // The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
                       this.el.blur();
                     }
@@ -2390,7 +2390,7 @@ export class Datetime implements ComponentInterface {
                       month: _month,
                       day,
                       year: _year,
-                      adjacentDay: adjacentDay,
+                      isAdjacentDay: isAdjacentDay,
                     });
 
                     // multiple only needs date info, so we can wipe out other fields like time
@@ -2400,7 +2400,7 @@ export class Datetime implements ComponentInterface {
                           month: _month,
                           day,
                           year: _year,
-                          adjacentDay: adjacentDay,
+                          isAdjacentDay: isAdjacentDay,
                         },
                         isActive
                       );
@@ -2410,7 +2410,7 @@ export class Datetime implements ComponentInterface {
                         month: _month,
                         day,
                         year: _year,
-                        adjacentDay: adjacentDay,
+                        isAdjacentDay: isAdjacentDay,
                       });
                     }
                   }}

core/src/components/datetime/utils/data.ts

@@ -140,22 +140,22 @@ export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: numb
     | {
         day: number;
         dayOfWeek: number;
-        adjacentDay: boolean;
+        isAdjacentDay: boolean;
       }
     | {
         day: null;
         dayOfWeek: null;
-        adjacentDay: boolean;
+        isAdjacentDay: boolean;
       }
   )[] = [];
   for (let i = 1; i <= numDays; i++) {
-    days.push({ day: i, dayOfWeek: (offset + i) % 7, adjacentDay: false });
+    days.push({ day: i, dayOfWeek: (offset + i) % 7, isAdjacentDay: false });
   }
 
   if (showAdjacentDays) {
     for (let i = 0; i <= offset; i++) {
       // Using offset create previous month adjacent day, starting from last day
-      days = [{ day: previousNumDays - i, dayOfWeek: (previousNumDays - i) % 7, adjacentDay: true }, ...days];
+      days = [{ day: previousNumDays - i, dayOfWeek: (previousNumDays - i) % 7, isAdjacentDay: true }, ...days];
     }
 
     // Calculate positiveOffset
@@ -164,11 +164,11 @@ export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: numb
     // minus (the previous offset + the current month days)
     const positiveOffset = 41 - (numDays + offset);
     for (let i = 0; i < positiveOffset; i++) {
-      days.push({ day: i + 1, dayOfWeek: (numDays + offset + i) % 7, adjacentDay: true });
+      days.push({ day: i + 1, dayOfWeek: (numDays + offset + i) % 7, isAdjacentDay: true });
     }
   } else {
     for (let i = 0; i <= offset; i++) {
-      days = [{ day: null, dayOfWeek: null, adjacentDay: false }, ...days];
+      days = [{ day: null, dayOfWeek: null, isAdjacentDay: false }, ...days];
     }
   }