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

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,12 @@
   color: current-color(contrast);
 }
 
+:host .calendar-day.calendar-day-hidden-day:not([disabled])  {
+  color: $text-color-step-700;
+
+  opacity: 1;
+}
+
 // Time / Header
 // -----------------------------------
 :host .datetime-time {

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

@@ -127,6 +127,12 @@
   background: current-color(base);
 }
 
+:host .calendar-day.calendar-day-hidden-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-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);