diff --git a/frontend/src/global_styles/primer/_overrides.sass b/frontend/src/global_styles/primer/_overrides.sass
index 2ef53fc4dd50..b458b00a2e9d 100644
--- a/frontend/src/global_styles/primer/_overrides.sass
+++ b/frontend/src/global_styles/primer/_overrides.sass
@@ -32,6 +32,12 @@
   input
     border-radius: var(--borderRadius-medium)
 
+  // Currently we cannot morph the angular datepicker input field, and we have no way to set the
+  // validation error border on the input. However we can morph the input's wrapper element, thus
+  // adding this parent wrapper rule we can display the red border on the input.
+  &-input-wrap[invalid='true'] input:not(:focus)
+    border-color: var(--control-borderColor-danger)
+
 .UnderlineNav
   @include no-visible-scroll-bar
   margin-bottom: 12px
diff --git a/lib/primer/open_project/forms/date_picker.rb b/lib/primer/open_project/forms/date_picker.rb
index f16834892046..f3089f101f77 100644
--- a/lib/primer/open_project/forms/date_picker.rb
+++ b/lib/primer/open_project/forms/date_picker.rb
@@ -9,6 +9,8 @@ class DatePicker < Primer::Forms::TextField
 
         def initialize(input:, datepicker_options:)
           super(input:)
+
+          @field_wrap_arguments[:invalid] = true if @input.invalid?
           @datepicker_options = datepicker_options
         end
       end