[英]ngx-bootstrap for angular - datepicker how do i change the theme color when nothing seems to work
I'm trying to change the color of the datepicker and it is not working我正在尝试更改日期选择器的颜色,但它不起作用
Here is the ngx-bootstrap datepicker https://valor-software.com/ngx-bootstrap/#/datepicker这是 ngx-bootstrap 日期选择器https://valor-software.com/ngx-bootstrap/#/datepicker
This is my html template这是我的 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>
I was trying various things, I do realize that this applyTheme is a function我正在尝试各种事情,我确实意识到这个 applyTheme 是一个 function
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();
});
}
You are not calling that function. 你没有调用那个功能。 Do this instead
这样做
Add a call in your input
html element 在
input
html元素中添加一个调用
[bsConfig]="dpConfig"
Next add to component above constructor 接下来添加到构造函数上面的组件
public dpConfig: Partial<BsDatepickerConfig> = new BsDatepickerConfig();
Inside constructor: 内部构造函数:
this.dpConfig.containerClass = 'theme-dark-blue'; //or whatever color
Add the following lines in global styling file: styles.scss 在全局样式文件中添加以下行: 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;
}
Adding [bsConfig]="{containerClass:'theme-default'}"
to my component html file works fine for me. 将
[bsConfig]="{containerClass:'theme-default'}"
到我的组件html文件中对我来说很好。
The input element after addition of theme configuration: 添加主题配置后的输入元素:
<input type="text"
placeholder="Select Time"
class="form-control"
bsDatepicker
[bsConfig]="{containerClass:'theme-default'}"
[(ngModel)]="startDateTime" (ngModelChange)="onStartDateTimeChange($event)">
I am using ngx-bootstrap version 3.2.0
with Angular 7.2.4
我使用ngx-bootstrap版本
3.2.0
与Angular 7.2.4
Add the following line in angular.json styles在 angular.json styles 添加如下行
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
We can directly go to bs-datepicker.config.js
file and there just change: 我们可以直接转到
bs-datepicker.config.js
文件,只需更改:
this.containerClass = 'theme-dark-blue';
or whatever color you want. 或者你想要的任何颜色。
-> ngx bootstrap DatePicker -> ngx 引导程序 DatePicker
component.ts (Set DatePicker configurations) component.ts(设置日期选择器配置)
//ngxBootstrap datePicker config
bsConfig:Partial<BsDatepickerConfig> = {
containerClass:'theme-red',
dateInputFormat:'DD MMM YYYY'
}
template.html模板.html
<input type="text" class="form-control" placeholder="Date Of Birth"
name="dateOfBirth" formControlName="dateOfBirth"
bsDatepicker [bsConfig]="bsConfig"
[ngClass]="{'is-invalid':f.dateOfBirth.touched && f.dateOfBirth.errors}">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.