76 lines
1.7 KiB
JavaScript
76 lines
1.7 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() {
|
|
return {
|
|
startDate: new Date(this.initialStartDate),
|
|
endDate: new Date(this.initialEndDate),
|
|
startValid: false,
|
|
endValid: false,
|
|
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')
|
|
}
|
|
}
|
|
}
|