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

atst/forms/task_order.py

@@ -91,6 +91,8 @@ class CLINForm(FlaskForm):
             self.start_date.data
             and self.end_date.data
             and self.start_date.data > self.end_date.data
+            and self.start_date.data <= contract_end
+            and self.end_date.data >= contract_start
         ):
             self.start_date.errors.append(
                 translate("forms.task_order.pop_errors.date_order")
@@ -100,7 +102,7 @@ class CLINForm(FlaskForm):
         if self.start_date.data and self.start_date.data <= contract_start:
             self.start_date.errors.append(
                 translate(
-                    "forms.task_order.pop_errors.start",
+                    "forms.task_order.pop_errors.start_pre_contract",
                     {"date": contract_start.strftime("%b %d, %Y")},
                 )
             )
@@ -109,12 +111,30 @@ class CLINForm(FlaskForm):
         if self.end_date.data and self.end_date.data >= contract_end:
             self.end_date.errors.append(
                 translate(
-                    "forms.task_order.pop_errors.end",
+                    "forms.task_order.pop_errors.end_past_contract",
                     {"date": contract_end.strftime("%b %d, %Y")},
                 )
             )
             valid = False
 
+        if self.start_date.data and self.start_date.data > contract_end:
+            self.start_date.errors.append(
+                translate(
+                    "forms.task_order.pop_errors.start_past_contract",
+                    {"date": contract_end.strftime("%b %d, %Y")},
+                )
+            )
+            valid = False
+
+        if self.end_date.data and self.end_date.data < contract_start:
+            self.end_date.errors.append(
+                translate(
+                    "forms.task_order.pop_errors.end_pre_contract",
+                    {"date": contract_start.strftime("%b %d, %Y")},
+                )
+            )
+            valid = False
+
         return valid
 
 

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)
     },

js/test_templates/clin_fields.html

@@ -332,6 +332,8 @@
           <date-selector
             :mindate="initialMinStartDate"
             :maxdate="maxStartProp"
+            :minrange='initialMinStartDate'
+            :maxrange='initialMaxEndDate'
             
               name-tag='start_date'
               initialmonth=""
@@ -352,10 +354,13 @@
                   For example: 07 04 1776
                 </p>
 
+                <div v-if='outsideRange && !minError' class="usa-input-error-message">
+                  PoP start date must be before or on September 14, 2022.
+                </div>
                 <div v-if='minError' class="usa-input-error-message">
                   PoP start date must be on or after September 14, 2019.
                 </div>
-                <div v-if='maxError' class="usa-input-error-message">
+                <div v-if='maxError && !outsideRange' class="usa-input-error-message">
                   PoP start date must be before end date.
                 </div>
               </legend>
@@ -431,6 +436,8 @@
           <date-selector
             :mindate="minEndProp"
             :maxdate="initialMaxEndDate"
+            :minrange='initialMinStartDate'
+            :maxrange='initialMaxEndDate'
             
               name-tag='end_date'
               initialmonth=""
@@ -473,11 +480,14 @@
                   For example: 07 04 1776
                 </p>
 
-                <div v-if='minError' class="usa-input-error-message">
+                <div v-if='outsideRange && !maxError' class="usa-input-error-message">
+                  PoP end date must be on or after September 14, 2019.
+                </div>
+                <div v-if='minError && !outsideRange' 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 September 14, 2022.
+                  PoP end date must be before or on September 14, 2022.
                 </div>
               </legend>
 

js/test_templates/pop_date_range.html

@@ -19,6 +19,8 @@
           <date-selector
             :mindate="initialMinStartDate"
             :maxdate="maxStartProp"
+            :minrange='initialMinStartDate'
+            :maxrange='initialMaxEndDate'
             
               name-tag='start_date'
               initialmonth=""
@@ -39,10 +41,13 @@
                   For example: 07 04 1776
                 </p>
 
+                <div v-if='outsideRange && !minError' class="usa-input-error-message">
+                  PoP start date must be before or on September 14, 2022.
+                </div>
                 <div v-if='minError' class="usa-input-error-message">
                   PoP start date must be on or after September 14, 2019.
                 </div>
-                <div v-if='maxError' class="usa-input-error-message">
+                <div v-if='maxError && !outsideRange' class="usa-input-error-message">
                   PoP start date must be before end date.
                 </div>
               </legend>
@@ -118,6 +123,8 @@
           <date-selector
             :mindate="minEndProp"
             :maxdate="initialMaxEndDate"
+            :minrange='initialMinStartDate'
+            :maxrange='initialMaxEndDate'
             
               name-tag='end_date'
               initialmonth=""
@@ -160,11 +167,14 @@
                   For example: 07 04 1776
                 </p>
 
-                <div v-if='minError' class="usa-input-error-message">
+                <div v-if='outsideRange && !maxError' class="usa-input-error-message">
+                  PoP end date must be on or after September 14, 2019.
+                </div>
+                <div v-if='minError && !outsideRange' 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 September 14, 2022.
+                  PoP end date must be before or on September 14, 2022.
                 </div>
               </legend>
 

js/test_templates/to_form.html

@@ -203,7 +203,7 @@
 <div>
 <div class="form-row">
 <div class="form-col">
-<date-selector :maxdate="maxStartProp" :mindate="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-start_date'" :optional="false" inline-template="" v-on:date-change="handleDateChange">
+<date-selector :maxdate="maxStartProp" :maxrange="initialMaxEndDate" :mindate="initialMinStartDate" :minrange="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-start_date'" :optional="false" inline-template="" v-on:date-change="handleDateChange">
 <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; isDateComplete, 'usa-input--error': !isDateValid &amp;&amp; isDateComplete }">
 <legend>
 <div class="usa-input__title">
