frequi_origin/src/components/ftbot/TimeRangeSelect.vue

84 lines
2.2 KiB
Vue
Raw Normal View History

2020-07-11 17:55:47 +00:00
<template>
<b-list-group class="col-mb-4" horizontal="md">
<b-form-group label="Start date" label-for="dp_dateFrom">
<b-input-group>
<b-input-group-prepend>
<b-form-datepicker v-model="dateFrom" class="mb-2" button-only></b-form-datepicker>
</b-input-group-prepend>
<b-form-input
id="dp_dateFrom"
v-model="dateFrom"
type="text"
placeholder="YYYY-MM-DD"
autocomplete="off"
></b-form-input>
</b-input-group>
</b-form-group>
<b-form-group class="ml-2" label="End date" label-for="dp_dateTo">
<b-input-group>
<b-input-group-prepend>
<b-form-datepicker v-model="dateTo" class="mb-2" button-only></b-form-datepicker>
</b-input-group-prepend>
<b-form-input
id="dp_dateTo"
v-model="dateTo"
type="text"
placeholder="YYYY-MM-DD"
autocomplete="off"
></b-form-input>
</b-input-group>
</b-form-group>
<label
>Timerange: <b>{{ timeRange }}</b></label
>
</b-list-group>
2020-07-11 17:55:47 +00:00
</template>
<script lang="ts">
2020-12-05 18:32:37 +00:00
import { Component, Vue, Emit, Prop } from 'vue-property-decorator';
import { dateFromString, dateStringToTimeRange, timestampToDateString } from '@/shared/formatters';
2020-07-11 17:55:47 +00:00
const now = new Date();
@Component({})
export default class TimeRangeSelect extends Vue {
2020-12-05 18:32:37 +00:00
dateFrom = '';
2020-07-11 17:55:47 +00:00
dateTo = '';
2020-12-05 18:32:37 +00:00
@Prop() value!: string;
2020-07-11 17:55:47 +00:00
@Emit('input')
emitTimeRange() {
return this.timeRange;
}
created() {
2020-12-05 18:32:37 +00:00
if (!this.value) {
this.dateFrom = timestampToDateString(new Date(now.getFullYear(), now.getMonth() - 1, 1));
} else {
const tr = this.value.split('-');
if (tr[0]) {
2021-05-23 14:25:31 +00:00
this.dateFrom = timestampToDateString(dateFromString(tr[0], 'yyyyMMdd'));
2020-12-05 18:32:37 +00:00
}
if (tr.length > 1 && tr[1]) {
2021-05-23 14:25:31 +00:00
this.dateTo = timestampToDateString(dateFromString(tr[1], 'yyyyMMdd'));
2020-12-05 18:32:37 +00:00
}
}
2020-07-11 17:55:47 +00:00
this.emitTimeRange();
}
updated() {
this.emitTimeRange();
}
get timeRange() {
if (this.dateFrom !== '' || this.dateTo !== '') {
return `${dateStringToTimeRange(this.dateFrom)}-${dateStringToTimeRange(this.dateTo)}`;
}
return '';
}
}
</script>
<style scoped></style>