根据 ngxdaterangepicker 中的 minDate 设置 maxDate angular 8

Question

我正在尝试根据 minDate 值设置 maxDate 值 selected。这个想法是，您可以 select 过去的任何一天作为 minDate，但 maxDate 必须等于 minDate 加上 15 天。

我的 html

里有这个

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

有什么方法可以在发送 pick_dates 表单之前获取 minDate 值 select？

我希望是这样的：我的 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

如果我做对了，你可以在那里添加一个（更改）事件，当你更改日期时，你可以重新计算最小日期和最大日期示例=>

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

假设您正在使用 moment()。在 .ts 文件上 =>

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

Answer 2

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

Answer 3

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

根据 ngxdaterangepicker 中的 minDate 设置 maxDate angular 8

Set maxDate based on minDate in ngxdaterangepicker angular 8

angular

bootstrap-daterangepicker

ngx-daterangepicker-material