89 lines
2.1 KiB
JavaScript
89 lines
2.1 KiB
JavaScript
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',
|
|
|
|
components: {
|
|
DateSelector,
|
|
},
|
|
|
|
props: {
|
|
initialMinStartDate: String,
|
|
initialMaxEndDate: String,
|
|
initialStartDate: String,
|
|
initialEndDate: String,
|
|
clinIndex: Number,
|
|
},
|
|
|
|
data: function() {
|
|
var start = new Date(this.initialStartDate)
|
|
var end = new Date(this.initialEndDate)
|
|
var contractStart = new Date(this.initialMinStartDate)
|
|
var contractEnd = new Date(this.initialMaxEndDate)
|
|
|
|
return {
|
|
startDate: start,
|
|
endDate: end,
|
|
startValid: false,
|
|
endValid: false,
|
|
maxStartDate: this.calcMaxStartDate(end, contractEnd),
|
|
minEndDate: this.calcMinEndDate(start, contractStart),
|
|
contractStart: contractStart,
|
|
contractEnd: contractEnd,
|
|
}
|
|
},
|
|
|
|
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 != undefined) this.startValid = event.valid
|
|
if (this.startValid) {
|
|
this.minEndDate = this.calcMinEndDate(this.startDate)
|
|
}
|
|
} else if (event.name.includes(END_DATE)) {
|
|
if (!!event.value) this.endDate = new Date(event.value)
|
|
if (event.valid != undefined) this.endValid = event.valid
|
|
if (this.endValid) {
|
|
this.maxStartDate = this.calcMaxStartDate(this.endDate)
|
|
}
|
|
}
|
|
},
|
|
|
|
calcMaxStartDate: function(date, end = this.contractEnd) {
|
|
if (date < end) {
|
|
return date
|
|
} else {
|
|
return end
|
|
}
|
|
},
|
|
|
|
calcMinEndDate: function(date, start = this.contractStart) {
|
|
if (date > start) {
|
|
return date
|
|
} else {
|
|
return start
|
|
}
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
maxStartProp: function() {
|
|
return format(this.maxStartDate, 'YYYY-MM-DD')
|
|
},
|
|
|
|
minEndProp: function() {
|
|
return format(this.minEndDate, 'YYYY-MM-DD')
|
|
},
|
|
},
|
|
}
|