@@ -212,10 +212,13 @@
 <p class="usa-input__help">
                   For example: 07 04 1776
                 </p>
+<div class="usa-input-error-message" v-if="outsideRange &amp;&amp; !minError">
+                  PoP start date must be before or on September 14, 2022.
+                </div>
 <div class="usa-input-error-message" v-if="minError">
                   PoP start date must be on or after September 14, 2019.
                 </div>
-<div class="usa-input-error-message" v-if="maxError">
+<div class="usa-input-error-message" v-if="maxError &amp;&amp; !outsideRange">
                   PoP start date must be before end date.
                 </div>
 </legend>
@@ -251,7 +254,7 @@
 </div>
 <div class="form-row">
 <div class="form-col">
-<date-selector :maxdate="initialMaxEndDate" :mindate="minEndProp" :name-tag="'clins-' + clinIndex + '-end_date'" :optional="false" inline-template="" v-on:date-change="handleDateChange">
+<date-selector :maxdate="initialMaxEndDate" :maxrange="initialMaxEndDate" :mindate="minEndProp" :minrange="initialMinStartDate" :name-tag="'clins-' + clinIndex + '-end_date'" :optional="false" inline-template="" v-on:date-change="handleDateChange">
 <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; isDateComplete, 'usa-input--error': !isDateValid &amp;&amp; isDateComplete }">
 <legend>
 <div class="usa-input__title">
@@ -267,11 +270,14 @@
 <p class="usa-input__help">
                   For example: 07 04 1776
                 </p>
-<div class="usa-input-error-message" v-if="minError">
+<div class="usa-input-error-message" v-if="outsideRange &amp;&amp; !maxError">
+                  PoP end date must be on or after September 14, 2019.
+                </div>
+<div class="usa-input-error-message" v-if="minError &amp;&amp; !outsideRange">
                   PoP end date must be after start date.
                 </div>
 <div class="usa-input-error-message" v-if="maxError">
-                  PoP end date must be on or after September 14, 2022.
+                  PoP end date must be before or on September 14, 2022.
                 </div>
 </legend>
 <div class="date-picker-component">

templates/components/pop_date_range.html

@@ -24,6 +24,8 @@
           <date-selector
             :mindate="initialMinStartDate"
             :maxdate="maxStartProp"
+            :minrange='initialMinStartDate'
+            :maxrange='initialMaxEndDate'
             {% if start_field %}
               name-tag='{{ start_field.name }}'
               initialmonth="{{ start_field.data.month }}"
@@ -46,10 +48,13 @@
                   {{ "task_orders.form.pop_example" | translate | safe }}
                 </p>
 
+                <div v-if='outsideRange && !minError' class="usa-input-error-message">
+                  PoP start date must be before or on {{ maxdate | formattedDate(formatter="%B %d, %Y") }}.
+                </div>
                 <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">
+                <div v-if='maxError && !outsideRange' class="usa-input-error-message">
                   PoP start date must be before end date.
                 </div>
               </legend>
@@ -118,6 +123,8 @@
           <date-selector
             :mindate="minEndProp"
             :maxdate="initialMaxEndDate"
+            :minrange='initialMinStartDate'
+            :maxrange='initialMaxEndDate'
             {% if end_field %}
               name-tag='{{ end_field.name }}'
               initialmonth="{{ end_field.data.month }}"
@@ -142,11 +149,14 @@
                   {{ 'task_orders.form.pop_example' | translate }}
                 </p>
 
-                <div v-if='minError' class="usa-input-error-message">
+                <div v-if='outsideRange && !maxError' class="usa-input-error-message">
+                  PoP end date must be on or after {{ mindate | formattedDate(formatter="%B %d, %Y") }}.
+                </div>
+                <div v-if='minError && !outsideRange' 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 {{ formatted_end_date }}.
+                  PoP end date must be before or on {{ formatted_end_date }}.
                 </div>
               </legend>
 

tests/forms/test_task_order.py

@@ -50,13 +50,13 @@ def test_clin_form_pop_dates_within_contract_dates():
     assert not clin_form.validate()
     assert (
         translate(
-            "forms.task_order.pop_errors.start",
+            "forms.task_order.pop_errors.start_pre_contract",
             {"date": CONTRACT_START_DATE.strftime("%b %d, %Y")},
         )
     ) in clin_form.start_date.errors
     assert (
         translate(
-            "forms.task_order.pop_errors.end",
+            "forms.task_order.pop_errors.end_past_contract",
             {"date": CONTRACT_END_DATE.strftime("%b %d, %Y")},
         )
     ) in clin_form.end_date.errors

translations.yaml

@@ -210,8 +210,10 @@ forms:
     number_description: Task order number (13 digits)
     pop_errors:
       date_order: PoP start date must be before end date.
-      end: PoP end date must be before or on {date}.
+      end_past_contract: PoP end date must be before or on {date}.
-      start: PoP start date must be on or after {date}.
+      end_pre_contract: PoP end date must be after or on {date}.
+      start_past_contract: PoP start date must be before or on {date}.
+      start_pre_contract: PoP start date must be on or after {date}.
     scope_description: 'What do you plan to do on the cloud? Some examples might include migrating an existing application or creating a prototype. You don’t need to include a detailed plan of execution, but should list key requirements. This section will be reviewed by your contracting officer, but won’t be sent to the CCPO. <p>Not sure how to describe your scope? <a href="#">Read some examples</a> to get some inspiration.</p>'
     scope_label: Cloud project scope
     clin_funding_errors: