我无法找到任何记录在ngx-bootstrap datepicker上隐藏年份的方法。我尝试了dateInputFormat: 'MMDD'
但是仍然在datepicker标题中显示年份。文档链接:https://valor-software.com/ngx-bootstrap/#/datepicker我想展示类似:
好吧,事情是使用封装:ViewEncapsulation.None和类一样
.bs-datepicker-head button:nth-child(3){
display:none!important;
}
ViewEncapsulation.None的问题在于组件中的所有.css都会影响到所有应用程序。所以,最好写一个类似的.css
.custom .bs-datepicker-head button:nth-child(3){
display:none!important;
}
因此,如果我们使用ViewEncapsultaion.None,则只影响具有“custom”类的datepicker。要使用类自定义创建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' });
}
}
你可以在stackblitz看到