fix(datetime): years displayed now more consistent with v5 datetime, max and min are now accounted for in MD mode (#23616)

resolves #23615

Author: liamdebeasi

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>
     );

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
 

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();
   }

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 @@ <h2>Value inside Bounds</h2>
           <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"

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--) {

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