ngx-daterangepicker-材料禁用n天从开始日期

Question

我正在使用ngx-daterangepicker-material的日期选择器在角9项目。我有这样的要求，当用户选择开始日期超过60天时，从开始日期到将来和过去都是不可选择的。

​

​

例如，如果用户选择开始日期为2021年1月1日，而不是从2021年3月1日(未来60天)到2020年11月1日(过去60天)之间的结束日期，则不能为用户选择。rest所有结束日期都应该是可选择的

我试着用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);
}
}