diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 0224f7136..1af8f525b 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -56,7 +56,7 @@
                 :class="[!isLoading ? 'date-picker-hidden' : '']"
                 loaderColor="blue"
                 loaderPosition="center" />
-            <div class="row form-test-error">
+            <div class="row form-test-error" id="date-of-month-error">
                 <ErrorMessage name="date-of-month" class="small mt-1"></ErrorMessage>
             </div>
             <button
@@ -675,6 +675,12 @@ export default {
                 value: newValue,
             });
         },
+        errorMessage(newValue, oldValue) {
+            // Check for changing from no error message to some error message.
+            if (newValue && !oldValue) {
+                this.scrollToElement("date-of-month-error");
+            }
+        },
     },
     components: {
         loader,