CODEWITHSUNDEEP
angularng-bootstrap
vivekkurien
vivekkurien

Reputation: 1594

How to set minDate/maxDate of NgbDatePicker in main component for using the settings in all page?

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

Upvotes: 11

Views: 18610

Answers (2)

Rokive
Rokive

Reputation: 825

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()">

Upvotes: 10

Oleksandr Yefymov
Oleksandr Yefymov

Reputation: 6509

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

Upvotes: 4

Related Questions