Демо-код выглядит следующим образом: https://codepen.io/positivethinking639/pen/pooeMpo ? & editable = true & editors = 101

Я пробую это: .v-date-picker-table .v-btn { color: green };, и это работает

Но моя проблема в том, что я хочу добавить условия. поэтому в определенный день он зеленый. в другие даты цвет черный.

Например, цвет нечетной даты - зеленый. даже дата черная

Как я могу это сделать?

2
Success Man 24 Окт 2019 в 09:06

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();
}
})
3
chans 24 Окт 2019 в 11:03