Блог

Я не могу найти какой-либо документированный способ скрыть год в ngx-bootstrap datepicker. Я пытался dateInputFormat: 'MMDD' , но год все еще отображается в заголовке datepicker. Ссылка на документацию: https://valor-software.com/ngx-bootstrap/#/datepicker Я хотел бы показать что-то вроде:

ну, дело в том, что используйте инкапсуляцию:ViewEncapsulation.Нет и класс, подобный

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

Проблема с ViewEncapsultaion.Нет, все ваши .css в компоненте влияют на все приложение. Итак, лучше напишите .css, например

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

Итак, если мы используем ViewEncapsultaion.Нет, влияет только на выбор даты, который имеет класс «пользовательский». Чтобы создать указатель даты с пользовательским классом, вам нужно использовать [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' });
  }
}
  

Вы можете увидеть в стекблите

Вы можете использовать пользовательский NgbDatepickerI18n и перезаписать метод getYearNumerals , чтобы вернуть пустую строку. На самом деле именно этот метод используется NgbDatePicker для отображения года в заголовке навигации.

Вот простой пример:

 @Injectable({
  providedIn: 'root'
})
class CustomDateI18n extends NgbDatepickerI18nDefault {
  getYearNumerals(year: number): string {
    return '';
  }
}
@Component({
  selector: 'app-component',
  templateUrl: './my-component.component.html',
  providers: [
    {
      provide: NgbDatepickerI18n,
      useClass: CustomDateI18n
    }
  ]
})