get valueChanged working for arrays

Author: amandaesmith3

core/src/components/datetime/datetime.tsx

@@ -333,32 +333,40 @@ export class Datetime implements ComponentInterface {
        * This allows us to update the current value's date/time display without
        * refocusing or shifting the user's display (leaves the user in place).
        */
-      // TODO: most of this will need a decent restructure
       const valueDateParts = parseDate(this.value);
       if (valueDateParts) {
         warnIfValueOutOfBounds(valueDateParts, this.minParts, this.maxParts);
 
-        const { month, day, year, hour, minute } = valueDateParts;
-        const ampm = hour >= 12 ? 'pm' : 'am';
-
-        this.activePartsClone = {
-          ...this.activeParts,
-          month,
-          day,
-          year,
-          hour,
-          minute,
-          ampm,
-        };
+        if(Array.isArray(valueDateParts)) {
+          this.activePartsClone = [...valueDateParts];
+        } else {
+          const { month, day, year, hour, minute } = valueDateParts;
+          const ampm = hour ? 
+            hour >= 12 ? 'pm' : 'am'
+            : undefined;
+
+          this.activePartsClone = {
+            ...this.activeParts,
+            month,
+            day,
+            year,
+            hour,
+            minute,
+            ampm,
+          };
 
-        /**
-         * The working parts am/pm value must be updated when the value changes, to
-         * ensure the time picker hour column values are generated correctly.
-         */
-        this.setWorkingParts({
-          ...this.workingParts,
-          ampm,
-        });
+          /**
+           * The working parts am/pm value must be updated when the value changes, to
+           * ensure the time picker hour column values are generated correctly.
+           * 
+           * Note that we don't need to do this if valueDateParts is an array, since
+           * multiple="true" does not apply to time pickers.
+           */
+          this.setWorkingParts({
+            ...this.workingParts,
+            ampm,
+          });
+        }        
       } else {
         printIonWarning(`Unable to parse date string: ${this.value}. Please provide a valid ISO 8601 datetime string.`);
       }
@@ -551,10 +559,19 @@ export class Datetime implements ComponentInterface {
   };
 
   private setActiveParts = (parts: DatetimeParts, removeDate = false) => {
-    const { multiple, activeParts, highlightActiveParts } = this;
+    const { multiple, activePartsClone, highlightActiveParts } = this;
 
     if(multiple) {
-      const activePartsArray = Array.isArray(activeParts) ? activeParts : [activeParts];
+      /**
+       * We read from activePartsClone here because valueChanged() only updates that,
+       * so it's the more reliable source of truth. If we read from activeParts, then
+       * if you click July 1, manually set the value to July 2, and then click July 3,
+       * the new value would be [July 1, July 3], ignoring the value set.
+       * 
+       * We can then pass the new value to activeParts (rather than activePartsClone)
+       * since the clone will be updated automatically by activePartsChanged().
+       */
+      const activePartsArray = Array.isArray(activePartsClone) ? activePartsClone : [activePartsClone];
       if(removeDate) {
         this.activeParts = activePartsArray.filter(p => !isSameDay(p, parts));
       } else if(highlightActiveParts) {

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

@@ -45,6 +45,10 @@
             <h2>No Default Value</h2>
             <ion-datetime presentation="date" multiple="true"></ion-datetime>
           </div>
+          <div class="grid-item">
+            <h2>Single Default Value</h2>
+            <ion-datetime presentation="date" multiple="true" value="2022-07-01"></ion-datetime>
+          </div>
         </div>
       </ion-content>
     </ion-app>

core/src/components/datetime/utils/comparison.ts

@@ -39,13 +39,23 @@ export const isAfter = (baseParts: DatetimeParts, compareParts: DatetimeParts) =
   );
 };
 
-export const warnIfValueOutOfBounds = (value: DatetimeParts, min: DatetimeParts, max: DatetimeParts) => {
-  if ((min && isBefore(value, min)) || (max && isAfter(value, max))) {
-    printIonWarning(
-      'The value provided to ion-datetime is out of bounds.\n\n' +
-        `Min: ${JSON.stringify(min)}\n` +
-        `Max: ${JSON.stringify(max)}\n` +
-        `Value: ${JSON.stringify(value)}`
-    );
+export const warnIfValueOutOfBounds = (value: DatetimeParts | DatetimeParts[], min: DatetimeParts, max: DatetimeParts) => {
+  const isOutOfBounds = (value: DatetimeParts) => (min && isBefore(value, min)) || (max && isAfter(value, max));
+  const printWarning = () => printIonWarning(
+    'The value provided to ion-datetime is out of bounds.\n\n' +
+    `Min: ${JSON.stringify(min)}\n` +
+    `Max: ${JSON.stringify(max)}\n` +
+    `Value: ${JSON.stringify(value)}`
+  );
+
+  if(Array.isArray(value)) {
+    for(const val of value) {
+      if (isOutOfBounds(val)) {
+        printWarning();
+        break;
+      }
+    }
+  } else if(isOutOfBounds(value)) {
+    printWarning();
   }
 };

packages/vue/src/vue-component-lib/utils.ts

@@ -1,7 +1,7 @@
 import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue';
 
-export interface InputProps {
-  modelValue?: string | boolean;
+export interface InputProps extends Object {
+  modelValue: string | boolean;
 }
 
 const UPDATE_VALUE_EVENT = 'update:modelValue';