Set maxDate based on minDate in ngxdaterangepicker angular 8

Question

I am trying to set maxDate value based on minDate value selected. The idea is that you can select any day in the past as minDate, but the maxDate must be equal to minDate plus 15 days.

I have this in my html

```<input type="text" ngxDaterangepickerMd formControlName="pick_dates"
                class="form-control" placeholder="{{'list.select' | translate}}"
                [minDate]='minDate'
                [maxDate]='maxDate' [timePicker]="true" [locale] = "locale"/>```

Is there any way to get the minDate value selected before sending the pick_dates form?

What I wish would be something like: have this in my html

```<input type="text" ngxDaterangepickerMd formControlName="pick_dates"
 class="form-control" placeholder="{{'list.select' | translate}}"
            [minDate]='minDate'
            [maxDate]='minDate'+15 days
            [timePicker]="true" [locale] = "locale"/>```

Answer 1

To set maxDate based on minDate 'ngxDaterangepickerMd ' provides one more attribute 'dateLimit'. So if you set 'dateLimit' say 5 then whatever you choose on datepicker it will automatically disable all dates after 5 days from chosen date. Plus if you want that limit not to allow selection beyond current date then set 'maxDate' attribute to currentDate in component.ts file as 'maxDate = moment()'.

<input type="text" ngxDaterangepickerMd formControlName="pick_dates"
       class="form-control" placeholder="{{'list.select' | translate}}"                
       [dateLimit]="dateLimit" [maxDate]='maxDate' [timePicker]="true"
       [locale] = "locale"/>

component.ts:

maxDate = moment();
dateLimit = "5";

Answer 2

If I'm getting it right, what you can do is add a (change) event there and when you change the date you can recalculate the min date and the maxdate Example =>

<input type="text" ngxDaterangepickerMd formControlName="pick_dates"
  class="form-control" placeholder="{{'list.select' | translate}}"
  [minDate]='minDate' (change)="updateTime($event)"
  [maxDate]='maxDate' [timePicker]="true" [locale] = "locale"/>

Assuming that you are using moment(). On the .ts file =>

updateTime(e){
 this.minDate = moment(e);
 this.maxDate = moment(e).add(15,'days');
}

Answer 3

startDateClicked($event) {
    this.maxDate = moment($event.startDate._d).add(1, 'month');
  }
  endDateClicked($event) {
    this.minDate = moment($event.endDate._d).subtract(1, 'month');
  }

 <input type="text" ngxDaterangepickerMd [(ngModel)]="selected" [showCustomRangeLabel]="true"
                  [ranges]="ranges" [showCancel]="true" [keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
                  [showRangeLabelOnInput]="showRangeLabelOnInput" opens="right" [timePicker]="true"
                  [locale]="{format: 'MM/DD/YYYY'}" (datesUpdated)="applyFilter()" [minDate]="minDate"
                  [maxDate]='maxDate' (startDateChanged)="startDateClicked($event)"
                  (endDateChanged)="endDateClicked($event)">