diff --git a/src/components/date-picker/themes/shared/date-picker.material.scss b/src/components/date-picker/themes/shared/date-picker.material.scss
index 72b1a195d..119883c07 100644
--- a/src/components/date-picker/themes/shared/date-picker.material.scss
+++ b/src/components/date-picker/themes/shared/date-picker.material.scss
@@ -3,6 +3,12 @@
 
 $theme: $material;
 
+:host([outlined]) {
+    igc-date-time-input::part(notch) {
+        border-block-start: rem(2px) solid transparent;
+    }
+}
+
 :host([outlined][readonly]:hover) {
     igc-date-time-input::part(start),
     igc-date-time-input::part(end),
@@ -83,7 +89,7 @@ $theme: $material;
         border-color: var-get($theme, 'error-secondary-color');
     }
 
-    &::part(notch) {
+    igc-date-time-input::part(notch) {
         border-bottom-color: var-get($theme, 'error-secondary-color');
     }
 }
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
index 9dde79ba5..a4e8dd10d 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
@@ -60,6 +60,12 @@ $theme: $material;
     }
 }
 
+:host([outlined]) {
+    igc-date-time-input::part(notch) {
+        border-block-start: rem(2px) solid transparent;
+    }
+}
+
 :host(:not([readonly])) {
     --affix-color: #{var-get($theme, 'input-prefix-color')};
 
diff --git a/src/components/date-time-input/date-time-input.ts b/src/components/date-time-input/date-time-input.ts
index bf56c53ec..24fe657e5 100644
--- a/src/components/date-time-input/date-time-input.ts
+++ b/src/components/date-time-input/date-time-input.ts
@@ -535,6 +535,10 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
       return mask;
     }
 
+    if (this.readOnly) {
+      return '';
+    }
+
     return this._maskedValue === '' ? mask : this._maskedValue;
   }