如何在主组件中设置 NgbDatePicker 的 minDate/maxDate 以使用所有页面中的设置？答案

【问题标题】：How to set minDate/maxDate of NgbDatePicker in main component for using the settings in all page?如何在主组件中设置 NgbDatePicker 的 minDate/maxDate 以使用所有页面中的设置？
【发布时间】：2019-11-30 22:02:43
【问题描述】：

在我的 Angular 4 中，我使用的是 Ng-bootstrap (v1.1.0) 我在多个模块下有多个日期选择器。我想在所有位置设置 maxDate 配置。我的文件夹结构如下。

public.module.ts
public.component.ts

---- first.module.ts
---- first.component.ts
-------------- first-sub.component.ts
..............................
..............................

---- second.module.ts
----second.component.ts
-------second-sub.component.ts
..............................
..............................

我尝试在 public.component.ts 中初始化 NgbDatepickerConfig，如下所示

    constructor(config: NgbDatepickerConfig) {
          config.maxDate = { "year": 2018, "month": 7, "day": 4} ;
    }

我正在使用下面的代码来显示日历

<input type="text" id="selectDate" class="form-control" placeholder="{{'DATE_OF_INCIDENT' | translate}}" formControlName="selectDate"
                                        ngbDatepicker #selectedDate="ngbDatepicker" readonly>

您能否建议一种方法，以便我们可以在一个地方配置日期设置，并且可以在使用 Ngb DatePicker 的所有位置使用

【问题讨论】：

你读过API documentation吗？它说：NgbDatepicker 组件的配置服务。您可以注入此服务，通常在您的根组件中，并自定义其属性的值，以便为应用程序中使用的所有日期选择器提供默认值。（强调我的）
JB Nitzet 说你必须创建一个类 NgbdDatepickerConfig，并在你的 appModule 中声明。请参阅 ngb-bootstrap plnkr.co/edit/?p=preview TIP:ng-bootstrap 制作的 plunker 努力实现他的页面。在选项卡示例中，您可以看到示例，在每个项目中，您可以看到一个 plunker
@Eliseo 不，这绝对不是我说的。不要让我说我没有说的话。
我尝试在 app.component.ts 中为配置提供最大日期。但它不适用于 ngb datepicker 指令
编辑我的评论（链接不好）你必须创建一个类 NgbdDatepickerConfig，并在你的 appModule 中声明。请参阅 ngb-bootstrap ng-bootstrap.github.io/app/components/datepicker/demos/config/… TIP:ng-bootstrap 制作的 plunker 努力实现他的页面。在选项卡示例中，您可以看到示例，在每个项目中，您可以看到一个 plunker

标签： angular ng-bootstrap

【解决方案1】：

必须使用 NgbModule 和 FormsModule

this.minDate = { year: 1985, month: 1, day: 1 };
this.maxDate={year:new Date().getFullYear(),month: 1, day: 1}
this.startDate = { year: 1988, month: 1, day: 1 };

 <input class="form-control" placeholder="yyyy-mm-dd" placement="top-left" 
     [minDate]="minDate" [maxDate]="maxDate" [startDate]="startDate" name="dateOfBirth" 
     id="dateOfBirth" [(ngModel)]="dateOfBirth" ngbDatepicker #d="ngbDatepicker" 
     (click)="d.toggle()">

【讨论】：

【解决方案2】：

对我来说，它按照文档中的描述工作：

            <input class="form-control" type="text" formControlName="birthDate" placeholder="Date of Birth"
                     id="inputDateOfBirth" name="dp" ngbDatepicker #d="ngbDatepicker"
                     [minDate]="{year: 1900, month: 1, day: 1}">

文档：https://ng-bootstrap.github.io/#/components/datepicker/overview#limiting-dates

【讨论】：