根据 ngxdaterangepicker angular 8 中的 minDate 设置 maxDate答案

【问题标题】：Set maxDate based on minDate in ngxdaterangepicker angular 8根据 ngxdaterangepicker angular 8 中的 minDate 设置 maxDate
【发布时间】：2020-10-06 05:54:40
【问题描述】：

我正在尝试根据所选的 minDate 值设置 maxDate 值。这个想法是您可以选择过去的任何一天作为 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 值？

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

【问题讨论】：

标签： angular bootstrap-daterangepicker ngx-daterangepicker-material

【解决方案1】：

根据 minDate 'ngxDaterangepickerMd' 设置 maxDate 提供了一个更多属性“日期限制”。所以如果你设置 'dateLimit' 说 5 那么无论您在 datepicker 上选择什么，它都会自动禁用所有从所选日期起 5 天后的日期。另外，如果您不希望该限制允许选择超出当前日期，然后将“maxDate”属性设置为 component.ts 文件中的 currentDate 为 '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";

【讨论】：

【解决方案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)">

【讨论】：

这很好用！！但是，当我单击“清除”时，它仍然有限制的日期。有什么想法可以在不刷新页面的情况下重置日期吗？
使用下面的代码清除日期。 //声明@ViewChild(DaterangepickerDirective, { static: true }) daterangepicker: DaterangepickerDirective; //方法 clear(): void { this.daterangepicker.clear(); } //开启清除按钮如下 showClearButton=true
如果我的回答对你有用，请采纳。

【解决方案3】：

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

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

【讨论】：

谢谢！但是，我需要的是 maxDate 值将根据选择的第一个值进行更新。例如，您可以选择过去的任何一天（例如：2020-05-15），使用此值，允许的 maxDate 将为 2020-05-30）。如果您选择其他日期，例如 2020-05-28，则允许的最大日期为 2020-06-12，依此类推。
那么您需要做的只是更改 maxDate 而不是 minDate，具体取决于所选的实际日期，在这种情况下是 $event。
根据文档，您应该通过 $event -> fetrarij.github.io/ngx-daterangepicker-material/simple