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:
parent
0e641a9064
commit
d42cd1ff4f
@ -199,5 +199,5 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"version": "0.12.6"
|
||||
"version": "0.12.5"
|
||||
}
|
||||
|
@ -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')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user