diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index cf0f523249..b33c87108d 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -659,9 +659,9 @@ export class Datetime implements ComponentInterface {
         // we are setting. We can do this by comparing if the validatedParts is before or after
         // the first active part. Users can select the same day as the start or end of the range.
         const [start, end] = this.activeParts;
-        if (isBefore(validatedParts, start)) {
+        if (start !== undefined && isBefore(validatedParts, start)) {
           this.activeParts = [validatedParts, end];
-        } else if (isAfter(validatedParts, end)) {
+        } else if (end !== undefined && isAfter(validatedParts, end)) {
           this.activeParts = [start, validatedParts];
         } else {
           this.activeParts = [validatedParts, validatedParts];
diff --git a/core/src/components/datetime/test/range/index.html b/core/src/components/datetime/test/range/index.html
index 93160f3ded..a6c6d95f51 100644
--- a/core/src/components/datetime/test/range/index.html
+++ b/core/src/components/datetime/test/range/index.html
@@ -258,12 +258,7 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Date Range</h2>
-            <ion-datetime
-              value="2020-03-14T14:23:00.000Z"
-              presentation="date"
-              id="date-range"
-              range="true"
-            ></ion-datetime>
+            <ion-datetime presentation="date" id="date-range" range="true"></ion-datetime>
           </div>
         </div>
       </ion-content>
diff --git a/core/src/components/datetime/utils/state.ts b/core/src/components/datetime/utils/state.ts
index ce79e8772f..16026b2a62 100644
--- a/core/src/components/datetime/utils/state.ts
+++ b/core/src/components/datetime/utils/state.ts
@@ -231,7 +231,7 @@ export const getHighlightStyles = (
 export const isDateRangeStart = (referenceParts: DatetimeParts, activeParts: DatetimeParts | DatetimeParts[]) => {
   if (activeParts !== undefined && Array.isArray(activeParts)) {
     const startDate = activeParts[0];
-    return isSameDay(referenceParts, startDate);
+    return startDate !== undefined && isSameDay(referenceParts, startDate);
   }
   return false;
 }
@@ -239,7 +239,7 @@ export const isDateRangeStart = (referenceParts: DatetimeParts, activeParts: Dat
 export const isDateRangeEnd = (referenceParts: DatetimeParts, activeParts: DatetimeParts | DatetimeParts[]) => {
   if (activeParts !== undefined && Array.isArray(activeParts)) {
     const endDate = activeParts[1];
-    return isSameDay(referenceParts, endDate);
+    return endDate !== undefined && isSameDay(referenceParts, endDate);
   }
   return false;
 }
@@ -248,8 +248,8 @@ export const isDateInRange = (referenceParts: DatetimeParts, activeParts: Dateti
   if (activeParts !== undefined && Array.isArray(activeParts)) {
     const startDate = activeParts[0];
     const endDate = activeParts[1];
-    const isAfterStart = isAfter(referenceParts, startDate) || isSameDay(referenceParts, startDate);
-    const isBeforeEnd = isBefore(referenceParts, endDate) || isSameDay(referenceParts, endDate);
+    const isAfterStart = startDate !== undefined && (isAfter(referenceParts, startDate) || isSameDay(referenceParts, startDate));
+    const isBeforeEnd = endDate !== undefined && (isBefore(referenceParts, endDate) || isSameDay(referenceParts, endDate));
     return isAfterStart && isBeforeEnd;
   }
   return false;