2

我正在尝试根据选择的 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"/>```
4

3 回答 3

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)">
于 2020-06-24T10:52:02.850 回答
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');
}
于 2020-06-16T16:08:02.293 回答
1

根据 minDate 设置 maxDate 'ngxDaterangepickerMd' 提供了另一个属性 'dateLimit'。因此，如果您将 'dateLimit' 设置为 5，那么无论您在 datepicker 上选择什么，它都会在所选日期 5 天后自动禁用所有日期。另外，如果您希望该限制不允许选择超出当前日期，则将 component.ts 文件中的“maxDate”属性设置为“maxDate = moment()”。

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

组件.ts：

maxDate = moment();
dateLimit = "5";
于 2020-07-23T09:45:35.630 回答