atst/js/components/pop_date_range.js
2019-09-26 16:22:15 -04:00

83 lines
1.9 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: {
type: String,
default: null,
},
initialEndDate: {
type: String,
default: null,
},
clinIndex: Number,
},
data: function() {
var start = !!this.initialStartDate ? new Date(this.initialStartDate) : null
var end = !!this.initialEndDate ? new Date(this.initialEndDate) : null
var contractStart = new Date(this.initialMinStartDate)
var contractEnd = new Date(this.initialMaxEndDate)
return {
maxStartDate: this.calcMaxStartDate(end, contractEnd),
minEndDate: this.calcMinEndDate(start, contractStart),
}
},
methods: {
handleDateChange: function(event) {
if (event.name.includes(START_DATE)) {
if (event.valid != undefined && event.valid) {
var date = new Date(event.value)
this.minEndDate = this.calcMinEndDate(date)
}
} else if (event.name.includes(END_DATE)) {
if (event.valid != undefined && event.valid ) {
var date = new Date(event.value)
this.maxStartDate = this.calcMaxStartDate(date)
}
}
},
calcMaxStartDate: function(date, end = this.maxStartDate) {
if (!!date && date < end) {
return date
} else {
return end
}
},
calcMinEndDate: function(date, start = this.minEndDate) {
if (!!date && 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')
},
},
}