Disable Dependent Date picker Angular Power Bootstrap angular 6

Question

I, am trying to disable dependent date picker power by bootstrap angular. My requirement is Select a date from first date picker. After that disable the past date from the selected date picker on another date picker.

<div class="form-group">
    <label>Risk Windows (Start Date)</label>
    <div class="input-group">
        <input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="riskWindowStartDate" ngbDatepicker #d1="ngbDatepicker">
         <div class="input-group-append">
         <button class="btn btn-outline-secondary" (click)="d1.toggle()" type="button">
            <i class="fas fa-calendar"></i>
         </button>
    </div>
</div>
<div *ngIf="f.riskWindowStartDate.invalid && (f.riskWindowStartDate.dirty || f.riskWindowStartDate.touched)" class="invalid-feedback">
     <div *ngIf="f.riskWindowStartDate.errors.required"> Risk Window Start Date is a required field.
     </div>
</div>
</div>

Another Date Picker

<div class="form-group">
     <label>Risk Windows (End Date)</label>
     <div class="input-group">
         <input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="riskWindowEndDate" ngbDatepicker #d2="ngbDatepicker">
          <div class="input-group-append">
               <button class="btn btn-outline-secondary" (click)="d2.toggle()" type="button">
                   <i class="fas fa-calendar"></i>
                </button>
           </div>
     </div>
     <div *ngIf="f.riskWindowEndDate.invalid && (f.riskWindowEndDate.dirty || f.riskWindowEndDate.touched)" class="invalid-feedback">
           <div *ngIf="f.riskWindowEndDate.errors.required"> Risk Window End Date is a required field. 
           </div>
      </div>
   </div>

I, did some research and found that, need to add minDate and maxDate as per the official document. But not able to found how to solve the dependent date selected.

As per the image the second datepicker date need to be disable from the 2018-08-16.

Some research link How to disable previous date in ngbDatepicker in Angular 4?

https://ng-bootstrap.github.io/#/components/datepicker/examples

San Jaisy · Accepted Answer · 2018-08-15 02:06:27Z

End up finding this solution

First datepicker

<div class="input-group">
                    <input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="riskWindowStartDate" ngbDatepicker #d1="ngbDatepicker" (dateSelect)="onDateSelection($event)">
                    <div class="input-group-append">
                      <button class="btn btn-outline-secondary" (click)="d1.toggle()" type="button">
                        <i class="fas fa-calendar"></i>
                      </button>
                    </div>
                  </div>

Second DatePicker

<div class="form-group">
                  <label>Risk Windows (End Date)</label>
                  <div class="input-group">
                    <input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="riskWindowEndDate" [minDate]="minDate" ngbDatepicker #d2="ngbDatepicker">
                    <div class="input-group-append">
                      <button class="btn btn-outline-secondary" (click)="d2.toggle()" type="button">
                        <i class="fas fa-calendar"></i>
                      </button>
                    </div>
                  </div>
                  <div *ngIf="f.riskWindowEndDate.invalid && (f.riskWindowEndDate.dirty || f.riskWindowEndDate.touched)" class="invalid-feedback">
                  </div>
                </div>

ts file

minDate: any;

  onDateSelection(evt: any) {
    this.minDate = { year: evt.year, month: evt.month, day: evt.day };
  }

Suresh Kumar Ariya · Accepted Answer · 2018-08-09 12:52:41Z

0

Disabling dates in the ng-bootstrap date picker is not supported by default. It's better add validation to allow user to select custom date ranges.

answered Aug 9, 2018 at 12:52

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

1 Comment

Suresh Kumar Ariya Over a year ago

Here is the stackblitz code. stackblitz.com/edit/angular-a8y9vs

Collectives™ on Stack Overflow

Disable Dependent Date picker Angular Power Bootstrap angular 6

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related