Improved DateTimePicker
This commit is contained in:
parent
233b1cffe7
commit
a1d6903bcb
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user