From be219a2814800927e6328ff105616713003340b7 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 15 Jul 2021 08:49:25 -0400
Subject: [PATCH] fix(datetime): years displayed now more consistent with v5
 datetime, max and min are now accounted for in MD mode (#23616)

resolves #23615
---
 core/src/components/datetime/datetime.tsx          | 14 +++++++-------
 core/src/components/datetime/readme.md             |  4 +++-
 core/src/components/datetime/test/minmax/e2e.ts    |  7 +++++++
 .../src/components/datetime/test/minmax/index.html |  4 ++--
 core/src/components/datetime/utils/data.ts         |  5 ++---
 core/src/components/datetime/utils/state.ts        |  4 +---
 6 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index adaca70605..a6c381fdbd 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1180,13 +1180,12 @@ export class Datetime implements ComponentInterface {
     this.showMonthAndYear = !this.showMonthAndYear;
   }
 
-  private renderMDYearView() {
-    return getCalendarYears(this.activeParts, true, undefined, undefined, this.parsedYearValues).map(year => {
+  private renderMDYearView(calendarYears: number[] = []) {
+    return calendarYears.map(year => {
 
-      const { isCurrentYear, isActiveYear, disabled, ariaSelected } = getCalendarYearState(year, this.workingParts, this.todayParts, this.minParts, this.maxParts);
+      const { isCurrentYear, isActiveYear, ariaSelected } = getCalendarYearState(year, this.workingParts, this.todayParts);
       return (
         <button
-          disabled={disabled}
           aria-selected={ariaSelected}
           class={{
             'datetime-year-item': true,
@@ -1209,7 +1208,7 @@ export class Datetime implements ComponentInterface {
     })
   }
 
-  private renderiOSYearView() {
+  private renderiOSYearView(calendarYears: number[] = []) {
     return [
       <div class="datetime-picker-before"></div>,
       <div class="datetime-picker-after"></div>,
@@ -1238,7 +1237,7 @@ export class Datetime implements ComponentInterface {
         <div class="picker-col-item picker-col-item-empty">&nbsp;</div>
         <div class="picker-col-item picker-col-item-empty">&nbsp;</div>
         <div class="picker-col-item picker-col-item-empty">&nbsp;</div>
-        {getCalendarYears(this.workingParts, false, this.minParts, this.maxParts, this.parsedYearValues).map(year => {
+        {calendarYears.map(year => {
           return (
             <div
               class="picker-col-item"
@@ -1258,10 +1257,11 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderYearView(mode: Mode) {
+    const calendarYears = getCalendarYears(this.todayParts, this.minParts, this.maxParts, this.parsedYearValues);
     return (
       <div class="datetime-year">
         <div class="datetime-year-body">
-          {mode === 'ios' ? this.renderiOSYearView() : this.renderMDYearView()}
+          {mode === 'ios' ? this.renderiOSYearView(calendarYears) : this.renderMDYearView(calendarYears)}
         </div>
       </div>
     );
diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
index bcc5f94d0d..fae7c95729 100644
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -44,7 +44,9 @@ always in the 24-hour format, so `00` is `12am` on a 12-hour clock, `13` means
 
 ## Min and Max Datetimes
 
-By default, there is no maximum or minimum date a user can select. To customize the minimum and maximum datetime values, the `min` and `max` component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user. By passing `2016` to the `min` property and `2020-10-31` to the `max` property, the datetime will restrict the date selection between the beginning of `2016`, and `October 31st of 2020`.
+Dates are infinite in either direction, so for a user's selection there should be at least some form of restricting the dates that can be selected. By default, the maximum date is to the end of the current year, and the minimum date is from the beginning of the year that was 100 years ago.
+
+To customize the minimum and maximum datetime values, the `min` and `max` component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user. By passing `2016` to the `min` property and `2020-10-31` to the `max` property, the datetime will restrict the date selection between the beginning of `2016`, and `October 31st of 2020`.
 
 ## Selecting Specific Values
 
diff --git a/core/src/components/datetime/test/minmax/e2e.ts b/core/src/components/datetime/test/minmax/e2e.ts
index d7558359a3..d37ff37761 100644
--- a/core/src/components/datetime/test/minmax/e2e.ts
+++ b/core/src/components/datetime/test/minmax/e2e.ts
@@ -9,6 +9,13 @@ test('minmax', async () => {
 
   screenshotCompares.push(await page.compareScreenshot());
 
+  const monthYearItem = await page.find('ion-datetime#inside >>> .calendar-month-year');
+
+  await monthYearItem.click();
+  await page.waitForChanges();
+
+  screenshotCompares.push(await page.compareScreenshot());
+
   for (const screenshotCompare of screenshotCompares) {
     expect(screenshotCompare).toMatchScreenshot();
   }
diff --git a/core/src/components/datetime/test/minmax/index.html b/core/src/components/datetime/test/minmax/index.html
index a3a9d187b4..315f87770f 100644
--- a/core/src/components/datetime/test/minmax/index.html
+++ b/core/src/components/datetime/test/minmax/index.html
@@ -43,7 +43,7 @@
           <div class="grid-item">
             <h2>Value inside Bounds</h2>
             <ion-datetime
-              id="outside"
+              id="inside"
               min="2021-06-05"
               max="2021-06-29"
               value="2021-06-20"
@@ -52,7 +52,7 @@
           <div class="grid-item">
             <h2>Value Outside Bounds</h2>
             <ion-datetime
-              id="inside"
+              id="outside"
               min="2021-06-05"
               max="2021-06-19"
               value="2021-06-20"
diff --git a/core/src/components/datetime/utils/data.ts b/core/src/components/datetime/utils/data.ts
index 25b6716ff0..ce5ab4520f 100644
--- a/core/src/components/datetime/utils/data.ts
+++ b/core/src/components/datetime/utils/data.ts
@@ -261,7 +261,6 @@ export const getPickerMonths = (
 
 export const getCalendarYears = (
   refParts: DatetimeParts,
-  showOutOfBoundsYears = false,
   minParts?: DatetimeParts,
   maxParts?: DatetimeParts,
   yearValues?: number[]
@@ -277,8 +276,8 @@ export const getCalendarYears = (
     return processedYears;
   } else {
     const { year } = refParts;
-    const maxYear = (showOutOfBoundsYears) ? year + 20 : (maxParts?.year || year + 20)
-    const minYear = (showOutOfBoundsYears) ? year - 20 : (minParts?.year || year - 20);
+    const maxYear = (maxParts?.year || year);
+    const minYear = (minParts?.year || year - 100);
 
     const years = [];
     for (let i = maxYear; i >= minYear; i--) {
diff --git a/core/src/components/datetime/utils/state.ts b/core/src/components/datetime/utils/state.ts
index e91acd40e9..d2183bb3f7 100644
--- a/core/src/components/datetime/utils/state.ts
+++ b/core/src/components/datetime/utils/state.ts
@@ -77,13 +77,11 @@ export const isDayDisabled = (
   return false;
 }
 
-export const getCalendarYearState = (refYear: number, activeParts: DatetimeParts, todayParts: DatetimeParts, minParts?: DatetimeParts, maxParts?: DatetimeParts) => {
+export const getCalendarYearState = (refYear: number, activeParts: DatetimeParts, todayParts: DatetimeParts) => {
   const isActiveYear = refYear === activeParts.year;
   const isCurrentYear = refYear === todayParts.year;
-  const disabled = isYearDisabled(refYear, minParts, maxParts);
 
   return {
-    disabled,
     isActiveYear,
     isCurrentYear,
     ariaSelected: isActiveYear ? 'true' : null