在 ngx-bootstrap Datepicker 中动态设置最大日期答案

【问题标题】：Set max date dynamically in ngx-bootstrap Datepicker在 ngx-bootstrap Datepicker 中动态设置最大日期
【发布时间】：2020-07-13 10:51:34
【问题描述】：

我正在尝试以角度实现 bs 日期范围选择器。在组件加载时，我将 mindate 设置为当前日期。但是选择最小日期后如何设置最大日期。

因为我想限制用户在选择最小日期后不能选择最大日期不超过 3 天。例如，如果用户选择 2020 年 4 月 5 日作为开始日期，则用户的最大日期将被限制为 2020 年 4 月 7 日。2020 年 4 月 7 日之后的天数将被禁用。

组件 HTML -

<input type="text" 
#dp="bsDaterangepicker"
formControlName="bookingPeriod"
[minDate]="bookingStart"
[maxDate]="bookingEnd"
bsDaterangepicker
[bsConfig]="{ adaptivePosition: true, rangeInputFormat: 'DD MMMM, YYYY', displayOneMonthRange: true }" />

组件 Ts -

public bookingStart: any = Date;
public bookingEnd: any = ""; 

constructor() {
  this.bookingStart = new Date();
  this.bookingStart.setDate(this.bookingStart.getDate());
}

【问题讨论】：

标签： angular ngx-bootstrap

【解决方案1】：

如果您在Javascript: Adding days to any date 的帮助下稍微修改ngx-bootstrap page 上的示例，您可以编写如下内容：

datepicker.ts

  bsValue = new Date();
  bsRangeValue: Date[];
  minDate: Date;
  maxDate: Date;

  constructor() {
    this.bsRangeValue = [this.bsValue, this.maxDate];
    this.minDate = new Date();
    this.maxDate = new Date();
    this.minDate.setDate(this.minDate.getDate() + 10);
    this.maxDate.setDate(this.minDate.getDate() + 3);
  }

datepicker.html

  <div class="row">
    <h1>Max Date</h1>
    <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
      <input class="form-control"
             placeholder="Datepicker"
             ngModel
             bsDatepicker
             [minDate]="minDate"
             [maxDate]="maxDate">
    </div>
    <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
      <input class="form-control"
             placeholder="Daterangepicker"
             ngModel
             bsDaterangepicker
             [minDate]="minDate"
             [maxDate]="maxDate">
    </div>
  </div>

这应该对你有帮助。

【讨论】：

工作中...谢谢