Show validation icon only if the date is complete

This commit is contained in:
leigh-mil
2019-09-25 14:23:33 -04:00
parent e41aeaee25
commit ad86dc33fc
6 changed files with 23 additions and 26 deletions

View File

@@ -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>

View File

@@ -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>