How can I change color of date on the datepicker vuetify?

Question

Demo codepen like this : https://codepen.io/positivethinking639/pen/pooeMpo?&editable=true&editors=101

I try this : .v-date-picker-table .v-btn { color: green }; and it works

But my problem is I want to add conditions. so on a certain date, it is green. on other dates the color is black.

For example the color of odd date is green. even date is black

How can I do it?

Maybe you can get som inspiration from this answer: https://stackoverflow.com/a/44738834/3163418 — mapa0402

chans chans · Accepted Answer · 2019-10-24T11:03:34

As per your question, you need to color the specific dates and highlight selected date color for these specific dates

By default vuetify gives :event-color="primary" :events="any function" to add additional style below the date, which doesn't deal with the dates color

If you use color="green--text" it changes the color all the dates and not ahve control for specific dates

Still you can add your own logic to set the color for specific date, based on your need. But it requires some additional logic to handle this case

The below code considers, available dates amoung all dates and apply css to those dates programatically

Find the working codepen here: https://codepen.io/chansv/pen/LYYyNYd?editors=1010

    <div id="app">
  <v-app id="inspire">
    <v-row justify="center">
      <v-date-picker v-model="picker" @change="dateClicked"></v-date-picker>
    </v-row>
  </v-app>
</div>

.date-color {
  color: #00B300;
  font-weight: 900;
}

.v-btn--active .date-color {
  color: #fff;
}


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      picker: new Date().toISOString().substr(0, 10),
      availableDates: ["2019-10-02", "2019-10-8", "2019-10-11"],
    }
  },
  methods: {
    dateClicked(val) {
      var allDates = document.querySelectorAll(".v-date-picker-table .v-btn .v-btn__content");
      var dates = this.availableDates.map(x => parseInt(x.split('-')[2]));
      allDates.forEach((x, i) => {
        if (dates.includes(parseInt(val.split('-')[2])) && parseInt(val.split('-')[2]) == x.innerHTML) {

          x.parentNode.style = "background-color: #00b300 !important";
        } else {
          x.parentNode.style = '';
        }
      });

    },
    setColor() {
      var allDates = document.querySelectorAll(".v-date-picker-table .v-btn .v-btn__content");
      var dates = this.availableDates.map(x => parseInt(x.split('-')[2]));
      console.log(dates);
      allDates.forEach((x, i) => {
        if (dates.includes(parseInt(x.innerHTML))) {
          allDates[i].classList.add('date-color');
        }
      })
    }
  },
  mounted() {
  this.setColor();
}
})

How can I change color of date on the datepicker vuetify?

1 Answers