- add styles for hidden day button;

- add showDaysOutsideCurrentMonth property to datetime  component;
- change month generation to respect new property;

Author: JoaoFerreira-FrontEnd

core/api.txt

@@ -529,6 +529,7 @@ 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,showClearButton,boolean,false,false,false
+ion-datetime,prop,showDaysOutsideCurrentMonth,boolean | undefined,false,false,false
 ion-datetime,prop,showDefaultButtons,boolean,false,false,false
 ion-datetime,prop,showDefaultTimeLabel,boolean,true,false,false
 ion-datetime,prop,showDefaultTitle,boolean,false,false,false

core/src/components.d.ts

@@ -936,6 +936,10 @@ export namespace Components {
           * 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.
          */
         "showClearButton": 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.
+         */
+        "showDaysOutsideCurrentMonth"?: boolean;
         /**
           * If `true`, the default "Cancel" and "OK" buttons will be rendered 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.
          */
@@ -5723,6 +5727,10 @@ declare namespace LocalJSX {
           * 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.
          */
         "showClearButton"?: 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.
+         */
+        "showDaysOutsideCurrentMonth"?: boolean;
         /**
           * If `true`, the default "Cancel" and "OK" buttons will be rendered 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';
+  hiddenDay?: boolean,
 }
 
 export type DatetimePresentation = 'date-time' | 'time-date' | 'date' | 'time' | 'month' | 'year' | 'month-year';

core/src/components/datetime/datetime.scss

@@ -364,7 +364,11 @@
   opacity: 0.4;
 }
 
-.calendar-day:focus {
+:host .calendar-day.calendar-day-hidden-day {
+  opacity: 0.4;
+}
+
+.calendar-day:not(.calendar-day-hidden-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',
+    hiddenDay: 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() showDaysOutsideCurrentMonth?:boolean = 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, hiddenDay } = this.workingParts;
 
-    if (day === null) {
+    if (day === null || hiddenDay) {
       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.showDaysOutsideCurrentMonth).map((dateObject, index) => {
+            const { day, dayOfWeek, hiddenDay } = dateObject;
+            const { el, highlightedDates, isDateEnabled, multiple, showDaysOutsideCurrentMonth } = this;
+            let _month = month;
+            let _year = year;
+            if(showDaysOutsideCurrentMonth){
+              if(hiddenDay && day !== null && day > 20) {
+                // Leading with the hidden day from the previous month
+                // if its a hidden 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(hiddenDay && day !== null && day < 15) {
+                // Leading with the hidden day from the next month
+                // if its a hidden 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, hiddenDay: hiddenDay };
             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 && !hiddenDay) {
               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 && !hiddenDay) {
               dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}${
                 isCalDayDisabled ? ' disabled' : ''
               }`;
+            } else if(hiddenDay) {
+              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-hidden-day': hiddenDay,
                   }}
                   part={dateParts}
                   aria-hidden={isCalendarPadding ? 'true' : null}
@@ -2342,27 +2375,30 @@ export class Datetime implements ComponentInterface {
 
                     this.setWorkingParts({
                       ...this.workingParts,
-                      month,
+                      month: _month,
                       day,
-                      year,
+                      year: _year,
+                      hiddenDay: hiddenDay,
                     });
 
                     // 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,
+                          hiddenDay: hiddenDay,
                         },
                         isActive
                       );
                     } else {
                       this.setActiveParts({
                         ...activePart,
-                        month,
+                        month: _month,
                         day,
-                        year,
+                        year: _year,
+                        hiddenDay: hiddenDay,
                       });
                     }
                   }}

core/src/components/datetime/test/custom/index.html

@@ -91,7 +91,7 @@
         color: #8462d1;
       }
 
-      #custom-calendar-days::part(calendar-day):focus {
+      #custom-calendar-days::part(calendar-day):not(.calendar-day-hidden-day):focus {
         background-color: rgb(154 209 98 / 0.2);
         box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
       }
@@ -200,6 +200,8 @@ <h2>Grid Style</h2>
 
         return true;
       };
+
+      customDatetime.showDaysOutsideCurrentMonth = true
     </script>
   </body>
 </html>

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

@@ -102,8 +102,14 @@ export const getDaysOfWeek = (locale: string, mode: Mode, firstDayOfWeek = 0) =>
  * the firstDayOfWeek value (Sunday by default)
  * using null values.
  */
-export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: number) => {
+export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: number, displayHiddenDays = false) => {
   const numDays = getNumDaysInMonth(month, year);
+  let previousNumDays: number; //previous month number of days
+  if (month === 1) { //If january the previous month should be january and the last year
+    previousNumDays = getNumDaysInMonth(12, year-1);
+  } else { //If not the previous month should be month -1 and the current year
+    previousNumDays = getNumDaysInMonth(month - 1, year);
+  }
   const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
 
   /**
@@ -128,13 +134,38 @@ export const getDaysOfMonth = (month: number, year: number, firstDayOfWeek: numb
   const offset =
     firstOfMonth >= firstDayOfWeek ? firstOfMonth - (firstDayOfWeek + 1) : 6 - (firstDayOfWeek - firstOfMonth);
 
-  let days = [];
+  let days: ({
+    day: number;
+    dayOfWeek: number;
+    hiddenDay: boolean;
+   } | {
+       day: null;
+       dayOfWeek: null;
+       hiddenDay: boolean;
+ })[] = [];
   for (let i = 1; i <= numDays; i++) {
-    days.push({ day: i, dayOfWeek: (offset + i) % 7 });
+    days.push({ day: i, dayOfWeek: (offset + i) % 7, hiddenDay: false });
   }
 
-  for (let i = 0; i <= offset; i++) {
-    days = [{ day: null, dayOfWeek: null }, ...days];
+  if (displayHiddenDays) {
+    for (let i = 0; i <= offset; i++) {
+      // Using offset create previous month hidden day, starting from last day
+      days = [{ day: previousNumDays-i, dayOfWeek: (previousNumDays - i) % 7, hiddenDay:true }, ...days];
+    }
+
+    // Calculate positiveOffset
+    // The calendar will display 42 days (6 rows of 7 columns)
+    // Knowing this the offset is 41 (we start at index 0)
+    // 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, hiddenDay: true} )
+    }
+
+  } else {
+    for (let i = 0; i <= offset; i++) {
+      days = [{ day: null, dayOfWeek: null, hiddenDay:false }, ...days];
+    }
   }
 
   return days;

packages/angular/src/directives/proxies.ts

@@ -634,15 +634,15 @@ Set `scrollEvents` to `true` to enable.
 
 
 @ProxyCmp({
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'formatOptions', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'formatOptions', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDaysOutsideCurrentMonth', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
   methods: ['confirm', 'reset', 'cancel']
 })
 @Component({
   selector: 'ion-datetime',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'formatOptions', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
+  inputs: ['cancelText', 'clearText', 'color', 'dayValues', 'disabled', 'doneText', 'firstDayOfWeek', 'formatOptions', 'highlightedDates', 'hourCycle', 'hourValues', 'isDateEnabled', 'locale', 'max', 'min', 'minuteValues', 'mode', 'monthValues', 'multiple', 'name', 'preferWheel', 'presentation', 'readonly', 'showClearButton', 'showDaysOutsideCurrentMonth', 'showDefaultButtons', 'showDefaultTimeLabel', 'showDefaultTitle', 'size', 'titleSelectedDatesFormatter', 'value', 'yearValues'],
 })
 export class IonDatetime {
   protected el: HTMLIonDatetimeElement;

packages/vue/src/proxies.ts

@@ -306,6 +306,7 @@ export const IonDatetime = /*@__PURE__*/ defineContainer<JSX.IonDatetime, JSX.Io
   'formatOptions',
   'readonly',
   'isDateEnabled',
+  'showDaysOutsideCurrentMonth',
   'min',
   'max',
   'presentation',