Improve validation

Author: mapsandapps

core/src/components/datetime/datetime.tsx

@@ -69,7 +69,7 @@ import {
   isNextMonthDisabled,
   isPrevMonthDisabled,
 } from './utils/state';
-import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './utils/warn';
+import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './utils/validate';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -182,9 +182,9 @@ export class Datetime implements ComponentInterface {
 
   @Watch('formatOptions')
   protected formatOptionsChanged() {
-    const { formatOptions, presentation } = this;
-    checkForPresentationFormatMismatch(presentation, formatOptions);
-    warnIfTimeZoneProvided(formatOptions);
+    const { el, formatOptions, presentation } = this;
+    checkForPresentationFormatMismatch(el, presentation, formatOptions);
+    warnIfTimeZoneProvided(el, formatOptions);
   }
 
   /**
@@ -253,8 +253,8 @@ export class Datetime implements ComponentInterface {
 
   @Watch('presentation')
   protected presentationChanged() {
-    const { formatOptions, presentation } = this;
-    checkForPresentationFormatMismatch(presentation, formatOptions);
+    const { el, formatOptions, presentation } = this;
+    checkForPresentationFormatMismatch(el, presentation, formatOptions);
   }
 
   private get isGridStyle() {
@@ -1405,8 +1405,8 @@ export class Datetime implements ComponentInterface {
     }
 
     if (formatOptions) {
-      checkForPresentationFormatMismatch(presentation, formatOptions);
-      warnIfTimeZoneProvided(formatOptions);
+      checkForPresentationFormatMismatch(el, presentation, formatOptions);
+      warnIfTimeZoneProvided(el, formatOptions);
     }
 
     const hourValues = (this.parsedHourValues = convertToArrayOfNumbers(this.hourValues));

core/src/components/datetime/utils/warn.ts renamed to core/src/components/datetime/utils/validate.ts

@@ -7,18 +7,19 @@ import type { DatetimePresentation, FormatOptions } from '../datetime-interface'
  * differ from what was selected in the Datetime, which could cause
  * confusion.
  */
-export const warnIfTimeZoneProvided = (formatOptions?: FormatOptions) => {
+export const warnIfTimeZoneProvided = (el: HTMLElement, formatOptions?: FormatOptions) => {
   if (
     formatOptions?.date?.timeZone ||
     formatOptions?.date?.timeZoneName ||
     formatOptions?.time?.timeZone ||
     formatOptions?.time?.timeZoneName
   ) {
-    printIonWarning('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".');
+    printIonWarning('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
   }
 };
 
 export const checkForPresentationFormatMismatch = (
+  el: HTMLElement,
   presentation: DatetimePresentation,
   formatOptions?: FormatOptions
 ) => {
@@ -32,19 +33,20 @@ export const checkForPresentationFormatMismatch = (
     case 'month':
     case 'year':
       if (formatOptions.date === undefined) {
-        printIonWarning(`Datetime: The '${presentation}' presentation requires a date object in formatOptions.`);
+        printIonWarning(`Datetime: The '${presentation}' presentation requires a date object in formatOptions.`, el);
       }
       break;
     case 'time':
       if (formatOptions.time === undefined) {
-        printIonWarning(`Datetime: The 'time' presentation requires a time object in formatOptions.`);
+        printIonWarning(`Datetime: The 'time' presentation requires a time object in formatOptions.`, el);
       }
       break;
     case 'date-time':
     case 'time-date':
       if (formatOptions.date === undefined && formatOptions.time === undefined) {
         printIonWarning(
-          `Datetime: The '${presentation}' presentation requires either a date or time object (or both) in formatOptions.`
+          `Datetime: The '${presentation}' presentation requires either a date or time object (or both) in formatOptions.`,
+          el
         );
       }
       break;