Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 877
vivekkurien Avatar asked Jul 05 '18 04:07

vivekkurien


2 Answers

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()">
like image 196
Rokive Avatar answered Oct 15 '22 08:10

Rokive


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

like image 27
Oleksandr Yefymov Avatar answered Oct 15 '22 07:10

Oleksandr Yefymov