pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
leigh-mil
2019-10-03 16:12:49 -04:00
parent da6916b1a1
commit 07b3c68422
9 changed files with 126 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
js/test_templates/clin_fields.html
View File

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

16
js/test_templates/pop_date_range.html
View File

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

16
js/test_templates/to_form.html
View File

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