Как я могу изменить цвет даты на datepicker vuetify? - PullRequest
Новая
       33

Как я могу изменить цвет даты на datepicker vuetify?

1 голос
/ 24 октября 2019

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

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

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

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

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

1 Ответ

2 голосов
/ 24 октября 2019

В соответствии с вашим вопросом, вам нужно раскрасить определенные даты и выделить выбранный цвет даты для этих конкретных дат

По умолчанию vuetify дает: event-color = "primary": events= "любая функция", чтобы добавить дополнительный стиль ниже даты, который не имеет отношения к цвету даты

Если вы используете color = "green-text", он меняет цвет всех дат иВы не можете управлять определенными датами

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

Приведенный ниже код учитывает: доступные даты среди всех дат и применяет к этим датам программно

Найдитерабочий код здесь: 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();
}
})
...