-feat(ion-datetime): add hidden-days when showDaysOutsideCurrentMonth prop is true

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.ios.scss

@@ -267,6 +267,11 @@
   color: current-color(contrast);
 }
 
+:host .calendar-day.calendar-day-hidden-day {
+  opacity: 1;
+  color: $text-color-step-700;
+}
+
 // Time / Header
 // -----------------------------------
 :host .datetime-time {

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

@@ -127,6 +127,11 @@
   background: current-color(base);
 }
 
+:host .calendar-day.calendar-day-hidden-day {
+  opacity: 1;
+  color: $text-color-step-500;
+}
+
 // 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-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}
@@ -2340,29 +2373,37 @@ export class Datetime implements ComponentInterface {
                       return;
                     }
 
+                    if(hiddenDay){
+                      //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,
+                      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,
                       });
                     }
                   }}