CODEWITHSUNDEEP
vue.jsdatepickervue-componentvuetify.js
moses toh
moses toh

Reputation: 13162

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

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?

Upvotes: 1

Views: 8883

Answers (1)

chans
chans

Reputation: 5260

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

Upvotes: 2

Related Questions