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

29
js/components/__tests__/date_selector.test.js
View File

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

19
js/components/date_selector.js
View File

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

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