First
This commit is contained in:
154
htdocs/DateRangePicker.vue
Normal file
154
htdocs/DateRangePicker.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<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'">
|
||||
<input type="date" class="form-control" v-model="disp_date" />
|
||||
<input type="date" class="form-control" v-model="disp_date_end" />
|
||||
<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
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
disp_date: {
|
||||
get() {
|
||||
return this.x_date.toLocaleDateString('en-CA');
|
||||
},
|
||||
set(value) {
|
||||
value = value.split('-')
|
||||
this.x_date = new Date(value[0], value[1] - 1, value[2]);
|
||||
}
|
||||
},
|
||||
disp_date_end: {
|
||||
get() {
|
||||
return this.x_date_end.toLocaleDateString('en-CA');
|
||||
},
|
||||
set(value) {
|
||||
value = value.split('-')
|
||||
this.x_date_end = new Date(value[0], value[1] - 1, value[2]);
|
||||
}
|
||||
},
|
||||
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); },
|
||||
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>
|
||||
Reference in New Issue
Block a user