'Vuetify date picker not displaying the whole month

I am working with vuetify date picker. The API I am calling will display data from a range of dates. I have called the date picker component with the range prop. Basically I will click a button and a modal date picker pops up and everything is working.

The one problem I am having is that it doesn't display every day of the month. Right now it shows May 1st -- May 23 and that's it.

<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,
    }
});

This is what I currently have and its working other than not displaying all the dates.

This is the current display of the calendar

I Think something else in my code is breaking this but I'm not sure what. Any idea what could potentially break this?

I copied this code in a new dummy project and it was working fine

htmlcssvue.jsvuetify.js


Solution 1:[1]

Total noob Mistake! I had similar CSS class names on a table which then took place on the vuetify date picker that uses a table and it broke it.

Solution 2:[2]

I don't know the reason for this! but I see it calculator height is incorrect, so it shows incomplete.

Solution: You can override CSS:

.v-date-picker-table { height: 100%; max-height: 300px; }

maybe help you!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Trey6
Solution 2 2conthanlancon

Related Questions