Angular Ng-Bootstrap日期选择器日历日背景颜色
Angular Ng-Bootstrap日期选择器日历日背景颜色
提问于 2018-06-04 02:37:57
如何更改ng- 1+ datepicker日历上的bootstrap days背景颜色，就像选择某一天时颜色更改一样。
当选择某一天时，它将div类更改为：
btn-light bg-primary text-white假设我希望有几天显示为
btn-light bg-success text-white或
btn-light bg-warning text-white实现这一目标的最好/最简单的方法是什么？
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-04 02:54:59
使用自定义日期，请参阅https://ng-bootstrap.github.io/#/components/datepicker/examples#customday中的示例
如果您的customDay类似于(简单地)
<ng-template #customDay let-date="date"
let-currentMonth="currentMonth"
let-selected="selected" let-disabled="disabled" let-focused="focused">
{{ date.day }}
</ng-template>您可以使用date、currentMonth、selected、focused或disabled来更改类，例如
<ng-template #customDay let-date="date" let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused">
<span [ngClass]="myClass(date)" [class.focused]="focused"
[class.bg-primary]="selected" [class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
{{ date.day }}
</span>
</ng-template>
especialDates:NgbDateStruct[]=[
{year:2018,month:2,day:1},
{year:2018,month:2,day:10}]
myClass(date:NgbDateStruct)
{
let isSelected=this.specialDates
.find(d=>d.year==date.year && d.month==date.month && d.day==date.day)
return isSelected?'classSelected':'classNormal'
}请参阅https://stackblitz.com/edit/angular-ng-bootstrap-demo-vrxfeu
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50669728
复制相关文章
相似问题