fix(datetime): ionChange is no longer called for out of range dates (#23940)

resolves #23939

core/src/components/datetime/datetime.tsx

@@ -1091,6 +1091,17 @@ export class Datetime implements ComponentInterface {
             const activeElement = this.el!.shadowRoot!.elementFromPoint(x, y)!;
             const value = parseInt(activeElement.getAttribute('data-value')!, 10);
 
+            /**
+             * When scrolling to a month that is out of
+             * bounds, the hour/minute column values may
+             * be updated, triggering a scroll callback.
+             * Check to make sure there is a valid
+             * hour/minute element so we do not emit NaN.
+             */
+            if (Number.isNaN(value)) {
+              return;
+            }
+
             if (colType === 'hour') {
               this.setWorkingParts({
                 ...this.workingParts,

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

@@ -44,9 +44,8 @@
             <h2>Value inside Bounds</h2>
             <ion-datetime
               id="inside"
-              min="2021-06-05"
-              max="2021-06-29"
-              value="2021-06-20"
+              min="2021-09"
+              max="2021-10"
             ></ion-datetime>
           </div>
           <div class="grid-item">
@@ -60,6 +59,13 @@
           </div>
         </div>
       </ion-content>
+
+      <script>
+      const datetime = document.querySelector('ion-datetime');
+      datetime.addEventListener('ionChange', (ev) => {
+        console.log('Change', ev.detail.value);
+      })
+      </script>
     </ion-app>
   </body>
 </html>