angular - NgbDatepicker 只显示月份和年份

Question

我正在使用由 Angular 4 提供支持的 Bootstrap 4 组件开发一个应用程序，但我无法将 NgbDatepicker 指令配置为仅显示月份和年份，而不是日期 - 就像信用卡一样。

我只想选择月份和年份，我不关心选择特定的日期。

我的输入是这样的:

<input id="demodate" type="text" name="demodate" ngbDatepicker#startDateDp="ngbDatepicker" [(ngModel)]="modelDate"/>

我尝试了为此处列出的指令列出的所有属性

https://ng-bootstrap.github.io/#/components/datepicker

但他们似乎都没有帮助我。有什么想法吗？

Answer 1

好吧，没有对此的本地支持，但你可以帮助自己使用 css 和 navigate事件。它不是特别好，但很实用。

<ngb-datepicker (navigate)="dateNavigate($event)"
[showWeekdays]="false" class="datepicker-only-month-select"></ngb-datepicker>


在您的组件中，您可以捕获包含先前值和新值的导航事件:

dateNavigate($event: NgbDatepickerNavigateEvent) {
console.log($event.next.month);
console.log($event.next.year);
...
// old value is contained in $event.current
}


最后在全局范围 CSS 中，您可以隐藏日历(并添加更多所需的样式):

.datepicker-only-month-select {
border: 0 !important;
.ngb-dp-months {
display: none !important;
}
}