单击单个日期时在角度日期选择器元素中突出显示整周答案

【问题标题】：Highlight entire week in angular date picker element when clicking a single date单击单个日期时在角度日期选择器元素中突出显示整周
【发布时间】：2022-11-12 01:50:29
【问题描述】：

当我单击一个日期时，我希望组件突出显示一周中的每一天。

这是html文件：

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker">
    <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
  </mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

这是 TS 文件

import {Component} from '@angular/core';

/** @title Datepicker with custom icon */
@Component({
  selector: 'datepicker-custom-icon-example',
  templateUrl: 'datepicker-custom-icon-example.html',
})
export class DatepickerCustomIconExample {}

例如，如果我单击 16，我希望它也用蓝色圆圈突出显示 13-19。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您可以使用自定义 MAT_DATE_RANGE_SELECTION_STRATEGY 并创建自定义 selectionFinished 方法

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date">
    <input matEndDate placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

import {Component, Injectable} from '@angular/core';
import {DateAdapter} from '@angular/material/core';
import {
  MatDateRangeSelectionStrategy,
  DateRange,
  MAT_DATE_RANGE_SELECTION_STRATEGY,
} from '@angular/material/datepicker';

@Injectable()
export class WeekangeSelectionStrategy<D> implements MatDateRangeSelectionStrategy<D> {
  constructor(private _dateAdapter: DateAdapter<D>) {}

  selectionFinished(date: D | null): DateRange<D> {
    return this._createWeekRange(date);
  }

  createPreview(activeDate: D | null): DateRange<D> {
    return this._createWeekRange(activeDate);
  }

  private _createWeekRange(date: any): DateRange<D> {
    const day = date.getDay()
    const daysLeft = 6 - day
    if (date) {
      const start = this._dateAdapter.addCalendarDays(date, -day);
      const end = this._dateAdapter.addCalendarDays(date, daysLeft);
      return new DateRange<D>(start, end);
    }

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

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

【讨论】：