vuetify.js - 如何更改 Vuetify 日期范围选择器的外观？

Question

我正在尝试重新创建这些 Vuetify 日期范围选择器，其中我有 2 个用于 From 和 To 日期的选择器。请注意它们如何具有漂亮的浅蓝色背景颜色，跨越所选范围。我认为只为选择器设置颜色就足够了：

<v-date-picker
  v-model="datesRange"
  color="green"
  :max="maxDate"
  no-title
  range
  @input="menuFrom = false"
/>

但是，当我创建它时，我只看到范围内日期周围的绿色圆圈。

我在这个 Codepen中重新创建了这个问题。

我试图检查上述站点的代码，我可以看到在每个<td>元素下，beside <button>，都有这个 div：

<div class="date-picker-table__event date-range__date-in-range blue lighten-5"></div>

而我只有按钮。我不知道他们是如何把这个 div 放在那里的。

我在文档中找不到任何关于它的信息。那么如何才能使选定的日期仅显示为绿色圆圈，而范围显示为浅绿色背景色呢？

标签： vuetify.js

Answer 1

也许这会有所帮助

div.v-picker__body.v-picker__body--no-title {
  background-color: blue !important;
  color: white;
}

它在你的：codeopen

你可以像这样调试样式