使用vuejs-datepicker如何定制每个日期的外观？
使用vuejs-datepicker如何定制每个日期的外观？
提问于 2019-01-23 12:03:09
我正在使用优秀的组件vuejs-datepicker，就像像这样的外接程序一样，它做了我想要的99%的事情，但遗憾的是，这还不够.
我知道我可以设置高亮显示的日期和禁用的日期，但我希望能够对不同的日期应用不同的格式(例如，伦敦的日期出现在红色、曼彻斯特蓝色和廷巴克图绿色)。
与此最接近的是使用day-cell-content属性：
:day-cell-content="setcell"结合这一职能：
setcell(x) {
// put day number in italics
return '<em>' + (x.date) + '</em>';
}这是可行的，但我唯一能得到的是天数，我想要日期。其他可能性包括：
然而，我无法使这些工作，无论如何，他们适用于整个日历，而不是每个单独的日期。
这真的很令人沮丧，因为我已经看过对象模型(如下所示)，我所需要做的就是每天都标记！
我有遗漏什么吗？
回答 1
Stack Overflow用户
发布于 2019-01-23 15:09:43
如果您想使用datepicker提供的工具，我认为您必须修改您的方法。我使用highlighted道具突出显示选定城市的日期。我把它们放在beforeCalendarHeader槽中，这样您就可以在选择器打开的情况下选择城市了。如果它对你有用的话，这是相当简单的。
我认为，如果您必须对日期进行自定义着色，则需要进入组件和创建自定义扩展的源。
根据您的计划，如果日期重叠(可能它们在用例中不重叠)，那么颜色单元格将是什么？
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54326850
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号