仅带月份和日期（隐藏年份）的日期选择器

Question

我找不到任何记录的方法来隐藏ngx-bootstrap datepicker上的年份。我尝试了dateInputFormat: 'MMDD'，但year仍然显示在datepicker标头中。 文档链接： https://valor-software.com/ngx-bootstrap/#/datepicker 我想展示一些类似的东西：

Answer 1

好吧，那就是使用encapsulation：ViewEncapsulation.None和类似的类

.bs-datepicker-head button:nth-child(3){
  display:none!important;
}

ViewEncapsultaion.None的问题是，组件中的所有.css都会影响所有应用程序。因此，最好写一个像.ps这样的.css

.custom .bs-datepicker-head button:nth-child(3){
  display:none!important;
}

因此，如果我们使用ViewEncapsultaion.None，则仅影响具有“自定义”类的日期选择器。要使用自定义类创建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

中看到