Currently, I am using the vuetify date picker in my project. The API that I am interfacing with will showcase data within a specific date range. I have utilized the date picker component along with the range prop to achieve this functionality successfully. Whenever I click a designated button, a modal containing the date picker pops up and everything functions as intended.
However, there is one issue that I have encountered - the date picker does not display every day of the month. At the moment, it only shows dates from May 1st to May 23rd, leaving out the remaining days.
<div class="d-inline">
<v-dialog ref="dialog" v-model="modal" :return-value.sync="date" persistent width="290px" >
<template v-slot:activator="{ on }">
<v-btn class="mt-2" outlined v-on="on">pick dates</v-btn>
</template>
<v-date-picker v-model="stateDateRange" range scrollable>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="modal = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.dialog.save(date); selectStateDates();">OK</v-btn>
</v-date-picker>
</v-dialog>
</div>
var app = new Vue({
data: {
stateDateRange: [],
menu: false,
modal: false,
}
});
Although everything else is functioning properly, the main concern lies with the incomplete display of dates by the calendar component.
Here is how the current calendar looks
I suspect that there might be a conflicting element in my code causing this issue but I am unsure of what it could be. Any insights into what may potentially cause this problem?
To investigate further, I tested this code in a new dummy project where it worked perfectly fine.