Is there any way that I can select the date in datepicker with vuetify without clicking on the OK button. I need it to auto-close and save it to the text-field when i choose the date. Vuetify version is 0.16
<v-flex xs11 sm3>
<v-dialog
persistent
v-model="startmodal"
lazy
full-width
max-width="290px"
>
<v-text-field
slot="activator"
label="Start Date"
v-model="startdate"
prepend-icon="event"
required
></v-text-field>
<v-date-picker v-model="startdate" scrollable actions>
<template slot-scope="{ save, cancel }">
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat color="primary" #click="cancel">Cancel</v-btn>
<v-btn flat color="primary" #click="save">OK</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-dialog>
</v-flex>
**
Wrap Date picker into the menu and add this: :close-on-content-click="true"
Here is an example:
<v-menu
lazy
offset-y
full-width
:close-on-content-click="true"
v-model="menu"
transition="scale-transition"
:nudge-right="40"
max-width="290px"
min-width="290px"
>
<v-text-field
slot="activator"
label="Activation Date"
required
v-model="selectedDate"
prepend-icon="event"
readonly
></v-text-field>
<v-date-picker
show-current
class="mt-3"
v-model="selectedDate"
>
<template slot-scope="{ save, cancel }">
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat color="primary" #click="cancel">Cancel</v-btn>
<v-btn flat color="primary" #click="save">OK</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-menu>
Related
I have a v-row that is built like this:
<v-row class="mt-3 d-flex flex-wrap">
<v-col cols="4">
<v-text-field
v-model="search"
placeholder="Suche"
filled
rounded
dense
width="50"
prepend-inner-icon="mdi-magnify"
>
</v-text-field>
</v-col>
<v-col cols="3">
<v-menu
ref="menu1"
v-model="menu1"
:close-on-content-click="false"
transition="scale-transition"
offset-y
max-width="290px"
min-width="auto"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="BeginDate"
label="Startdatum"
persistent-hint
prepend-icon="mdi-calendar"
v-bind="attrs"
color="primary"
v-on="on"
>
</v-text-field>
</template>
<v-date-picker
color="primary"
v-model="BeginDate"
no-title
#input="menu1 = false"
>
</v-date-picker>
</v-menu>
</v-col>
<v-col cols="3">
<v-menu
ref="menu2"
v-model="menu2"
:close-on-content-click="false"
transition="scale-transition"
offset-y
max-width="290px"
min-width="auto"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="EndDate"
label="Enddatum"
persistent-hint
prepend-icon="mdi-calendar"
v-bind="attrs"
color="primary"
v-on="on"
>
</v-text-field>
</template>
<v-date-picker
color="primary"
v-model="EndDate"
no-title
#input="menu2 = false"
>
</v-date-picker>
</v-menu>
</v-col>
<v-col cols="1">
<v-btn
#click="DateFilter()"
color="primary"
>
Apply
</v-btn>
</v-col>
<v-col cols="1">
<v-btn
#click="DateFilterReset()"
color="red"
class="white--text"
>
Reset
</v-btn>
</v-col>
</v-row>
On the website if you visit it on Desktop it looks perfectly fine:
But if you go on the Site on a device with a smaller screen size, the columns aren´t wrapping.
Does anyone know the classes i need to apply to the v-row. I have already tried 'd-flex' and 'flex-wrap'. I didn´t find any more helpful on the vuetify website either. Thanks in advance
The cols attribute define the col width for all viewports. To set a different col width in small viewport you should use the xs or sm attributes. For ex:
<v-col cols="4" xs="12" sm="6"></v-col>
i wondering why when i use v-dialog in v-for and i try to reopen and re close dialog in many times
it will take firefox down,firefox hang and i have to close firefox
this is the code
<template>
<v-row>
<v-col v-for="n in 6" :key=n>
<v-card
>
<v-card-actions>
<div class="text-center">
<v-dialog
v-model="dialog"
width="500"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
v-bind="attrs"
v-on="on"
>
Click Me
</v-btn>
</template>
<v-card>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
text
#click="dialog = false"
>
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</template>
and this is the scrip code, is only return for v dialog
<script>
export default {
data(){
return {
dialog: false
}
}
}
</script>
that code above is pure v-dialog vuetify, i only put that in card
You've to move the v-dialog out the loop :
<template>
<v-row>
<v-dialog
v-model="dialog"
width="500"
>
<v-card>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
text
#click="dialog = false"
>
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-col v-for="n in 6" :key=n>
<v-card
>
<v-card-actions>
<div class="text-center">
<v-btn
color="primary"
#click.stop="dialog=true"
>
Click Me
</v-btn>
</div>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</template>
This is my toolbar, and I have problems with the the first button/menu.
I want it, when highlighted to have the same look as when the other buttons are highlighted. I've tried with py-3 and py-2 class on the v-btn, but then it gets squeed or does not fill the entire toolbar erea.
<v-toolbar dark dense app color="blue-grey darken-2">
<v-toolbar-side-icon #click="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title class="text-uppercase">
<router-link :to="{ name: 'home' }" class="brand-logo white--text">
<span>Byte</span>
<span class="font-weight-light">[Gym]</span>
</router-link>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-menu v-if="user" offset-y transition="slide-y-transition" open-on-hover>
<template v-slot:activator="{ on }">
<v-btn flat v-on="on">
<v-icon>expand_more</v-icon><v-btn flat to="/training">Training</v-btn>
</v-btn>
</template>
<v-list>
<v-list-tile v-for="item in traininglinks" :key="item.text" router :to="item.route">
<v-list-tile-title>{{ item.text }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-btn flat to="/nutrition">Nutrition</v-btn>
<v-btn flat to="/about">About</v-btn>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-btn v-if="user" flat>{{user.email}}</v-btn>
<v-btn v-if="!user" icon to="/login">
<v-icon>account_circle</v-icon>
</v-btn>
<v-btn v-if="user" icon #click="logout">
<v-icon right>exit_to_app</v-icon>
</v-btn>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
<v-btn icon class="hidden-sm-and-up">
<v-icon>more_vert</v-icon>
</v-btn>
</v-toolbar>
I want it to look like the other buttons when they are active, but now its only a tiny box around it. I feels this should work out of the box?
Can't find an answer for this anywhere..
So the problem here is that you're putting a button inside of a button. If you remove the v-btn around Training then it works the way it's supposed to.
<template v-slot:activator="{ on }">
<v-btn flat v-on="on">
<v-icon>expand_more</v-icon>Training
</v-btn>
</template>
Working codepen here: https://codepen.io/CodingDeer/pen/rNBjLOJ?editors=1010
I'm working on a table list with some crud actions. When I click on the edit icon, I will open a dialog box that includes 3 "v-tabs-items" through a "v-for".
In the last v-tab i have an v-time-picker input in a menu, and use the structure of the Vuetify documentation.
<template>
<v-flex>
<v-data-table>
<!-- some data -->
</v-data-table>
<v-dialog
v-model="dialog"
>
<v-card>
<v-flex>
<v-toolbar color="secondary" light tabs>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-spacer />
<template v-slot:extension>
<v-tabs
v-model="tab"
color="secondary"
align-with-title
>
<v-tabs-slider color="accent" />
<v-tab v-for="i in items" :key="i">
{{ i }}
</v-tab>
</v-tabs>
</template>
</v-toolbar>
<v-tabs-items v-model="tab">
<v-tab-item v-for="i in items" :key="i">
<v-card flat>
<v-card-text v-if="i === 'Ad'" class="pa-0">
<!-- Some Content -->
</v-card-text>
<v-card-text v-if="i === 'Content'" class="pa-0">
<!-- Some Content -->
</v-card-text>
<v-card-text v-if="i === 'Target'" class="pa-0">
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md6>
<v-menu
ref="time_picker"
v-model="dailyTimeMenu1"
:close-on-content-click="false"
:nudge-right="-15"
:return-value.sync="editedItem.daily_time_from"
lazy
transition="scale-transition"
offset-y
full-width
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="editedItem.daily_time_from"
label="Time From"
prepend-icon="access_time"
readonly
outline
class="mr-2"
v-on="on"
/>
</template>
<v-time-picker
v-if="dailyTimeMenu1"
v-model="editedItem.daily_time_from"
full-width
#click:minute="$refs.time_picker.save(editedItem.daily_time_from)"
/>
</v-menu>
</v-flex>
<v-flex xs12 sm6 md6>
<v-menu
ref="time_picker"
v-model="dailyTimeMenu2"
:close-on-content-click="false"
:nudge-right="-15"
:return-value.sync="editedItem.daily_time_to"
lazy
transition="scale-transition"
offset-y
full-width
disabled
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="editedItem.daily_time_to"
label="Time to"
prepend-icon="access_time"
readonly
outline
v-on="on"
/>
</template>
<v-time-picker
v-if="dailyTimeMenu2"
v-model="editedItem.daily_time_to"
full-width
#click:minute="$refs.time_picker.save(editedItem.daily_time_to)
/>
</v-menu>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn color="blue darken-1" flat #click="close">
Cancel
</v-btn>
<v-btn color="blue darken-1" flat #click="saved">
Save
</v-btn>
</v-card-actions>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-flex>
</v-card>
</v-dialog>
</v-flex></template>
...
and the script and Data object is.
<script>
export default {
data: vm => ({
dailyTimeMenu1: false,
dailyTimeMenu2: false,
items: [
'Ad', 'Content', 'Target'
],
tab: null,
dialog: false,
editedItem: {
daily_time_from: null,
daily_time_to: null,
}
})
}
The problem happens when I want to save the time when I pick the minutes.
I receive this error:
this.$refs.time_picker.save is not a function
Can you please explain to me what the problem is and how I can fix it?
Since you use ref="time_picker" in a v-for, this.$refs.time_picker will actually be an array. So you will need to keep track of the index in
<v-tab-item v-for="(i, idx) in items" :key="i">
and use idx in your all of your references to $refs.time_picker, like:
#click:minute="$refs.time_picker[idx].save(editedItem.daily_time_to)
EDIT: You also need to rename the second v-menu with the ref time_picker to something else, as it is now ambiguous which element you are referring to.
I am having issue with Vuetify list inside dialog. My goal is to have available header/footer and inside it have a scrollable list with all this content having max of 600px height but being adjusted on smaller screens.
Right now, I have issue where it is working correctly for bigger screens height > 600px (I can scroll list + I see buttons at the bottom) but work incorrectly on smaller screens (can scroll list but have to scroll at the end to see buttons).
Do anyone have an idea what did I forget to add?
<!-- MovementsInput component -->
<template>
<v-form
ref="form"
v-model="valid"
lazy-validation>
<v-card
>
<v-card-title class="headline primary">
Add new movement
</v-card-title>
<v-card-text>
<v-list
style="max-height: 600px"
class="scroll-y">
<template
v-for="movement in movements">
<v-list-tile
:key="movement.name">
<v-list-tile-title>
{{movement.name}}
</v-list-tile-title>
</v-list-tile>
</template>
</v-list>
<!-- Ignore this autocomplete, forget to remove it from screenshot -->
<v-autocomplete
v-model="movement"
:items="movements"
:color=this.$vuetify.theme.secondary
hide-selected
item-text="name"
item-value="name"
label="Movement"
placeholder="Select movement from the list"
return-object
></v-autocomplete>
</v-card-text>
<v-card-actions>
<v-btn
color="grey"
#click="cancelClicked"
>
Cancel
<v-icon right>fa-undo</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-btn
:disabled="!valid"
:rules="[v => !!v || 'Everything has to be valid']"
required
color="primary"
#click="confirmClicked"
>
Confirm
<v-icon right>fa-check</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-form>
</template>
<!-- Other file, all this is for now called in simple Vuetify dialog -->
<v-dialog
persistent
:value="true"
>
<MovementsSelect />
</v-dialog>
So, I did find solution, here is full example from Vuetify documentation.
<template>
<v-layout row justify-center>
<v-dialog v-model="dialog" persistent max-width="600px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">Open Dialog</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">User Profile</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field label="Legal first name*" required></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field label="Legal middle name" hint="example of helper text only on focus"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field
label="Legal last name*"
hint="example of persistent helper text"
persistent-hint
required
></v-text-field>
</v-flex>
<v-flex xs12>
<v-text-field label="Email*" required></v-text-field>
</v-flex>
<v-flex xs12>
<v-text-field label="Password*" type="password" required></v-text-field>
</v-flex>
<v-flex xs12 sm6>
<v-select
:items="['0-17', '18-29', '30-54', '54+']"
label="Age*"
required
></v-select>
</v-flex>
<v-flex xs12 sm6>
<v-autocomplete
:items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
label="Interests"
multiple
></v-autocomplete>
</v-flex>
</v-layout>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat #click="dialog = false">Close</v-btn>
<v-btn color="blue darken-1" flat #click="dialog = false">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</template>
Try adding v-app in your MovementsInput component.
Your component should be like this:
<template>
<v-app>
<!-- your component code here -->
</v-app>
</template>
More info here : https://vuetifyjs.com/en/getting-started/frequently-asked-questions#my-application-does-not-look-correct