Add min and max range values to date selector so a more accurate error message can be displayed when a date is out of the range

js/components/__tests__/date_selector.test.js

@@ -250,4 +250,33 @@ describe('DateSelector', () => {
       expect(component.maxError).toEqual(false)
     })
   })
+
+  describe('outsideRange', () => {
+    it('should return true if the date is before the minrange', () => {
+      component.minrange = '2020-01-01'
+      component.maxrange = '2025-01-01'
+      component.day = 1
+      component.month = 1
+      component.year = 2005
+      expect(component.outsideRange).toEqual(true)
+    })
+
+    it('should return true if the date is after the maxrange', () => {
+      component.minrange = '2020-01-01'
+      component.maxrange = '2025-01-01'
+      component.day = 1
+      component.month = 1
+      component.year = 2030
+      expect(component.outsideRange).toEqual(true)
+    })
+
+    it('should return false if the date is betwen minrange and maxrange', () => {
+      component.minrange = '2020-01-01'
+      component.maxrange = '2025-01-01'
+      component.day = 1
+      component.month = 1
+      component.year = 2022
+      expect(component.outsideRange).toEqual(false)
+    })
+  })
 })

js/components/date_selector.js

@@ -19,6 +19,8 @@ export default {
     initialyear: { type: String },
     mindate: { type: String },
     maxdate: { type: String },
+    minrange: { type: String },
+    maxrange: { type: String },
     nameTag: { type: String },
     optional: {
       type: Boolean,
@@ -179,6 +181,15 @@ export default {
       return false
     },
 
+    outsideRange: function() {
+      if (!!this.maxrange && !!this.minrange && this.isDateComplete) {
+        return (
+          this.dateParsed < this.minRangeParsed ||
+          this.dateParsed > this.maxRangeParsed
+        )
+      }
+    },
+
     maxDateParsed: function() {
       return new Date(this.maxdate)
     },
@@ -187,6 +198,14 @@ export default {
       return new Date(this.mindate)
     },
 
+    maxRangeParsed: function() {
+      return new Date(this.maxrange)
+    },
+
+    minRangeParsed: function() {
+      return new Date(this.minrange)
+    },
+
     dateParsed: function() {
       return new Date(this.formattedDate)
     },