Show validation icon only if the date is complete

js/components/date_selector.js

@@ -36,7 +36,6 @@ export default {
       month: this.initialmonth,
       year: this.initialyear,
       name: this.nameTag,
-      showValidation: false,
     }
   },
 
@@ -190,8 +189,6 @@ export default {
 
   methods: {
     onInput: function(e) {
-      if (this.isDateComplete) this.showValidation = true
-
       emitEvent('field-change', this, {
         value: this.formattedDate,
         name: this.name,

js/test_templates/clin_fields.html

@@ -344,7 +344,7 @@
             :optional='false'
             inline-template>
 
-            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
+            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
               <legend>
                 <div class="usa-input__title">
                   Start Date
@@ -407,7 +407,7 @@
 
                 </div>
 
-                <div v-if="showValidation">
+                <div v-if="isDateComplete">
                   <div class="usa-form-group-date-ok" v-if="isDateValid">
                     
       <span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
@@ -443,7 +443,7 @@
             :optional='false'
             inline-template>
 
-            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
+            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
               <legend>
                 <div class="usa-input__title">
                   End Date
@@ -459,7 +459,7 @@
 
       
         <p class='usa-alert-text'>
-          A CLIN's period of performance must end before .
+          A CLIN's period of performance must end before September 14, 2022.
         </p>
       
 
@@ -525,7 +525,7 @@
                       />
                   </div>
 
-                <div v-if="showValidation">
+                <div v-if="isDateComplete">
                   <div class="usa-form-group-date-ok" v-if="isDateValid">
                     
       <span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>

js/test_templates/pop_date_range.html

@@ -29,7 +29,7 @@
             :optional='true'
             inline-template>
 
-            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
+            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
               <legend>
                 <div class="usa-input__title">
                   Start Date
@@ -92,7 +92,7 @@
 
                 </div>
 
-                <div v-if="showValidation">
+                <div v-if="isDateComplete">
                   <div class="usa-form-group-date-ok" v-if="isDateValid">
                     
       <span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
@@ -128,7 +128,7 @@
             :optional='true'
             inline-template>
 
-            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
+            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
               <legend>
                 <div class="usa-input__title">
                   End Date
@@ -144,7 +144,7 @@
 
       
         <p class='usa-alert-text'>
-          A CLIN's period of performance must end before .
+          A CLIN's period of performance must end before September 14, 2022.
         </p>
       
 
@@ -210,7 +210,7 @@
                       />
                   </div>
 
-                <div v-if="showValidation">
+                <div v-if="isDateComplete">
                   <div class="usa-form-group-date-ok" v-if="isDateValid">
                     
       <span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>

js/test_templates/to_form.html

@@ -204,7 +204,7 @@
 <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-bind:watch="true">
-<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; showValidation, 'usa-input--error': !isDateValid &amp;&amp; showValidation }">
+<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">
                   Start Date
@@ -233,7 +233,7 @@
 <label>Year</label>
 <input max="" maxlength="4" min="" name="date-year" type="number" v-model="year" v-on:change="onInput"/>
 </div>
-<div v-if="showValidation">
+<div v-if="isDateComplete">
 <div class="usa-form-group-date-ok" v-if="isDateValid">
 <span aria-hidden="true" class="icon icon--ok icon--green"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
 </div>
@@ -252,7 +252,7 @@
 <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-bind:watch="true">
-<fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid &amp;&amp; showValidation, 'usa-input--error': !isDateValid &amp;&amp; showValidation }">
+<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">
                   End Date
@@ -260,7 +260,7 @@
 <div aria-live="polite" class="usa-alert usa-alert-info" role="alert">
 <div class="usa-alert-body">
 <p class="usa-alert-text">
-          A CLIN's period of performance must end before .
+          A CLIN's period of performance must end before September 14, 2022.
         </p>
 </div>
 </div>
@@ -288,7 +288,7 @@
 <label>Year</label>
 <input maxlength="4" name="date-year" type="number" v-model="year" v-on:change="onInput"/>
 </div>
-<div v-if="showValidation">
+<div v-if="isDateComplete">
 <div class="usa-form-group-date-ok" v-if="isDateValid">
 <span aria-hidden="true" class="icon icon--ok icon--green"><svg aria-hidden="true" class="svg-inline--fa fa-check-circle fa-w-16" data-icon="check-circle" data-prefix="fas" focusable="false" role="img" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg></span>
 </div>

templates/components/date_picker.html

@@ -21,7 +21,7 @@
   :optional='{{ optional | string | lower }}'
   inline-template>
 
-    <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
+    <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete }">
       <legend>
         <div class="usa-input__title">
           {{ label }}
@@ -83,7 +83,7 @@
 
         </div>
 
-        <div v-if="showValidation">
+        <div v-if="isDateComplete">
           <div class="usa-form-group-date-ok" v-if="isDateValid">
             {{ Icon("ok", classes="icon--green") }}
           </div>

templates/components/pop_date_range.html

@@ -36,7 +36,7 @@
             :optional='{{ optional | string | lower }}'
             inline-template>
 
-            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
+            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
               <legend>
                 <div class="usa-input__title">
                   {{ "task_orders.form.pop_start" | translate }}
@@ -99,7 +99,7 @@
 
                 </div>
 
-                <div v-if="showValidation">
+                <div v-if="isDateComplete">
                   <div class="usa-form-group-date-ok" v-if="isDateValid">
                     {{ Icon("ok", classes="icon--green") }}
                   </div>
@@ -130,7 +130,7 @@
             :optional='{{ optional | string | lower }}'
             inline-template>
 
-            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation, 'usa-input--error': !isDateValid && showValidation }">
+            <fieldset :name="name" class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && isDateComplete, 'usa-input--error': !isDateValid && isDateComplete }">
               <legend>
                 <div class="usa-input__title">
                   {{ 'task_orders.form.pop_end' | translate }}
@@ -192,7 +192,7 @@
                       />
                   </div>
 
-                <div v-if="showValidation">
+                <div v-if="isDateComplete">
                   <div class="usa-form-group-date-ok" v-if="isDateValid">
                     {{ Icon("ok", classes="icon--green") }}
                   </div>