Use date-selector component to display errors related to date fields

js/components/__tests__/date_selector.test.js

@@ -214,4 +214,40 @@ describe('DateSelector', () => {
       expect(component.isDateComplete).toEqual(false)
     })
   })
+
+  describe('minError', () => {
+    it('returns true if the date is before mindate', () => {
+      component.mindate = new Date("2020-01-01")
+      component.day = 1
+      component.month = 1
+      component.year = 2000
+      expect(component.minError).toEqual(true)
+    })
+
+    it('returns fals if the date is after mindate', () => {
+      component.mindate = new Date("2020-01-01")
+      component.day = 1
+      component.month = 1
+      component.year = 2025
+      expect(component.minError).toEqual(false)
+    })
+  })
+
+  describe('maxError', () => {
+    it('returns true if the date is after maxdate', () => {
+      component.maxdate = new Date("2020-01-01")
+      component.day = 1
+      component.month = 1
+      component.year = 2025
+      expect(component.maxError).toEqual(true)
+    })
+
+    it('returns false if the date is before maxdate', () => {
+      component.maxdate = new Date("2020-01-01")
+      component.day = 1
+      component.month = 1
+      component.year = 2005
+      expect(component.maxError).toEqual(false)
+    })
+  })
 })

js/components/date_selector.js

@@ -170,6 +170,22 @@ export default {
           return 31
       }
     },
+
+    minError: function() {
+      if (this.isDateComplete) {
+        return new Date(this.mindate) > new Date(this.formattedDate)
+      }
+
+      return false
+    },
+
+    maxError: function() {
+      if (this.isDateComplete) {
+        return new Date(this.maxdate) < new Date(this.formattedDate)
+      }
+
+      return false
+    },
   },
 
   methods: {

templates/components/clin_fields.html

@@ -135,11 +135,6 @@
         {% else %}
           {{ PopDateRange(watch=True, optional=False, mindate=contract_start | dateFromString(formatter="%Y-%m-%d"), maxdate=contract_end | dateFromString(formatter="%Y-%m-%d")) }}
         {% endif %}
-        <div class="form-row">
-          <div class="usa-input-error-message form-has-errors">
-            <p v-for="error in popErrors" :key="error" v-html='error'></p>
-          </div>
-        </div>
       </div>
 
       <div v-show="$root.activeModal === removeModalId" v-cloak>

templates/components/pop_date_range.html

@@ -41,6 +41,13 @@
                 <p class='usa-input__help'>
                   {{ "task_orders.form.pop_example" | translate | safe }}
                 </p>
+
+                <div v-if='minError' class="usa-input-error-message">
+                  PoP start date must be on or after {{ mindate |  formattedDate(formatter="%B %d, %Y") }}.
+                </div>
+                <div v-if='maxError' class="usa-input-error-message">
+                  PoP start date must be before end date.
+                </div>
               </legend>
 
               <div class="date-picker-component">
@@ -130,6 +137,13 @@
                 <p class='usa-input__help'>
                   {{ 'task_orders.form.pop_example' | translate }}
                 </p>
+
+                <div v-if='minError' class="usa-input-error-message">
+                  PoP end date must be after start date.
+                </div>
+                <div v-if='maxError' class="usa-input-error-message">
+                  PoP end date must be on or after {{ maxdate |  formattedDate(formatter="%B %d, %Y") }}.
+                </div>
               </legend>
 
               <div class="date-picker-component">