I want to use a vuetify calendar that highlights todays date, how would I get it in the data or set it as a variable in the data?
This is the example calendar code on the vuetify page. Calendar Page. This is the first example the week view.
<template>
<v-row>
<v-col>
<v-sheet height="400">
<v-calendar
ref="calendar"
:now="today"
:value="today"
:events="events"
color="primary"
type="week"
></v-calendar>
</v-sheet>
</v-col>
</v-row>
</template>
<script>
export default {
data: () => ({
today: '2019-01-08',
eventsMap: [
{
name: 'Weekly Meeting',
start: '2019-01-07 09:00',
end: '2019-01-07 10:00',
},
{
name: 'Thomas\' Birthday',
start: '2019-01-10',
},
{
name: 'Mash Potatoes',
start: '2019-01-09 12:30',
end: '2019-01-09 15:30',
},
],
}),
mounted () {
this.$refs.calendar.scrollToTime('08:00')
},
}
</script>
How can I get the current date and set it to a variable in the data something like this?
today: currentDate
For Vuetify calendar component, add the following to data: () => ({
today : new Date().toISOString().substr(0, 10),
Define a variable in the data section:
today: new Date()
This will give you today's date. Then you may use it in your component
Related
Now I want to build a autocomplete box but I'm unable to build as the image shown below. Please help me to fix this. THe default value for the room is 1 and the column should be allowed user to click on the option but not allowed them to type. Thank you.
<v-autocomplete
v-model="room"
:items="rooms"
label="room"
></v-autocomplete>
data() {
return {
rooms: ['1 Room', '2 Rooms', '3 Rooms'],
};
},
Using v-select is a better component to use if the user shouldn't be able to type anything in the selection box. The v-select API documentation lists a selection slot to customize the appearance of the selected item. Using this slot you can choose to show only the first character, which matches your requirements for "1 Room" to display as "1".
<template>
<v-select v-model="tempForm.roomCMS" :items="rooms" outlined label="Rooms">
<template v-slot:selection="{ item }">
{{ item.charAt(0) }}
</template>
</v-select>
</template>
<script>
export default {
data() {
return {
tempForm: {
roomCMS: 1
},
rooms: ['1 Room', '2 Rooms', '3 Rooms', '4 Rooms', '5 Rooms', '6 Rooms', '7 Rooms', '8 Rooms']
};
}
};
</script>
codepen demo
How can I disable future dates while using date range?
<date-picker
v-model="params.range"
type="date"
value-type="format"
format="YYYY-MM-DD"
range
placeholder="Filter by date range"
/>
You can use the disabled-date prop to provide a function telling if a date should be disabled or not.
From the vue2-datepicker documentation demo (source code)
<template>
<div>
<p>Not before than today and not after than a week</p>
<date-picker
v-model="value1"
:default-value="new Date()"
:disabled-date="disabledAfterToday"
></date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: new Date(),
};
},
methods: {
disabledAfterToday(date) {
const today = new Date();
today.setHours(0, 0, 0, 0);
return date > today
},
},
};
</script>
Vuetify has a birthday picker. However i need this birthday picker in a for loop. How do i get this to work, i just started with vue and vuetify and can not get my head a round the $refs in combination of an index concept. And i think thats what is needed here. The script is working with errors in the $refs. The idea for the picker is first to select a year, than a month and then the day
<template>
<v-container>
<div v-for="n in 3">
<v-menu
ref="menu"
v-model="menu[n]"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="290px">
<template v-slot:activator="{ on }">
<v-text-field
v-model="date[n]"
label="Birthday date"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker
ref="picker"
v-model="date[n]"
:max="new Date().toISOString().substr(0, 10)"
min="1950-01-01"
#change="save"
></v-date-picker>
</v-menu>
</div>
</v-container>
</template>
<script>
export default {
data: () => ({
date: [],
menu: [],
}),
watch: {
menu (val) {
val && setTimeout(() => (this.$refs.picker.activePicker = 'YEAR'))
},
},
methods: {
save (date) {
this.$refs.menu.save(date)
},
},
}
</script>
I have the same need/issue with this component. I'm searching for the answer as well so I can only make suggestions based on my experience with this issue.
I've tried your same approach here but with little success. I'm currently creating a separate BirthDatePicker component and trying to use the v-model example from this article Using v-model on Nested Vue Components to get each birth-date modeled to it's corresponding value within my 'people' array of objects.
Rough example:
people: [{name: '', dob: '', etc...},{name: '', dob: '', etc...}]
My datepicker like this :
<v-date-picker v-model="date" scrollable :picker-date.sync="pickerDate">
The datepicker in loop
My script vue like this :
data: () => ({
date: new Date().toISOString().substr(0, 10),
pickerDate: null,
}),
watch: {
pickerDate (val) {
console.log(val)
},
},
In every loop, there exist a parameter id and I want to pass parameter id
I try like this :
<v-date-picker v-model="date" scrollable :picker-date.sync="pickerDate(id)">
But there exist error :
Syntax Error: SyntaxError: Unexpected token
How can I solve this problem?
Reference : https://vuetifyjs.com/en/components/date-pickers#date-pickers-react-to-displayed-month-year-change
You cannot pass parameters in picker-date, but still you can pass in Vuetify datepicker update:picker-date event
When you change the month in datepicker, it returns the value as 2019-10 if the selected month is October. If you change the month November then the value will be 2019-11 and id is what your passing on the iteration
<v-date-picker
v-model="date"
class="mt-4"
#update:picker-date="pickerUpdate($event, id)"
></v-date-picker>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
date: '2019-10-15',
id: 5,
}),
methods: {
pickerUpdate(val, id) {
// you can read the val --> 2019-10 for october, id what you are passing
// when you iterate with multiple date picker, you can set id's
// write your async call here
console.log('from picker update ' + val + ' id: ' + id );
},
},
})
I'm new with Vue, so I trying to create a Input Date Picker using Vuetify.
This is my code:
Codepen
The problem is, when I select a date in the picker, I get an error in console:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: '$value'
Is that the correct way to create that component?
As the error states, you cannot change a prop from a child. This is because Vue uses this parent - child flow:
With this structure, you assure that the parent's data is the only source of truth.
In order to change data, you need to emit it up to the parent. You almost had it in your example. Instead of emitting a change event, you need to emit input for v-model to sync the changes.
This is more clear when you see the example from the docs:
<input v-model="searchText">
Is indeed the same as:
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
However, since vue 2.3.0, you can now do changes to props via the .sync modifier
Vue.component('date-picker', {
props: ['label'],
data: () => ({
date: null,
dateFormatted: null,
open: false
}),
created() {
this.date = this.$value;
},
methods: {
formatDate (date) {
if (!date) return null
const [year, month, day] = date.split('-')
return `${day}/${month}/${year}`
},
parseDate (date) {
if (!date) return null
const [day, month, year] = date.split('/')
return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
},
update() {
this.$emit('input', this.dateFormatted);
}
},
watch: {
date (val) {
this.dateFormatted = this.formatDate(this.date)
},
dateFormatted(val) {
this.update();
}
},
template:`
<v-menu
ref="open"
:close-on-content-click="false"
v-model="open"
:nudge-right="40"
lazy
transition="scale-transition"
offset-y
full-width
>
<v-text-field
slot="activator"
v-model="dateFormatted"
:label="label"
placeholder="dia/mês/ano"
#blur="date = parseDate(dateFormatted)"
></v-text-field>
<v-date-picker v-model="date" no-title #input="open = false"></v-date-picker>
</v-menu>
`
});
Vue.config.productionTip = false;
Vue.config.devtools=false
new Vue({
el: '#app',
data: () => ({
myDate: '2018-09-01'
})
});
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.1.4/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.js"></script>
<div id="app">
<v-app>
<v-flex xs24>
<date-picker label="Select a date" v-model="myDate"></date-picker>
<br>
Current date: {{myDate}}
</v-flex>
</v-app>
</div>