Display error when PoP start date and end date are the same

js/components/__tests__/date_selector.test.js

@@ -165,16 +165,16 @@ describe('DateSelector', () => {
     })
 
     it('returns true when year is between min and max years', () => {
-      component.year = new Date('2019-01-01').getFullYear()
+      component.year = '2019'
-      component.mindate = new Date('2018-01-01')
+      component.mindate = '2018-01-01'
-      component.maxdate = new Date('2019-12-31')
+      component.maxdate = '2019-12-31'
       expect(component.isYearValid).toEqual(true)
     })
 
     it('returns false when year is outside of min and max years', () => {
-      component.year = new Date('2020-01-01').getFullYear()
+      component.year = '2020'
-      component.mindate = new Date('2018-01-01')
+      component.mindate = '2018-01-01'
-      component.maxdate = new Date('2019-01-01')
+      component.maxdate = '2019-01-01'
       expect(component.isYearValid).toEqual(false)
     })
   })

js/components/__tests__/pop_date_range.test.js

@@ -102,4 +102,62 @@ describe('PopDateRange Test', () => {
     expect(startDateField.classes()).toEqual(expect.not.arrayContaining(error))
     expect(endDateField.classes()).toEqual(expect.arrayContaining(error))
   })
+
+  it('should add an error to the end date if it is the same as start date', () => {
+    const wrapper = mount(PopDateRangeWrapper, {
+      propsData: {
+        initialData: {},
+      },
+    })
+
+    const error = ['usa-input--error']
+    var startDateField = wrapper.find('fieldset[name="start_date"]')
+    var endDateField = wrapper.find('fieldset[name="end_date"]')
+
+    // set valid date range
+    startDateField.find('input[name="date-month"]').setValue('01')
+    startDateField.find('input[name="date-day"]').setValue('01')
+    startDateField.find('input[name="date-year"]').setValue('2020')
+
+    endDateField.find('input[name="date-month"]').setValue('01')
+    endDateField.find('input[name="date-day"]').setValue('01')
+    endDateField.find('input[name="date-year"]').setValue('2020')
+
+    // manually trigger the change event in the hidden fields
+    startDateField.find('input[name="start_date"]').trigger('change')
+    endDateField.find('input[name="end_date"]').trigger('change')
+
+    // check that end date has error class
+    expect(startDateField.classes()).toEqual(expect.not.arrayContaining(error))
+    expect(endDateField.classes()).toEqual(expect.arrayContaining(error))
+  })
+
+  it('should add an error to the start date if it is the same as end date', () => {
+    const wrapper = mount(PopDateRangeWrapper, {
+      propsData: {
+        initialData: {},
+      },
+    })
+
+    const error = ['usa-input--error']
+    var startDateField = wrapper.find('fieldset[name="start_date"]')
+    var endDateField = wrapper.find('fieldset[name="end_date"]')
+
+    // set valid date range
+    startDateField.find('input[name="date-month"]').setValue('01')
+    startDateField.find('input[name="date-day"]').setValue('01')
+    startDateField.find('input[name="date-year"]').setValue('2020')
+
+    endDateField.find('input[name="date-month"]').setValue('01')
+    endDateField.find('input[name="date-day"]').setValue('01')
+    endDateField.find('input[name="date-year"]').setValue('2020')
+
+    // manually trigger the change event in the hidden fields
+    endDateField.find('input[name="end_date"]').trigger('change')
+    startDateField.find('input[name="start_date"]').trigger('change')
+
+    // check that start date has error class
+    expect(startDateField.classes()).toEqual(expect.arrayContaining(error))
+    expect(endDateField.classes()).toEqual(expect.not.arrayContaining(error))
+  })
 })

js/components/date_selector.js

@@ -96,10 +96,9 @@ export default {
     },
 
     isYearValid: function() {
-      // Emit a change event
       let valid
-      let minYear = this.mindate ? this.minDateParsed.getFullYear() : null
+      let minYear = this.mindate ? parseInt(this.mindate) : null
-      let maxYear = this.maxdate ? this.maxDateParsed.getFullYear() : null
+      let maxYear = this.maxdate ? parseInt(this.maxdate) : null
 
       if (minYear && maxYear) {
         valid = this.year >= minYear && this.year <= maxYear
@@ -111,15 +110,17 @@ export default {
     },
 
     isWithinDateRange: function() {
-      let _mindate = this.mindate ? Date.parse(this.mindate) : null
+      if (
-      let _maxdate = this.maxdate ? Date.parse(this.maxdate) : null
+        this.minDateParsed !== null &&
-      let _dateTimestamp = Date.UTC(this.year, this.month - 1, this.day)
+        this.minDateParsed >= this.dateParsed
-
+      ) {
-      if (_mindate !== null && _mindate >= _dateTimestamp) {
         return false
       }
 
-      if (_maxdate !== null && _maxdate <= _dateTimestamp) {
+      if (
+        this.maxDateParsed !== null &&
+        this.maxDateParsed <= this.dateParsed
+      ) {
         return false
       }
 
@@ -167,7 +168,7 @@ export default {
 
     minError: function() {
       if (this.isDateComplete) {
-        return this.minDateParsed > this.dateParsed
+        return this.minDateParsed >= this.dateParsed
       }
 
       return false
@@ -175,7 +176,7 @@ export default {
 
     maxError: function() {
       if (this.isDateComplete) {
-        return this.maxDateParsed < this.dateParsed
+        return this.maxDateParsed <= this.dateParsed
       }
 
       return false
@@ -191,23 +192,27 @@ export default {
     },
 
     maxDateParsed: function() {
-      return new Date(this.maxdate)
+      let _maxdate = this.maxdate ? Date.parse(this.maxdate) : null
+      return _maxdate
     },
 
     minDateParsed: function() {
-      return new Date(this.mindate)
+      let _mindate = this.mindate ? Date.parse(this.mindate) : null
+      return _mindate
     },
 
     maxRangeParsed: function() {
-      return new Date(this.maxrange)
+      let _maxrange = this.maxrange ? Date.parse(this.maxrange) : null
+      return _maxrange
     },
 
     minRangeParsed: function() {
-      return new Date(this.minrange)
+      let _minrange = this.minrange ? Date.parse(this.minrange) : null
+      return _minrange
     },
 
     dateParsed: function() {
-      return new Date(this.formattedDate)
+      return Date.UTC(this.year, this.month - 1, this.day)
     },
   },