In my angular 4 I am using Ng-bootstrap (v1.1.0) I have multiple date pickers under multiple modules. I want to set maxDate configuration in all the location. My folder structure is as follows.
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
..............................
..............................
I tried initializing NgbDatepickerConfig in the public.component.ts as below
constructor(config: NgbDatepickerConfig) {
config.maxDate = { "year": 2018, "month": 7, "day": 4} ;
}
I am using the following code to display the calendar
<input type="text" id="selectDate" class="form-control" placeholder="{{'DATE_OF_INCIDENT' | translate}}" formControlName="selectDate"
ngbDatepicker #selectedDate="ngbDatepicker" readonly>
Can you suggest a method so that we can configure the date settings at one place and can be used in all locations which uses Ngb DatePicker
must be using the NgbModule and 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()">
For me it works as described in docs:
<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}">
Docs: https://ng-bootstrap.github.io/#/components/datepicker/overview#limiting-dates
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With