我试图更改日期选择器的颜色并且无法正常工作
这是ngx-bootstrap datepicker https://valor-software.com/ngx-bootstrap/#/datepicker
这是我的html模板
<div class="form-group">
<label class="col-sm-3 control-label" for="date">Date:</label>
<div class="col-sm-9">
<input type="text"
class="form-control"
[minDate]="minDate"
[maxDate]="maxDate"
#dp="bsDatepicker"
bsDatepicker [(bsValue)]="bsValue">
<button class="btn btn-success" (click)="dp.toggle()">Date Picker</button>
</div>
</div>
我正在尝试各种各样的事情,我确实意识到这个applyTheme是一个函数
colorTheme = 'theme-green';
bsConfig: Partial<BsDatepickerConfig>;
applyTheme(pop: any) {
// create new object on each property change
// so Angular can catch object reference change
this.bsConfig = Object.assign({}, { containerClass: this.colorTheme });
setTimeout(() => {
pop.show();
});
}
答案 0 :(得分:5)
您没有调用该功能。这样做
在input
html元素中添加一个电话
[bsConfig]="dpConfig"
接下来添加到构造函数
之上的组件public dpConfig: Partial<BsDatepickerConfig> = new BsDatepickerConfig();
内部构造函数:
this.dpConfig.containerClass = 'theme-dark-blue'; //or whatever color
答案 1 :(得分:2)
在全局样式文件中添加以下行: styles.scss
.bs-datepicker-body table td.week span
{
color: #2dfbcd !important;
}
.bs-datepicker-body table td span.selected,
.bs-datepicker-head,
.bs-datepicker-head, .bs-datepicker button:active,
.bs-datepicker-body table td.selected span,
.bs-datepicker-body table td span[class*="select-"]:after,
.bs-datepicker-body table td[class*="select-"] span:after,
.bs-datepicker-body table td.active-week span:hover
{
background-color: #2dfbcd !important;
}
答案 2 :(得分:1)
添加
[bsConfig]="{containerClass:'theme-default'}"
到我的组件html文件对我来说很好。
添加主题配置后的输入元素:
<input type="text"
placeholder="Select Time"
class="form-control"
bsDatepicker
[bsConfig]="{containerClass:'theme-default'}"
[(ngModel)]="startDateTime" (ngModelChange)="onStartDateTimeChange($event)">
我正在将ngx-bootstrap版本3.2.0
与Angular 7.2.4
一起使用
答案 3 :(得分:-1)
我们可以直接转到bs-datepicker.config.js
文件,只需更改:
this.containerClass = 'theme-dark-blue';
或你想要的任何颜色。