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"/>```

surendra kumar · Answer 1 · 2020-06-24T10:59:36.203

4

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

edited Jun 24 '20 at 10:59

answered Jun 24 '20 at 10:52

surendra kumar

1,686
11
15

this works good!! However, when I clicked "Clear" it has still the restricted dates. Any idea to reset the dates without refresh the page? – Rodrigo Bernal Jun 24 '20 at 17:42
Use the below code to clear the dates. //Declaration @ViewChild(DaterangepickerDirective, { static: true }) daterangepicker: DaterangepickerDirective; //Method clear(): void { this.daterangepicker.clear(); } //Enable the clear button as below showClearButton=true – surendra kumar Jun 25 '20 at 04:34
If my answer works for you, please accept the answer. – surendra kumar Jul 14 '20 at 05:01

score 1 · Answer 2 · answered Jun 16 '20 at 16:08

1

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');
}

answered Jun 16 '20 at 16:08

Carlos1232

815
6
15

Thanks! However, what I need is that the maxDate value will update based on the first value selected. For example, you can select any day in the past (example: 2020-05-15), and with this value, the maxDate allowed would be 2020-05-30). If you pick another date, for example 2020-05-28, the maxDate allowed would be 2020-06-12 and so on. – Rodrigo Bernal Jun 16 '20 at 17:55
Then what you need to do is just change the maxDate and not the minDate, depending on the actual date selected wich is the $event in this case. – Carlos1232 Jun 16 '20 at 18:06
according to the docs it you should past the $event -> https://fetrarij.github.io/ngx-daterangepicker-material/simple – Carlos1232 Jul 10 '20 at 18:29

score 1 · Accepted Answer · answered Jul 23 '20 at 09:45

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";

Set maxDate based on minDate in ngxdaterangepicker angular 8

3 Answers3