javascript - ngx-daterangepicker-material 禁用从开始日期起的 n 天数

Question

我在 Angular 9 项目中使用ngx-daterangepicker-material作为日期选择器。我有要求，当用户选择从开始日期到未来和过去 60 天以上的开始日期时，不应选择过去

例如，如果用户选择 2021 年 1 月 1 日开始日期而不是 2021 年 3 月 1 日（未来 60 天）和 2020 年 11 月 1 日（过去 60 天）之间的结束日期，则用户不应选择。其余所有结束日期应该是可选的

尝试使用 minDate、maxDate 但无法做到。

提前致谢！

Answer 1

input
type="text"
ngxDaterangepickerMd
[(ngModel)]="selected"
(rangeClicked)="rangeClicked($event)"
(datesUpdated)="datesUpdated($event)"
[showCustomRangeLabel]="true"
[alwaysShowCalendars]="true"
[ranges]="ranges"
[linkedCalendars]="true"
[showClearButton]="false"
[isInvalidDate] = "isInvalidDate"
[keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
[showRangeLabelOnInput]="showRangeLabelOnInput"
/>

constructor() {
 this.maxDate = moment().add(2, 'weeks');
 this.minDate = moment().subtract(3, 'days');

 this.alwaysShowCalendars = true;
 this.keepCalendarOpeningWithRange = true;
 this.showRangeLabelOnInput = true;
 this.selected = {
   startDate: moment().subtract(1, 'days'),
   endDate: moment().subtract(1, 'days'),
 };
}
rangeClicked(range) {
  console.log('[rangeClicked] range is : ', range);
}
datesUpdated(range) {
 console.log('[datesUpdated] range is : ', range);
}

export class DateRangeComponent implements OnInit {
selected: any;
alwaysShowCalendars: boolean;
showRangeLabelOnInput: boolean;
keepCalendarOpeningWithRange: boolean;
maxDate: moment.Moment;
minDate: moment.Moment;

ranges: any = {
Today: [moment(), moment()],
Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [
  moment()
    .subtract(1, 'month')
    .startOf('month'),
  moment()
    .subtract(1, 'month')
    .endOf('month'),
 ],
};

isInvalidDate = (m: moment.Moment) => {
  return this.invalidDates.some(d => d.isSame(m, 'day'));
};

constructor() {
 this.maxDate = moment().add(2, 'weeks');
 this.minDate = moment().subtract(3, 'days');

 this.alwaysShowCalendars = true;
 this.keepCalendarOpeningWithRange = true;
 this.showRangeLabelOnInput = true;
 this.selected = {
   startDate: moment().subtract(1, 'days'),
   endDate: moment().subtract(1, 'days'),
 };
}
rangeClicked(range) {
  console.log('[rangeClicked] range is : ', range);
}
datesUpdated(range) {
 console.log('[datesUpdated] range is : ', range);
}
}