Question

我有一个角度范围的日期选择器（开始日期和结束日期）。

当前，它是自由选择的。意思是，我可以选择任何开始日期和结束日期。我想更改一下。我希望它最多可以限制7天的差异。我不想让用户选择2个日期的天数差大于7。

如您所见，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之类的

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

将最后一个元素标记为已选择

请参见the stackbliz

角形材质的日期选择器限制了范围的选择

1 个答案: