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

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,
-      endDate: this.initialEndDate,
+      startDate: new Date(this.initialStartDate),
+      endDate: new Date(this.initialEndDate),
       startValid: false,
       endValid: false,
-      minStartDate: this.initialMinStartDate,
-      maxStartDate: this.initialMaxEndDate,
-      minEndDate: this.initialMinStartDate,
-      maxEndDate: this.initialMaxEndDate,
+      minStartDate: new Date(this.initialMinStartDate),
+      maxEndDate: new Date(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')
+    }
+  }
 }