nuVistA/htdocs/DateRangePicker.vue

163 lines
5.9 KiB
Vue
Raw Normal View History

2022-09-22 07:10:08 -04:00
<template>
<div class="btn-group" role="group">
<template v-if="x_range == '1D'">
<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift(x_date, -24*60*60*1000*(reversed ? -1 : +1))">🡠</button>
<input type="date" class="form-control" v-model="disp_date" />
<DateRangePickerRange v-model="x_range" :direction="direction" />
<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift(x_date, 24*60*60*1000*(reversed ? -1 : +1))">🡢</button>
</template>
<template v-if="x_range == '1W'">
<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift(x_date, -7*24*60*60*1000*(reversed ? -1 : +1))">🡠</button>
<input type="date" class="form-control" v-model="disp_date" />
<DateRangePickerRange v-model="x_range" :direction="direction" />
<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift(x_date, 7*24*60*60*1000*(reversed ? -1 : +1))">🡢</button>
</template>
<template v-if="x_range == '1M'">
<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, -1*(reversed ? -1 : +1))">🡠</button>
<input type="date" class="form-control" v-model="disp_date" />
<DateRangePickerRange v-model="x_range" :direction="direction" />
<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, 1*(reversed ? -1 : +1))">🡢</button>
</template>
<template v-if="x_range == '6M'">
<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, -6*(reversed ? -1 : +1))">🡠</button>
<input type="date" class="form-control" v-model="disp_date" />
<DateRangePickerRange v-model="x_range" :direction="direction" />
<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, 6*(reversed ? -1 : +1))">🡢</button>
</template>
<template v-if="x_range == '1Y'">
<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, -12*(reversed ? -1 : +1))">🡠</button>
<input type="date" class="form-control" v-model="disp_date" />
<DateRangePickerRange v-model="x_range" :direction="direction" />
<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, 12*(reversed ? -1 : +1))">🡢</button>
</template>
<template v-if="x_range == '2Y'">
<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, -24*(reversed ? -1 : +1))">🡠</button>
<input type="date" class="form-control" v-model="disp_date" />
<DateRangePickerRange v-model="x_range" :direction="direction" />
<button type="button" class="btn btn-sm btn-primary" @click="x_date = timeshift_month(x_date, 24*(reversed ? -1 : +1))">🡢</button>
</template>
<template v-if="x_range == 'Range'">
2022-09-22 22:07:36 -04:00
<input type="date" class="form-control" v-model="disp_date_end" v-if="direction < 0" />
2022-09-22 07:10:08 -04:00
<input type="date" class="form-control" v-model="disp_date" />
2022-09-22 22:07:36 -04:00
<input type="date" class="form-control" v-model="disp_date_end" v-if="direction >= 0" />
2022-09-22 07:10:08 -04:00
<DateRangePickerRange v-model="x_range" :direction="direction" />
</template>
</div>
</template>
<script>
import DateRangePickerRange from './DateRangePickerRange.vue';
function timeshift(date, ms) {
return new Date(date.getTime() + ms);
}
function timeshift_month(date, diff) {
var month = date.getMonth() + diff;
return new Date(date.getFullYear() + Math.floor(month/12), month >= 0 ? (month%12) : (month%12 + 12), date.getDate());
}
function datecalc(date, range, direction) {
switch(range) {
case '1D':
return timeshift(date, Math.sign(direction)*24*60*60*1000);
case '1W':
return timeshift(date, Math.sign(direction)*7*24*60*60*1000);
case '1M':
return timeshift_month(date, Math.sign(direction)*1);
case '6M':
return timeshift_month(date, Math.sign(direction)*6);
case '1Y':
return timeshift_month(date, Math.sign(direction)*12);
case '2Y':
return timeshift_month(date, Math.sign(direction)*24);
}
return date;
}
export default {
components: {
DateRangePickerRange
},
props: {
range: {
type: String,
default: '1D'
},
direction: {
type: String,
default: '-1'
},
date: {
type: Date,
default: new Date()
},
date_end: {
type: Date,
default: new Date()
},
reversed: {
type: Boolean,
default: false
}
},
data() {
return {
x_range: this.range,
x_date: this.date,
x_date_end: this.date_end
2022-09-22 07:10:08 -04:00
};
},
computed: {
disp_date: {
get() {
return this.x_date.toLocaleDateString('en-CA');
},
set(value) {
if(value.length > 0) {
value = value.split('-');
if(value[0] >= 1700) this.x_date = new Date(value[0], value[1] - 1, value[2]);
}
2022-09-22 07:10:08 -04:00
}
},
disp_date_end: {
get() {
return this.x_date_end.toLocaleDateString('en-CA');
},
set(value) {
if(value.length > 0) {
value = value.split('-');
if(value[0] >= 1700) this.x_date_end = new Date(value[0], value[1] - 1, value[2]);
}
2022-09-22 07:10:08 -04:00
}
},
params() {
return {
x_date: this.x_date,
x_range: this.x_range,
direction: this.direction
};
}
},
watch: {
params(value) {
if(value.x_range != 'Range') this.x_date_end = datecalc(value.x_date, value.x_range, value.direction);
this.$emit('update:date', value.x_date);
this.$emit('update:date_end', this.x_date_end);
},
date(value) { this.x_date = value; },
x_date(value) { this.$emit('update:date', value); },
date_end(value) { this.x_date_end = value; },
x_date_end(value) { this.$emit('update:date_end', value); },
2022-09-22 07:10:08 -04:00
range(value) { this.x_range = value; },
x_range(value) { this.$emit('update:range', value); }
},
methods: {
timeshift, timeshift_month
},
mounted() {
this.$emit('update:date_end', this.x_date_end = datecalc(this.x_date, this.x_range, this.direction));
}
};
</script>