Question

像这样的演示codepen：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应用于这些日期

在此处找到有效的代码笔： 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();
}
})

如何更改日期选择器上日期的颜色？

1 个答案: