角度材料日期选择器限制范围选择 [英] Angular material datepicker limit the range selection

问题描述

我有一个角度范围的材料日期选择器(开始日期和结束日期).

I have an angular material date picker of ranges (start date and end date).

目前，它是自由选择的.意思是，我可以选择任何开始日期和任何结束日期.我想稍微改变一下.我希望它限制最多 7 天的差异.我不想让用户选择天数相差超过 7 的 2 个日期.

Currently, it is free-selection. Meaning, I can choose any start date and any end date. I'd like to change it a bit. I want it to limit up to 7 days difference. I do not want to allow the user to choose 2 dates with the difference in days is more than 7.

所以在日历内部:看起来像这样

如您所见，10 月 5 日是开始日期，它允许我们选择 10 月 17 日作为结束日期.但我希望用户只能在 10 月 5 日至 10 月 12 日的范围内选择结束日期(最大相差 7 天).

As you can see, 5th October is the start date, and it allows us to choose 17th October as the end date. But I want the user to be limited to choose the end date only in the range of 5th October to 12th October (7 days difference maximum).

有办法吗?

这是我的 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');
    }
    
}

推荐答案

实施 MatDateRangeSelectionStrategy,

Implementing a MatDateRangeSelectionStrategy,

我们创建了一个像这样的提供者

We create a provider like

@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);
    }
}

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

You can use in directily in your component like

@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 {}

但最好创建一个指令(不要忘记在你的模块中声明)

But it's better create a Directive (don't forget declare in your module)

为此，首先替换 MaxRangeSelectionStrategy 的构造函数以移除 @Inject('rangeMax') 并声明变量 delta:

For this, first replace the constructor of the MaxRangeSelectionStrategy to remove the @Inject('rangeMax') and declare the variable 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 中使用

And use in the .html

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

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

At last, We can add in styles.scss a .css like

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

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

To mark as selected the last element

参见 stackbliz

这篇关于角度材料日期选择器限制范围选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！