Установите максимальную дату динамически в ngx- bootstrap Datepicker - PullRequest
Новая
       8

Установите максимальную дату динамически в ngx- bootstrap Datepicker

0 голосов
/ 01 апреля 2020

Я пытаюсь внедрить средство выбора диапазона дат bs в angular. При загрузке компонентов я устанавливаю текущую дату. Но как я могу установить максимальную дату после выбора минимальной даты.

Поскольку я хочу ограничить пользователя, он / она не может выбирать максимальную дату не более чем через 3 дня после выбора минимальной даты. Например, если пользователь выберет 5 апреля 2020 года в качестве даты начала, то максимальная дата пользователя будет ограничена 7 апреля 2020 года. Дни будут отключены после 7 апреля 2020 года.

Компонент 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());
}

1 Ответ

0 голосов
/ 03 апреля 2020

Если вы немного измените пример на ngx- bootstrap странице с помощью этого: Javascript: добавление дней к любой дате , вы можете написать примерно так:

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>

Это должно помочь вам.

...