CODEWITHSUNDEEP
javascriptcssvue.jsvuetify.js
Nuno Peixoto
Nuno Peixoto

Reputation: 154

Vuetify datepicker apears without event icon and with blank fields

I have a Vuetify datepicker and when I run the code it appears without the event icon (it appears wit the letters "event") and when I open the datepicker the days appear in blank. It gives no error on the console. Image: https://pasteboard.co/HV7eD1O.png

<v-flex xs12 sm6 md4>
    <v-dialog ref="dialog" v-model="modal" :return-value.sync="date" persistent lazy full-width width="290px">
      <v-text-field slot="activator" v-model="date" label="Picker in dialog" prepend-icon="event"readonly>
      </v-text-field>
      <v-date-picker v-model="date" scrollable>
        <v-spacer></v-spacer>
        <v-btn flat color="primary" @click="modal = false">Cancel</v-btn>
        <v-btn flat color="primary" @click="$refs.dialog.save(date)">OK</v-btn>
      </v-date-picker>
    </v-dialog>
  </v-flex>

export default {
  data() {
    return {
      book: {
        title: null,
        subtitle: null,
        authors: null,
        publishDate: null,
        nrPages: null,
        publisher: null,
        language: null,
        thumbnailUrl : null
      },
      date: new Date().toISOString().substr(0, 10),
      modal: false,
      error: null,
      success: null,
      dialog: false,
      datepicker : false,
      required: (value) => !!value || 'Required.'
    }
  },

Upvotes: 3

Views: 3843

Answers (2)

Mohammad Momtaz
Mohammad Momtaz

Reputation: 635

Add the following line to the public/index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">

Upvotes: 1

Joelgullander
Joelgullander

Reputation: 1684

According to the quickstart guide: https://github.com/vuetifyjs/vuetify

You need to manually import styling & icons.

  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

According to the docs: 

  export default {
    data () {
      return {
        picker: new Date().toISOString().substr(0, 10),
        landscape: false,
        reactive: false
      }
    }
  }

So I assume you don't want to assign like referenced here: https://vuetifyjs.com/pt-BR/components/date-pickers

date: new Date().toISOString().substr(0, 10),

Like you are doing above

Upvotes: 2

Related Questions