Dynamically update the max and min values for start and end date based on the date in the other field and contract dates

This commit is contained in:
leigh-mil 2019-09-23 16:37:39 -04:00
parent 0e641a9064
commit d42cd1ff4f
3 changed files with 57 additions and 12 deletions

View File

@ -199,5 +199,5 @@
}
]
},
"version": "0.12.6"
"version": "0.12.5"
}

View File

@ -1,5 +1,10 @@
import { format } from 'date-fns'
import DateSelector from './date_selector'
const START_DATE = 'start_date'
const END_DATE = 'end_date'
export default {
name: 'pop-date-range',
@ -17,14 +22,54 @@ export default {
data: function() {
return {
startDate: this.initialStartDate,
endDate: this.initialEndDate,
startDate: new Date(this.initialStartDate),
endDate: new Date(this.initialEndDate),
startValid: false,
endValid: false,
minStartDate: this.initialMinStartDate,
maxStartDate: this.initialMaxEndDate,
minEndDate: this.initialMinStartDate,
maxEndDate: this.initialMaxEndDate,
minStartDate: new Date(this.initialMinStartDate),
maxEndDate: new Date(this.initialMaxEndDate),
}
},
mounted: function() {
this.$root.$on('field-change', this.handleDateChange)
},
methods: {
handleDateChange: function(event) {
if (event.name.includes(START_DATE)) {
if (!!event.value) this.startDate = new Date(event.value)
if (!!event.valid) this.startValid = event.valid
} else if (event.name.includes(END_DATE)) {
if (!!event.value) this.endDate = new Date(event.value)
if (!!event.valid) this.endValid = event.valid
}
},
maxStartDate: function() {
if (this.endDate < new Date(this.initialMaxEndDate)) {
return this.endDate
} else {
return this.initialMaxEndDate
}
},
minEndDate: function() {
if (this.startDate > new Date(this.initialMinStartDate)) {
return this.startDate
} else {
return this.initialMinEndDate
}
},
},
computed: {
maxStartProp: function() {
return format(this.maxStartDate(), 'YYYY-MM-DD')
},
minEndProp: function() {
return format(this.minEndDate(), 'YYYY-MM-DD')
}
}
}

View File

@ -18,8 +18,8 @@
<div class="form-row">
<div class="form-col">
<date-selector
:mindate="minStartDate"
:maxdate="maxStartDate"
:mindate="initialMinStartDate"
:maxdate="maxStartProp"
{% if start_field %}
name-tag='{{ start_field.name }}'
initialmonth="{{ start_field.data.month }}"
@ -105,8 +105,8 @@
<div class="form-row">
<div class="form-col">
<date-selector
:mindate="minEndDate"
:maxdate="maxEndDate"
:mindate="minEndProp"
:maxdate="initialMaxEndDate"
{% if end_field %}
name-tag='{{ end_field.name }}'
initialmonth="{{ end_field.data.month }}"
@ -174,7 +174,7 @@
/>
</div>
<div v-if="showValidation && isDateComplete">
<div v-if="showValidation">
<div class="usa-form-group-date-ok" v-if="isDateValid">
{{ Icon("ok", classes="icon--green") }}
</div>