I'm using the Date Picker element with a v-model being an array of dates: ['2022-04-10', '2022-04-11'] .
Even though my dates are in April 2022, I would like to set the default month to May (I would like the Date Picker to display May 2022 by default).
I tried with to play with min="2022-05-01" and max="2022-05-31" but still it displays April 2022 by default.
How can I display May even though my model doesn't have any date in May?
<v-date-picker
min="2022-05-01"
max="2022-05-31"
v-model="datesTest"
:show-adjacent-months="false"
:show-current="false"
color="red"
multiple
no-title
></v-date-picker>
datesTest should contain the date of May month. Hence, It will be like :
data: () => ({
datesTest: '2022-05-01',
})
Working Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
datesTest: '2022-05-01',
})
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.4/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-row justify="center">
<v-date-picker
min="2022-05-01"
max="2022-05-31"
v-model="datesTest"
:show-adjacent-months="false"
:show-current="false"
color="red"
multiple
no-title
></v-date-picker>
</v-row>
</v-app>
</div>
Related
I have two date pickers in my form and when I select a start date, the end date should automatically move to that date. Unfortunately I have no idea how to do this
Here are the v-data-pickers:
<v-row>
<v-col cols="12" sm="6" md="4">
<v-text-field
v-model="form.startDate"
label="Start Date"
:rules="startDateRules"
readonly
/>
<v-date-picker
v-model="form.startDate"
:allowed-dates="allowedDates"
:first-day-of-week="1"
label="Start Date"
/>
</v-col>
<v-spacer />
<v-col cols="12" sm="6" md="4">
<v-text-field
v-model="form.endDate"
label="End Date"
:rules="endDateRules"
readonly
/>
<v-date-picker
v-model="form.endDate"
:min="form.startDate"
:allowed-dates="allowedDates"
:first-day-of-week="1"
label="End Date"
/>
</v-col>
</v-row>
And the data:
data() {
return {
defaultFormData: {
userId: null,
startDate: '',
endDate: ''
},
form: {},
};
},
Check this codesandbox I made: https://codesandbox.io/s/stack-72551995-fy3exz?file=/src/components/Example.vue
You can setup a watcher for your object property like this:
watch: {
'form.startDate': function(val) {
this.form.endDate = val
}
}
You can v-bind vuetify API min prop:
min: Minimum allowed date/month (ISO 8601 format)
Docs:
You can specify allowed dates using arrays, objects, and functions.
https://vuetifyjs.com/en/components/date-pickers/#events
<template>
<v-row justify="center">
<v-date-picker
v-model="date"
:allowed-dates="allowedDates"
class="mt-4"
min="2016-06-15"
max="2018-03-20"
></v-date-picker>
</v-row>
</template>
In your case v-bind the second data picker min prop to first data.picker_one value (ISO 8601 format).
:min="picker_one"
Basic Snippet:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
picker_one: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
picker_two: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
}
},
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<div id="app">
<v-app>
<v-row justify="center">
<v-date-picker
v-model="picker_one"
>
</v-date-picker>
<v-date-picker
:min="picker_one"
v-model="picker_two"
>
</v-date-picker>
</v-row>
</template>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
UI issue:
To not get unexpected behavior - it is better to show data-picker-2 only after the user select date on data-picker-1.
Related docs:
vue - v-bind: https://vuejs.org/guide/essentials/class-and-style.html
vuetify docs - data picker range: https://vuetifyjs.com/en/components/date-pickers/#range
How to display the date time picker and element in the same time?
i got problem when I run the program date time picker doesn't show. just "lala" in the element.
<div id="app">
<v-date-picker mode="dateTime" v-model='date'/>
<p>lala</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/v-calendar"></script>
<script>
new Vue({
el: '#app',
data: {
date: new Date(), // settiing default hari yg terpilih waktu pas datepicker ke load hari $ waktu skrng
}
})
</script>
</body>
Separate v-date-picker and the p tag in two separate divs.
<div id="app">
<div>
<v-date-picker mode="dateTime" v-model="date" />
</div>
<div>
<p>{{date}}</p>
<p>lala</p>
</div>
</div>
My case like this :
If I search a data, it will show all data doctor. But for available day, I want to make it separately. when finished displaying all the doctor's data. I want to call the available method for async or call api to display available day. This available day is run when doctor data appears on the screen. So when the doctor's data appears on the screen, it will call available day. If the user scrolls down, it will call available day from another doctor
My code like this :
<v-col
v-for="(item, i) in items"
:key="i"
cols="12"
>
<v-card
dark
>
<div class="d-flex flex-no-wrap justify-space-between">
<div>
<v-card-title
class="headline"
v-text="item.doctor"
></v-card-title>
<v-card-subtitle v-text="item.hospital"></v-card-subtitle>
<v-card-subtitle>Available today</v-card-subtitle>
</div>
<v-avatar
class="ma-3"
size="125"
tile
>
<v-img :src="item.src"></v-img>
</v-avatar>
</div>
</v-card>
</v-col>
Demo and full code like this : https://codepen.io/trendingnews/pen/ZEYpBeW?editors=1010
My problem is
If I display all the doctor's data, for example 50 data, it's very fast. only 2-3 seconds
But if I display all the doctor's data and available days, for example 50 data, it's very slow. around 10 seconds
So for available day, I want to make it separate. It's only called when the doctor's data appears on the screen
Doctor data and available day are different API. So this is my problem. I have to handle this from the front end
How can I do that? Is there a package that can help? I have used vuex store in this project
Here's a snippet that loads data using the vue-observe-visibility plugin (https://github.com/Akryum/vue-observe-visibility):
The app loads data from a mockup source
A placeholder/preloader shows that something is happening
When the data downloads (after coming into view) the preloader disappears
Pay attention to the parameters of the v-observe-visibility: you have to pass down some ID (custom parameter), you should do it only once (once: true), and you may want some throttling on it.
NOTE: the downloaded data in this snippet is so small, that you may miss the "downloading" state - scroll down fast to the end (there are a 100 posts in the list)
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
posts: []
},
methods: {
fetchPosts(id) {
return fetch(`https://jsonplaceholder.typicode.com/posts/${id ? id : ''}`)
.then(response => response.json())
.then(json => json)
},
async visibilityChanged(isVisible, entry, id) {
const post = await this.fetchPosts(id)
Vue.set(this.posts.find(e => e.id === id), 'body', post.body)
}
},
async mounted() {
const data = await this.fetchPosts()
// this is only for the mockup data: I pluck the id and title,
// so the body can be downloaded later
this.posts = data.map(e => ({
id: e.id,
title: e.title
}))
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/vue-observe-visibility/dist/vue-observe-visibility.min.js"></script>
<div id="app">
<v-app>
<v-container>
<v-row v-for="post in posts" :key="post.id" v-observe-visibility="{
callback: (isVisible, entry) => visibilityChanged(isVisible, entry, post.id),
once: true,
throttle: 100
}">
<v-col>
<v-row>
<v-col>
<b>{{post.title}}</b>
</v-col>
</v-row>
<v-row>
<v-col>
<v-progress-circular indeterminate color="primary" v-if="!post.body"></v-progress-circular>
{{post.body}}
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
I need to use the mask property for validating the input before it can be added to the list of selected items.
Code:
new Vue({
el: '#app',
data: () => ({
select: ''
})
})
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-combobox
v-model="select"
label="Add 3 digit numbers"
multiple
chips
mask="###"
></v-combobox>
</v-container>
</v-content>
</v-app>
</div>
Problem:
Now the result is the mask limit the length of the input but not the format and then when an element is added Vue throws an error
the value is read as string and is sliced character by character.
Objective:
My goal is that the user only can add values that match the mask.
Thanks.
There is bug in Vuetify when using the mask attribute with multiple. Remove multiple and it will work.
I want to add the items in a v-select. for example, we dont have any item in a v-select and want to add it extrenaly.
<v-select
v-bind:label="Intelligence"
v-model="IntValues"
multiple >
</v-select>
When we write like this we will get only empty select list but how to add items into it externally
Here IntValues:[],
Or Editable list, like TodoMVC
new Vue({
el: '#app',
data() {
return {
selected: null,
items: []
}
},
methods: {
fetchItems() {
this.items = [
"A1",
"B2",
"C3"
]
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify#1.0.3/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout row wrap>
<v-flex xs6>
<v-subheader>Standard</v-subheader>
</v-flex>
<v-flex xs6>
<v-select :items="items" v-model="selected" label="Select" single-line bottom></v-select>
</v-flex>
<div #click=fetchItems>FetchItems</div>
</v-layout>
</v-container>
</v-app>
</div>
You can modify the items later to update the value.
You can test with clicking the FetchItem to see the effect.
Watchers will do your work, add a watcher to your model and whenever it changes add value to your items.
You can refer this pen, it is using v-combobox which is having power of autocomplete.
https://codepen.io/saurabhtalreja/pen/yLMyJmE
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
select: ['Vuetify'],
items: [
'Programming',
'Design',
'Vue',
'Vuetify',
],
}
},
watch:{
select(val,prev){
console.log('New Input Value is' ,val);
console.log('Previous Value is' ,prev);
console.log('Model is = New Input ie. ', this.select);
console.log('Items Array is', this.items)
this.items.push(val);
console.log('New Items are', this.items)
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.4.11/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row>
<v-col cols="12">
<v-combobox
v-model="select"
:items="items"
label="Combobox"
outlined
dense
></v-combobox>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
If you have data in an array variable named values, then just assign it to IntValues.
ie,
this.IntValues = values;
If you have a single object say value, then just push it to the IntValues. ie, this.IntValues.push(value).