1👍
Now that I know exactly what you are after, I’ve updated accordingly to your example https://jsfiddle.net/05nru5xq/31/
some points on your code:
-
never use capital to name methods, capital letter first is to name Object that can be created with the
new
attribute; -
today
is not a moment object so you can’t callisBetween
on it -
from the docs you need to name your options as there’s 3 of them, hence specifying the option
:picker-options="{ disabledDate: betweenOneWeek }"
-
data
is just a place to hold variables, don’t put methods there.
As a side note:
I’ve done the same (bought it for me) and I’m not in any way affiliated with them, just a happy customer. If you want to know VueJs well enough and quick, try this Udemy course, it’s pretty good and worth all the money
1👍
In the data
section you can define variables with functions but you’re not able to do things like you did. Why? It’s simple. You’re using this
which binding to pickerOptions1
object, not data. Even when you use arrow function
in object it won’t work as well because in that case it will return window
object.
Those operations on data you can move to separate function and in my opinion it would be the best way.
For example you can do something like that:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
customMessage: 'Test ',
testFunction() {
this.customMessage += this.message;
alert(this.customMessage);
}
},
mounted() {
this.testFunction();
}
})
https://jsfiddle.net/mxuh7c9p/
or more suitable to your case:
new Vue({
el: '#app',
data: {
acceptedDates: [],
pickerOptions1: null,
},
methods: {
getDisabledDate(time) {
return moment(time).isBetween(this.acceptedDates[0], this.acceptedDates[1]);
},
setAcceptedDates() {
const disabledDate = this.getDisabledDate(time);
// do something
}
},
mounted() {
//this.getDisabledDate();
}
})