Angular material datepicker限制范围选择

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>

打字稿：

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 like

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

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

见the stackbliz

更新如果我们有 mat-calendar。方法不同。只有我们需要使用 dateClass 属性.

<mat-calendar #cal name="fecha" 
              [selected]="fecha" 
              (selectedChange)="fecha=$event;redraw(cal)"
              [dateClass]="dateClass">
</mat-calendar>

在哪里，例如

dateClass=(date: any) => {
  const days =
    (date.getTime() - this.fecha.getTime()) / (24 * 60 * 60 * 1000);
  return days >= 0 && days < 5 ? 'red' : null;
};

redraw(cal:MatCalendar<any>)
{
    cal.updateTodaysDate() 
}

我们在 styles.css

.mat-calendar-body-cell.red {
    background: red;
}

Angular material datepicker限制范围选择

Angular material datepicker limit the range selection

datepicker

angular-material

angular