Merge pull request #720 from MeasureAuthoringTool/feature/mat-7480-ha…

…ndle-partial-datetime-inputs

MAT-7662: Ignore partial dateTime entries by checking MUI validation results.

src/components/common/dateTimeInput/DateTimeInput.tsx

@@ -7,9 +7,18 @@ import { kebabCase } from "lodash";
 
 dayjs.extend(utc);
 dayjs.utc();
-
-export const getCQLDateTime = (value, first = false) => {
-  const newDateTime = first ? dayjs(value) : dayjs.utc(value);
+/**
+ * Converts dayjs value to CQL DateTime.
+ * @param value dayjs representation of the user entered dateTime.
+ * @param wasNull Indicates whether previous value was null. Going from null to a value,
+ *   use the dayjs value as opposed to making it utc, so it's relative to the local time.
+ */
+export const getCQLDateTime = (value, wasNull = false) => {
+  if (!value) {
+    // Clears out a populated field.
+    return null;
+  }
+  const newDateTime = wasNull ? dayjs(value) : dayjs.utc(value);
   const newCQLDateTime: CQL.DateTime = new CQL.DateTime(
     newDateTime.year(),
     newDateTime.month() + 1,
@@ -51,19 +60,13 @@ const DateTimeInput = ({
   canEdit,
   attributeName,
 }: DateTimeInputProps) => {
-  const handleDateTimeChange = (newValue) => {
-    for (const prop in newValue) {
-      if (Number.isNaN(newValue[prop])) {
-        onDateTimeChange(null, attributeName);
-        return;
-      }
-    }
-    if (newValue) {
-      onDateTimeChange(
-        getCQLDateTime(newValue, dateTime ? false : true),
-        attributeName
-      );
+  const handleDateTimeChange = (newValue, context) => {
+    // Use MUI validation to identify complete dateTime entry.
+    if (context?.validationError === "invalidDate") {
+      // Partial dateTime entry.
+      return;
     }
+    onDateTimeChange(getCQLDateTime(newValue, !dateTime), attributeName);
   };
   return (
     <DateTimeField

src/components/editTestCase/qdm/LeftPanel/ElementsTab/Demographics/DemographicsSection.tsx

@@ -182,7 +182,7 @@ const DemographicsSection = ({ canEdit }) => {
     }
   };
 
-  const handleTimeChange = (val) => {
+  const handleDateTimeChange = (val) => {
     const formatted = dayjs.utc(val).format();
     const existingElement = getDataElementByStatus("birthdate", patient);
     const newTimeElement = getBirthDateElement(formatted, existingElement);
@@ -227,7 +227,7 @@ const DemographicsSection = ({ canEdit }) => {
                 }
                 attributeName="DateTime"
                 onDateTimeChange={(newValue) => {
-                  handleTimeChange(newValue);
+                  handleDateTimeChange(newValue);
                 }}
               />
               <FormControl>