在Angular 10中,如何为mat-date-range-input指定特定日期的颜色?

huangapple go评论86阅读模式
英文:

Color specific date in mat-date-range-input angular 10

问题

我目前正在进行一个项目,其中涉及使用Angular Material的MatDatePicker(范围选择)组件来显示一个带有特定日期自定义样式的日历。在尝试根据特定条件将自定义CSS类应用于某些日历单元时,我遇到了一个问题。

这是我的代码片段:

 <mat-form-field appearance="outline" class="col-3 date-picker" (click)="picker2.open()">
          <mat-label>start date</mat-label>
          <mat-date-range-input class="special-element" [rangePicker]="picker2" [dateFilter]="dateFilter">
            <input matEndDate
              [readonly]="true" (dateChange)="changeDate('endDate')">
            <input matStartDate (dateChange)="changeDate('startDate')" [readonly]="true">

          </mat-date-range-input>

          <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
          <mat-date-range-picker #picker2></mat-date-range-picker>
        </mat-form-field>

有什么建议吗?

英文:

I'm currently working on a project that involves using Angular Material's MatDatePicker (range Selection) component to display a calendar with custom styling for specific dates. I've encountered an issue while trying to apply custom CSS classes to certain calendar cells based on specific conditions.

Here's a snippet of my code:

 &lt;mat-form-field appearance=&quot;outline&quot; class=&quot;col-3 date-picker&quot; (click)=&quot;picker2.open()&quot;&gt;
          &lt;mat-label&gt;start date&lt;/mat-label&gt;
          &lt;mat-date-range-input class=&quot;special-element&quot; [rangePicker]=&quot;picker2&quot; [dateFilter]=&quot;dateFilter&quot;&gt;
            &lt;input matEndDate
              [readonly]=&quot;true&quot; (dateChange)=&quot;changeDate(&#39;endDate&#39;)&quot;&gt;
            &lt;input matStartDate (dateChange)=&quot;changeDate(&#39;startDate&#39;)&quot;[readonly]=&quot;true&quot;&gt;

          &lt;/mat-date-range-input&gt;

          &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker2&quot;&gt;&lt;/mat-datepicker-toggle&gt;
          &lt;mat-date-range-picker #picker2&gt;&lt;/mat-date-range-picker&gt;
        &lt;/mat-form-field&gt;

Any suggestions please ?

答案1

得分: 1

你可以在全局的styles.css中添加.mat-calendar-body-cell-container的CSS声明。

.mat-calendar-body-cell-content {
  color: white;
}

.mat-calendar-body-cell-container {
  background-color: green !important;
}

自定义颜色的日期选择器示例

编辑:

你可以按照以下方式进行操作:

export class YourComponent implements AfterViewInit {
  range = new FormGroup({
    start: new FormControl(),
    end: new FormControl()
  });

  @ViewChild('picker2') picker!: MatDatepicker<Date>;

  ngAfterViewInit(): void {
    this.picker.dateClass = (date: Date) => {
      return {
        'cell-class': (date.getDate() % 2 === 0)
      }
    }
  }
}

然后在全局的styles.css中定义cell-class

.cell-class {
  background-color: red !important; /* 必须加上!important */
}

对于这个示例,它会将颜色应用于所有偶数天。

参考:MatCalendarCellClassFunction

英文:

You can add .mat-calendar-body-cell-container css declaration in your global
styles.css.

.mat-calendar-body-cell-content {
  color: white;
}


.mat-calendar-body-cell-container {
  background-color: green !important;
}

example of a datepicker with custom color

Edit:

What you can do is the following:

export class YourComponent implements AfterViewInit {
  range =  new FormGroup({
    start: new FormControl(), end: new FormControl()
  });

  @ViewChild(&#39;picker2&#39;) picker!: MatDatepicker&lt;Date&gt;;

  ngAfterViewInit(): void {
    this.picker.dateClass = (date: Date) =&gt; {
      return {
        [&#39;cell-class&#39;]: (date.getDate() % 2 === 0)
      }
    }
  }
}

Then on your global styles.css you can define cell-class.

.cell-class {
    background-color: red !important /* you must include important */
}

For this example, it applies color to all even days.

Reference: MatCalendarCellClassFunction

huangapple
  • 本文由 发表于 2023年8月9日 17:02:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/76866149.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定