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

Posted 2023-02-22

【中文标题】如何更改 datepicker vuetify 上的日期颜色？

【英文标题】：How can I change color of date on the datepicker vuetify?

【发布时间】：2020-02-20 10:08:46

【问题描述】：

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

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

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

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

我该怎么做？

【问题讨论】：

也许你可以从这个答案中得到一些灵感：https://***.com/a/44738834/3163418

@mapa0402 这个案例是 vuetify 上的 datepicker。不是其他人

【参考方案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();

)