Angular Material 日期选择器限制范围选择

Question

我有一个 Angular 范围的 Material 日期选择器(开始日期和结束日期)。
目前，它是自由选择的。意思是，我可以选择任何开始日期和任何结束日期。我想稍微改变一下。我希望它限制最多 7 天的差异。我不想让用户选择天数差超过 7 的 2 个日期。
所以里面的日历:it looks something like this
如您所见，10 月 5 日是开始日期，它允许我们选择 10 月 17 日作为结束日期。但我希望用户只能在 10 月 5 日至 10 月 12 日(最多 7 天差异)范围内选择结束日期。
有办法吗？
这是我的 HTML:

<mat-form-field class="datepicker" appearance="fill">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [formGroup]="rangeForm" [rangePicker]="picker" [max]="maxDate">
        <input matStartDate formControlName="start" placeholder="Start date" readonly>
        <input matEndDate formControlName="end" placeholder="End date" readonly>
    </mat-date-range-input>

typescript :

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import * as moment from 'moment';

@Component({
    selector: 'app-chart',
    templateUrl: './chart.component.html',
    styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements OnInit {
    private _startDate: moment.Moment = moment().subtract(6, 'days');
    private _endData: moment.Moment = moment();
    
    public maxDate: Date = this._endData.toDate();
    public rangeForm: FormGroup = new FormGroup({
        start: new FormControl(this._startDate.toDate()),
        end: new FormControl(this._endData.toDate()),
    });
    
    constructor() { }
    
    ngOnInit(): void {
    }
    
    /**
    * Getter for start date
    * @returns string
    */
    public getStartDate(): string {
        return this._startDate.format('DD/MM/YYYY');
    }
    
    /**
    * Getter for end date
    * @returns string
    */
    public getEndDate(): string {
        return this._endData.format('DD/MM/YYYY');
    }
    
}

Answer 1

实现 MatDateRangeSelectionStrategy，
我们创建了一个像

@Injectable()
export class MaxRangeSelectionStrategy<D> implements MatDateRangeSelectionStrategy<D> {
    start: any;

    constructor(
        @Inject('rangeMax') private delta: number,
        private _dateAdapter: DateAdapter<D>
    ) {}

    selectionFinished(date: D, currentRange: DateRange<D>) {
        let { start, end } = currentRange;
        if (start == null || (start && end)) {
            start = date;
            end = null;
        } else if (end == null) {
            const maxDate = this._dateAdapter.addCalendarDays(start, this.delta);
            end = date ? date > maxDate ? maxDate : date : null;
        }

        return new DateRange<D>(start, end);
    }

    createPreview(activeDate: D | null, currentRange: DateRange<D>): DateRange<D> {
        if (currentRange.start && !currentRange.end) {
            const maxDate = this._dateAdapter.addCalendarDays(currentRange.start, this.delta);
            const rangeEnd = activeDate ? activeDate > maxDate ? maxDate : activeDate : null;
            return new DateRange(currentRange.start, rangeEnd);
        }

        return new DateRange<D>(null, null);
    }
}

您可以直接在您的组件中使用

@Component({
  selector: "date-range-picker-selection-strategy-example",
  templateUrl: "date-range-picker-selection-strategy-example.html",
  providers: [
    {provide: 'rangeMax', useValue: 5},
    {
      provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
      useClass: MaxRangeSelectionStrategy
    }
  ]
})
export class DateRangePickerSelectionStrategyExample {}

但最好创建一个指令(不要忘记在你的模块中声明)
为此，首先替换 MaxRangeSelectionStrategy 的构造函数以移除 @Inject('rangeMax')并声明变量delta:

  public delta: number; //<--get out of constructor and make public
  constructor(private _dateAdapter: DateAdapter<D>) {}

现在创建指令:

@Directive({
  selector: "[maxRange]",
  providers: [
    {
      provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
      useClass: MaxRangeSelectionStrategy
    }
  ]
})
export class MaxRangeDirective {
  constructor(
    @Inject(MAT_DATE_RANGE_SELECTION_STRATEGY)
    private maxRangeStrategy: MaxRangeSelectionStrategy<any>
  ) {}
  @Input() set maxRange(value: number) {
    this.maxRangeStrategy.delta = +value || 7;
  }
}

并在 .html 中使用

<mat-date-range-picker maxRange=5 #picker></mat-date-range-picker>

最后，我们可以在styles.scss 中添加一个.css 之类的

.mat-calendar-body-preview-end> .mat-calendar-body-cell-content {
  background-color: rgba(0, 0, 0, 0.04)!important;
}

将最后一个元素标记为选中
见 the stackbliz