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

Question

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

例如，如果用户 select 开始日期为 2021 年 1 月 1 日，结束日期介于 2021 年 3 月 1 日（未来 60 天）和 2020 年 11 月 1 日（60 days past) 不应该 select 对用户可用。其余所有结束日期应为 selectable

尝试使用 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);
}
}

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

ngx-daterangepicker-material disable n number of days from start date

javascript

datepicker

angular-material

angular

ngx-daterangepicker-material