使用Angular材料的日历与日期范围和范围预设-DEV365 开发者社区

Angular Material的日历组件是在角度应用中处理日期范围的有价值的工具。但是，现有文档可能受到限制，在线示例通常缺乏完整性或依赖非常规方法，这就是为什么我们决定撰写此博客文章。

虽然这篇文章不会逐步教程，但我们将解释所有相关部分。此外，您可以在StackBlitz上找到完整的实现，包括自定义范围预设按钮。

入门

我们假设您已经熟悉了角度材料和日历组件，但是在设置以处理日期范围和自定义日期范围预设的同时遇到了问题。如果不是，就不用担心！您可以首先查看有关Angular材料的website的官方文件。

设置提供商

要开始，我们需要为角材料日历组件设置必要的提供商。这些提供商启用了预览功能。这是如何设置提供商的示例：

import {
  DefaultMatCalendarRangeStrategy,
  MatRangeDateSelectionModel,
} from '@angular/material/datepicker';

@Component({
  ...,
  providers: [DefaultMatCalendarRangeStrategy, MatRangeDateSelectionModel],
})

处理日期范围选择

接下来，让我们以何时更改日期范围选择时实现事件处理程序。当用户单击日历中的日期时，将触发此处理程序。这是一个示例实现：

selectedDateRange: DateRange<Date> | undefined;

constructor(
  private readonly selectionModel: MatRangeDateSelectionModel<Date>,
  private readonly selectionStrategy: DefaultMatCalendarRangeStrategy<Date>,
) { }

// Event handler for when the date range selection changes.
rangeChanged(selectedDate: Date) {
  const selection = this.selectionModel.selection,
    newSelection = this.selectionStrategy.selectionFinished(
      selectedDate,
      selection
    );

  this.selectionModel.updateSelection(newSelection, this);
  this.selectedDateRange = new DateRange<Date>(
    newSelection.start,
    newSelection.end
  );
}

通过更新选择模型并将新的日期范围分配给SelectedDaterange，我们可以确保在UI中准确反射选定范围。

确保还要更新模板：

html

<mat-calendar
  [(selected)]="selectedDateRange"
  (selectedChange)="rangeChanged($event)"
></mat-calendar>

就是这样！通过遵循上面概述的步骤，您现在应该拥有一个功能齐全的日历组件，能够处理日期范围。

创建自定义日期范围预设

为了增强用户体验，我们可以实现自定义日期范围预设。这些预设允许用户快速选择常用的日期范围，而无需手动选择单个日期。这是预设的示例配置：

presets = [
  {
    label: 'Today',
    range: {
      start: new Date(),
      end: new Date(),
    },
  },
  {
    label: 'Last 7 days',
    range: {
      start: (() => {
        const date = new Date();
        date.setDate(date.getDate() - 7);
        return date;
      })(),
      end: new Date(),
    },
  },
  {
    label: 'Last 30 days',
    range: {
      start: (() => {
        const date = new Date();
        date.setDate(date.getDate() - 30);
        return date;
      })(),
      end: new Date(),
    },
  },
  ...
]

确保在模板中渲染可用的预设，允许用户单击一次：

<button
  *ngFor="let preset of presets"
  (click)="selectPreset(preset.range)"
>
  {{ preset.label }}
</button>

要处理预设的选择，包括一个预设处理程序，如以下示例。该处理程序设置了选定的日期范围，并确保日历导航到开始日期的月份：

selectPreset(presetDateRange: { start: Date; end: Date }) {
  this.selectedDateRange = new DateRange<Date>(
    presetDateRange.start,
    presetDateRange.end
  );

  // Jump into month of presetDateRange.start
  if (presetDateRange.start && this.calendar)
    this.calendar._goToDateInView(presetDateRange.start, 'month');
}

自己尝试

，你有！在本文中概述的步骤中，您有能力使用Angular Material的日历组件，并具有日期范围和自定义预设。请记住，如果您想查看完整的实现，包括自定义范围预设按钮，请查看提供的StackBlitz示例。