如何更改 datepicker vuetify 上的日期颜色？

Question

像这样演示代码笔：https://codepen.io/positivethinking639/pen/pooeMpo?&editable=true&editors=101

我试试这个：.v-date-picker-table .v-btn { color: green }; 它有效

但我的问题是我想添加条件。所以在某个日期，它是绿色的。在其他日期，颜色为黑色。

例如奇数日期的颜色是绿色。连日期都是黑色的

我该怎么做？

Answer 1

根据您的问题，您需要为特定日期着色并突出显示这些特定日期的选定日期颜色

默认情况下 vuetify 提供 :event-color="primary" :events="any function" 在日期下方添加额外的样式，它不处理日期颜色

如果你使用 color="green--text" 它会改变所有日期的颜色和 无法控制特定日期

您仍然可以根据需要添加自己的逻辑来设置特定日期的颜色。但它需要一些额外的逻辑来处理这种情况

以下代码考虑了所有日期中的可用日期，并以编程方式将 css 应用于这些日期

在此处找到工作的 codepen： 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();
}
})