diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss
index 4f43fbd95b..5906980ea4 100644
--- a/core/src/components/datetime/datetime.ios.scss
+++ b/core/src/components/datetime/datetime.ios.scss
@@ -5,6 +5,7 @@
 :host {
   --background: var(--ion-color-light, #ffffff);
   --background-rgb: var(--ion-color-light-rgb);
+  --range-background: #{current-color(base, 0.1)};
   --title-color: #{$text-color-step-400};
 }
 
@@ -222,7 +223,7 @@
 }
 
 :host .calendar-day-wrapper {
-  @include padding(4px);
+  @include padding(2px);
 
   // This is required so that the calendar day wrapper
   // will collapse instead of expanding to fill the button
@@ -315,16 +316,16 @@
   position: relative;
 
   &:not(.calendar-day-range-start):not(.calendar-day-range-end) {
-    background: current-color(base, 0.1);
+    background: var(--range-background);
   }
 
-  &.calendar-day-range-start,
-  &.calendar-day-range-end {
-    .calendar-day {
-      background: var(--ion-color-base);
+  &.calendar-day-range-start .calendar-day,
+  &.calendar-day-range-end .calendar-day {
+    background: var(--ion-color-base);
 
-      color: var(--ion-color-contrast);
-    }
+    color: var(--ion-color-contrast);
+
+    z-index: 1;
   }
 
   &.calendar-day-range-start:not(.calendar-day-range-end)::after,
@@ -346,12 +347,12 @@
   &.calendar-day-range-start::after {
     @include position(null, 0, null, null);
 
-    background: current-color(base, 0.1);
+    background: var(--range-background);
   }
 
   &.calendar-day-range-end::before {
     @include position(null, null, null, 0);
 
-    background: current-color(base, 0.1);
+    background: var(--range-background);
   }
 }
diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss
index 22f7da864f..57e10b8796 100644
--- a/core/src/components/datetime/datetime.md.scss
+++ b/core/src/components/datetime/datetime.md.scss
@@ -4,6 +4,7 @@
 
 :host {
   --background: var(--ion-color-step-100, #ffffff);
+  --range-background: #{current-color(base, 0.1)};
   --title-color: #{current-color(contrast)};
 }
 
@@ -174,7 +175,12 @@
   position: relative;
 
   &:not(.calendar-day-range-start):not(.calendar-day-range-end) {
-    background: current-color(base, 0.1);
+    background: var(--range-background);
+  }
+
+  &.calendar-day-range-start .calendar-day,
+  &.calendar-day-range-end .calendar-day {
+    z-index: 1;
   }
 
   &.calendar-day-range-start:not(.calendar-day-range-end)::after,
@@ -184,7 +190,7 @@
     width: 50%;
     height: 100%;
 
-    background: current-color(base, 0.1);
+    background: var(--range-background);
 
     content: " ";
   }
diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss
index 6e19a5de7c..4613cb8d91 100644
--- a/core/src/components/datetime/datetime.scss
+++ b/core/src/components/datetime/datetime.scss
@@ -16,6 +16,8 @@
    * @prop --wheel-fade-background-rgb: The color of the gradient covering non-selected items
    * when using a wheel style layout, or in the month/year picker for grid style layouts. Must
    * be in RGB format, e.g. `255, 255, 255`.
+   *
+   * @prop --range-background: The background of the range track between a start and end date.
    */
 
   display: flex;