1839811/ifms-pti
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved DateTimePicker

Browse Source
This commit is contained in:
Douglas Barone 2021-01-04 11:38:22 -04:00
parent 233b1cffe7
commit a1d6903bcb
2 changed files with 24 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/components/Logs.vue
View File

@ -28,9 +28,8 @@
</template> </template>
</v-tooltip> </v-tooltip>
<v-spacer /> <v-spacer />
<DateTimePicker v-model="dateIn" class="ma-6" label="Início" /> <DateTimePicker v-model="dateIn" class="ma-2" label="Início" />
<DateTimePicker v-model="dateOut" class="ma-4" label="Fim" /> <DateTimePicker v-model="dateOut" class="ma-2" label="Fim" />
<v-checkbox v-model="polling" label="Atualizar automaticamente" />
</v-toolbar> </v-toolbar>
<v-data-table <v-data-table
@ -81,6 +80,10 @@
</v-alert> </v-alert>
</div> </div>
</v-data-table> </v-data-table>
<v-footer>
<v-spacer />
<v-switch v-model="polling" label="Atualizar automaticamente" />
</v-footer>
</div> </div>
</template> </template>

21
web/src/components/ui/DatetimePicker.vue
View File

@ -9,7 +9,10 @@
:label="label" :label="label"
:value="formattedDatetime" :value="formattedDatetime"
readonly readonly
append-icon="mdi-close"
outlined outlined
hide-details
@click:append="clear"
v-on="on" v-on="on"
> >
<template #progress> <template #progress>
@ -26,7 +29,7 @@
</template> </template>
<v-card> <v-card>
<v-card-text class="px-0 py-0"> <v-card-text>
<v-tabs v-model="activeTab" fixed-tabs> <v-tabs v-model="activeTab" fixed-tabs>
<v-tab key="calendar"> <v-tab key="calendar">
<slot name="dateIcon"> <slot name="dateIcon">
@ -38,10 +41,14 @@
<v-icon>mdi-clock</v-icon> <v-icon>mdi-clock</v-icon>
</slot> </slot>
</v-tab> </v-tab>
</v-tabs>
</v-card-text>
<v-card-text>
<v-tabs-items v-model="activeTab">
<v-tab-item key="calendar"> <v-tab-item key="calendar">
<v-date-picker <v-date-picker
v-model="date" v-model="date"
scrollable
v-bind="datePickerProps" v-bind="datePickerProps"
full-width full-width
@input="showTimePicker" @input="showTimePicker"
@ -56,7 +63,7 @@
full-width full-width
></v-time-picker> ></v-time-picker>
</v-tab-item> </v-tab-item>
</v-tabs> </v-tabs-items>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
@ -198,6 +205,14 @@ export default {
this.date = format(initDateTime, DEFAULT_DATE_FORMAT) this.date = format(initDateTime, DEFAULT_DATE_FORMAT)
this.time = format(initDateTime, DEFAULT_TIME_FORMAT) this.time = format(initDateTime, DEFAULT_TIME_FORMAT)
}, },
clear() {
this.date = null
this.time = null
this.okHandler()
},
okHandler() { okHandler() {
this.resetPicker() this.resetPicker()
this.$emit('input', this.selectedDatetime) this.$emit('input', this.selectedDatetime)