NgbDatepicker仅显示数月和数年

Question

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

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

我的输入如下：

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

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

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

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

Answer 1

有一个要求：

https://github.com/ng-bootstrap/ng-bootstrap/issues/1811

截至目前（2020年2月），尚不支持此功能。

Answer 2

https://ng-bootstrap.github.io/#/components/datepicker的现有实施并不支持选择月份+年份 - 它是日期选择器。

您可以尝试在https://github.com/ng-bootstrap/ng-bootstrap/issues

中打开功能请求

Answer 3

没有对此的原生支持，但是您可以通过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; } }