Dynamically update the max and min values for start and end date based on the date in the other field and contract dates

.secrets.baseline

@@ -199,5 +199,5 @@
       }
     ]
   },
-  "version": "0.12.6"
+  "version": "0.12.5"
 }

js/components/pop_date_range.js

@@ -1,5 +1,10 @@
+import { format } from 'date-fns'
+
 import DateSelector from './date_selector'
 
+const START_DATE = 'start_date'
+const END_DATE = 'end_date'
+
 export default {
   name: 'pop-date-range',
 
@@ -17,14 +22,54 @@ export default {
 
   data: function() {
     return {
-      startDate: this.initialStartDate,
+      startDate: new Date(this.initialStartDate),
-      endDate: this.initialEndDate,
+      endDate: new Date(this.initialEndDate),
       startValid: false,
       endValid: false,
-      minStartDate: this.initialMinStartDate,
+      minStartDate: new Date(this.initialMinStartDate),
-      maxStartDate: this.initialMaxEndDate,
+      maxEndDate: new Date(this.initialMaxEndDate),
-      minEndDate: this.initialMinStartDate,
-      maxEndDate: this.initialMaxEndDate,
     }
   },
+
+  mounted: function() {
+    this.$root.$on('field-change', this.handleDateChange)
+  },
+
+  methods: {
+    handleDateChange: function(event) {
+      if (event.name.includes(START_DATE)) {
+        if (!!event.value) this.startDate = new Date(event.value)
+        if (!!event.valid) this.startValid = event.valid
+      } else if (event.name.includes(END_DATE)) {
+        if (!!event.value) this.endDate = new Date(event.value)
+        if (!!event.valid) this.endValid = event.valid
+      }
+    },
+
+    maxStartDate: function() {
+      if (this.endDate < new Date(this.initialMaxEndDate)) {
+        return this.endDate
+      } else {
+        return this.initialMaxEndDate
+      }
+    },
+
+    minEndDate: function() {
+      if (this.startDate > new Date(this.initialMinStartDate)) {
+        return this.startDate
+      } else {
+        return this.initialMinEndDate
+      }
+    },
+  },
+
+  computed: {
+    maxStartProp: function() {
+      return format(this.maxStartDate(), 'YYYY-MM-DD')
+    },
+
+    minEndProp: function() {
+      return format(this.minEndDate(), 'YYYY-MM-DD')
+    }
+  }
 }

templates/components/pop_date_range.html

@@ -18,8 +18,8 @@
       <div class="form-row">
         <div class="form-col">
           <date-selector
-            :mindate="minStartDate"
+            :mindate="initialMinStartDate"
-            :maxdate="maxStartDate"
+            :maxdate="maxStartProp"
             {% if start_field %}
               name-tag='{{ start_field.name }}'
               initialmonth="{{ start_field.data.month }}"
@@ -105,8 +105,8 @@
       <div class="form-row">
         <div class="form-col">
           <date-selector
-            :mindate="minEndDate"
+            :mindate="minEndProp"
-            :maxdate="maxEndDate"
+            :maxdate="initialMaxEndDate"
             {% if end_field %}
               name-tag='{{ end_field.name }}'
               initialmonth="{{ end_field.data.month }}"
@@ -174,7 +174,7 @@
                       />
                   </div>
 
-                <div v-if="showValidation && isDateComplete">
+                <div v-if="showValidation">
                   <div class="usa-form-group-date-ok" v-if="isDateValid">
                     {{ Icon("ok", classes="icon--green") }}
                   </div>