Vuetify's datepicker doesn't show the dates

0
votes

My date picker correctly expands its modal but doesn't show the dates.

enter image description here Datepicker works perfectly on the codepen, it shows the dates but the same code doesn't work in my application. Here is the link to Codepen:

https://codepen.io/anon/pen/QPBzLZ

And here is my code:

.
.
.
               <v-menu
                v-model="menu2"
                :close-on-content-click="false"
                :nudge-right="40"
                lazy
                transition="scale-transition"
                offset-y
                full-width
                min-width="290px"
              >
                <template v-slot:activator="{ on }">
                  <v-text-field
                    v-model="date"
                    label="Date"
                    readonly
                    v-on="on"
                  ></v-text-field>
                </template>
                <v-date-picker v-model="date" @input="menu2 = false" no-title scrollable></v-date-picker>
              </v-menu>
.
.
.
<script>
  export default {
    data: () => ({
    date: new Date().toISOString().substr(0, 10),
    menu2: false
    })
   }
</script>

Does anyone know what the problem is, and what's the best way to solve it?

2
javascriptvue.jsdatepickercalendarvuetify.js
Can you provide your browser? Because your code is working in my case. – Federico Navarrete
I'm using google chrome. It works in Codepen. Does NOT work in my app! :( – seyet
Have you checked the inspect element from your app? – Federico Navarrete
have you tried clearing your cache? – jabamataro
If it works on Codepen and not in local browser, try these steps: A. clear cache, B. check for latest version of browser, C. check any conflicting CSS from other dependencies of your project. – Pranay

2 Answers

0
votes

Assuming that you are using latest version of browser and all other browser related configurations are correctly configured, You may want to check other dependencies of the project for conflicting CSS elements, which is resulting in wrong CSSrendering.

0
votes

If it works in Codepen then I would check the version of the Vuetify on your end and the version of that in Codepen. It might be that your are using the older version of Vuetify that does not fully support DatePicker.