vue.js - 使用 vuejs-datepicker 如何自定义每个日期的外观？

Question

我正在使用优秀的组件vuejs-datepicker ，就像这样的加载项经常出现的情况一样，它可以完成我想要的 99% 的功能，但遗憾的是这还不够......

我知道我可以设置突出显示的日期和禁用的日期，但我希望能够对不同的日期应用不同的格式(例如，伦敦的日期显示为红色、曼彻斯特蓝色和廷巴克图绿色)。

我最接近的方法是使用 day-cell-content 属性:

:day-cell-content="setcell"

与此功能结合使用:

setcell(x) {      
  // put day number in italics
  return '<em>' + (x.date) + '</em>';
}

这可行，但我唯一能得到的是日期，而我想要日期。其他可能性包括以下属性:

但是，我无法让这些发挥作用，而且无论如何它们适用于整个日历，而不是每个单独的日期。

这真的很令人沮丧，因为我已经查看了对象模型(如下所示的示例)，而我所需要做的就是以某种方式标记每一天!

我错过了什么吗？

Answer 1

如果您想使用 datepicker 提供的工具，我认为您必须修改您的方法。我用highlighted突出显示所选城市的日期的 Prop 。我把它们放在beforeCalendarHeader slot中这样您就可以在选择器打开的情况下选择城市。如果它对您有用的话，这非常简单。

我认为，如果您必须对日期进行自定义着色，则需要进入组件的源代码和 create a custom extension .

根据您的计划，尚不清楚如果日期重叠，单元格将是什么颜色(也许它们只是在您的用例中不重叠)。

const app = new Vue({
  el: '#app',
  data: {
    selectedCity: 'London',
    cityDates: {
      London: [
        [1, 13],
        [1, 14],
        [1, 15]
      ],
      Manchester: [
        [1, 16],
        [1, 17],
        [1, 18]
      ]
    }
  },
  computed: {
    highlighted() {
      return this.selectedCity ? {
        dates: this.cityDates[this.selectedCity].map((pair) => new Date(2019, ...pair))
      } : {};
    }
  },
  components: {
    vuejsDatepicker
  }
});

<div id="app">
  <vuejs-datepicker :highlighted="highlighted" :open-date="new Date(2019, 1, 1)">
    <div slot="beforeCalendarHeader" class="calender-header">
      <div v-for="city in Object.keys(cityDates)">
        <label><input type="radio" v-model="selectedCity" :value="city">{{city}}</label>
      </div>
    </div>
  </vuejs-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>