How to set minDate/maxDate of NgbDatePicker in main component for using the settings in all page?
11,925
Solution 1
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()">
Solution 2
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
Related videos on Youtube
Comments
-
vivekkurien almost 2 years
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
-
Eliseo almost 6 yearsEdit my comment (the link is bad) you must make a class NgbdDatepickerConfig, and declare in your appModule. see the plunker made by ngb-bootstrap ng-bootstrap.github.io/app/components/datepicker/demos/config/… TIP:ng-bootstrap make a effort to actualize his page. In tab examples you can see examples, in each item, you can see a plunker
-