CODEWITHSUNDEEP
angulardatepickerng-bootstrap
Anshuman Jasrotia
Anshuman Jasrotia

Reputation: 3175

How to set minDate for ng-bootstrap datepicker

Below is the code I am using to set the minDate

 <input ngbDatepicker #d="ngbDatepicker"  [minDate]="minDate" [formControl]="Form.controls['dateOfBirth']">

In the component I am setting the minDate as below:

public minDate: Date = void 0; 
constructor() {
    this.minDate = new Date(1950, 1, 1);
}

But the datepicker still shows 2007 as the minDate. Is there any thing that is missing. Let me know in case any other information is required.

Thanks for your time.

Upvotes: 19

Views: 37559

Answers (3)

Anusha Bhat
Anusha Bhat

Reputation: 431

This is your HTML Code

<mat-form-field class="col-md-3">
<mat-label >Date :</mat-label>
<input
matInput
ngxDaterangepickerMd
formControlName="dateFilter"
placeholder="Choose date"  [maxDate]="maxDate" [minDate]="minDate"
[showDropdowns]="true"
[singleDatePicker]="true"
[showCancel]="true"
 [locale]="locale"
/>
 </mat-form-field>

This goes to typescript:

public minDate =  moment().subtract(1, 'days');
public maxDate = moment();
selected = moment();
locale :LocaleConfig= {
    applyLabel: 'Apply',
    customRangeLabel: ' - ',
    daysOfWeek: moment.weekdaysMin(),
    monthNames: moment.monthsShort(),
    firstDay: moment.localeData().firstDayOfWeek(),
};

Upvotes: 0

user1519240
user1519240

Reputation: 2354

Just pass [minDate]="{year: 1980, month: 1, day: 1}":

<input type="text" [(ngModel)]="date"  ngbDatepicker #d="ngbDatepicker" (focus)="d.open()" [minDate]="{year: 1980, month: 1, day: 1}" name="date" class="form-control"/>

Upvotes: 9

pkozlowski.opensource
pkozlowski.opensource

Reputation: 117370

From your code snippet it looks like you are using ng-bootstrap from https://ng-bootstrap.github.io/#/components/datepicker. Assuming that I'm correct you need to use NgbDateStruct (an object with fields like year, month, day) instead of the built-in JavaScript Date object. For example, to set a min date to the beginning of this year you would use:

this.minDate = {year: 2017, month: 1, day: 1};

Here is a working example in a plunker: http://plnkr.co/edit/VDEYDwp7QIZDDHatCNPh?p=preview

Upvotes: 27

Related Questions