I am currently working on creating a calendar in Vue.js that allows users to select dates only from the current day up to the next 30 days. Dates prior to the current date are disabled, as well as dates beyond the initial 30-day period.
While I have experience implementing similar functionality in JavaScript, you can view an example here: https://codepen.io/tarik-bisevac/pen/WNemOXO
However, I am facing challenges when trying to port this code to Vue.js
Below is my attempt at using Vue:
let app = new Vue({
el: '#app',
data:{
min: dtToday,
max: maxDate
},
computed: {
dtToday(){
new Date().toISOString().slice(0,10)
firstDate.setAttribute('min',dtToday)
firstDate.setAttribute('max',dtToday)
},
maxDate(){
let month = new Date().getMonth()+2
let day = new Date().getDate()
let year = new Date().getFullYear()
new Date(`${month}/${day}/${year}`).toISOString().slice(0,10)
}
}
})
HTML:
<div id="app">
<input type='date' v-model='min'>
<input type='date' v-model='max'>
</div>
An error message "Uncaught ReferenceError: Cannot access 'dtToday' before initialization" is being displayed.
I have attempted different strategies using methods and computed properties, but I am still unsure of the correct approach.