CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Uma U
Uma U

Reputation: 51

Vuetify date-picker

This is a vuetify datePicker

I need to use it just as a date picker for the given year and month, currently the header is clickable and month and year can be changed.

How do I disable the header?

<v-date-picker 
        v-model="2021-07-15"
        no-title
        type="date"
        :show-current = "false"
>
</v-date-picker>

Upvotes: 0

Views: 2025

Answers (2)

Mani Mirjavadi
Mani Mirjavadi

Reputation: 1073

As Heretic Monkey mentioned you can use min and max with appropriate values. Here is how you can do it:

For the v-datepicker:

<v-date-picker :min="min" :max="max" v-model="picker"></v-date-picker>

And in your script:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    let date = new Date()
    return {
      min: (new Date(new Date(date.getFullYear(), date.getMonth(), 1) - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
      max: (new Date(new Date(date.getFullYear(), date.getMonth() + 1, 0) - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
      picker: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
    }
  },
})

Upvotes: 1

Sarun
Sarun

Reputation: 59

You could use "v-date-picker-header" class and set it to none.

.v-date-picker-header {
     display: none !important;
 }

Upvotes: 0

Related Questions