Установить maxDate на основе minDate в ngxdaterangepicker angular 8 - PullRequest
Новая
       38

Установить maxDate на основе minDate в ngxdaterangepicker angular 8

2 голосов
/ 16 июня 2020

Я пытаюсь установить значение maxDate на основе выбранного значения minDate. Идея состоит в том, что вы можете выбрать любой день в прошлом как 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"/>```

Есть ли способ получить значение minDate, выбранное перед отправкой формы pick_dates?

То, что я буду sh, будет примерно таким: иметь это в моем 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"/>```

Ответы [ 3 ]

3 голосов
/ 24 июня 2020 
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)">
1 голос
/ 23 июля 2020

Чтобы установить maxDate на основе minDate, ngxDaterangepickerMd предоставляет еще один атрибут dateLimit. Итак, если вы установите dateLimit, скажем, 5, то все, что вы выберете в datepicker, автоматически отключит все даты через 5 дней с выбранной даты. Кроме того, если вы хотите, чтобы этот предел не разрешал выбор за пределами текущей даты, установите для атрибута maxDate значение currentDate в файле component.ts как 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";
1 голос
/ 16 июня 2020

Если я правильно понимаю, вы можете добавить туда событие (изменение), и когда вы измените дату, вы можете пересчитать минимальную дату и maxdate Пример => 

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