хорошо, дело в использовании инкапсуляции: ViewEncapsulation.None и такого класса, как
.bs-datepicker-head button:nth-child(3){
display:none!important;
}
Проблема с ViewEncapsultaion.None заключается в том, что все ваши компоненты .css влияют на все приложение. Так что лучше напишите .css вроде
.custom .bs-datepicker-head button:nth-child(3){
display:none!important;
}
Таким образом, если мы используем ViewEncapsultaion.None, влияет только на средство выбора даты, которое имеет класс "custom". Чтобы создать DatePicker с настраиваемым классом, вам нужно использовать [bsConfig].
Я пишу код
Наш .html
<div class="content">
<h4>datepicker should display current date:</h4>
<div class="row">
<div class="col-xs-12 col-12 col-md-4 form-group">
<input type="text"
class="form-control"
[minDate]="minDate"
[maxDate]="maxDate"
#dp="bsDatepicker" [bsConfig]="bsConfig"
bsDatepicker [(bsValue)]="myDateValue">
</div>
</div>
</div>
И наш компонент
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
myDateValue: Date;
bsConfig: Partial<BsDatepickerConfig>;
ngOnInit() {
this.myDateValue = new Date();
//see that our class was "theme-green custom"
this.bsConfig = Object.assign({}, { containerClass: 'theme-green custom' });
}
}
Вы можете увидеть в стекаблиц