在 mat-date-range-input 中为特定日期着色（Angular 10）

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

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

问题

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

以下是我的代码片段：

  1. <mat-form-field appearance="outline" class="col-3 date-picker" (click)="picker2.open()">
  2.     <mat-label>开始日期</mat-label>
  3.     <mat-date-range-input class="special-element" [rangePicker]="picker2" [dateFilter]="dateFilter">
  4.         <input matEndDate [readonly]="true" (dateChange)="changeDate('endDate')">
  5.         <input matStartDate (dateChange)="changeDate('startDate')" [readonly]="true">
  6.     </mat-date-range-input>
  8.     <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  9.     <mat-date-range-picker #picker2></mat-date-range-picker>
  10. </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:

  1.  &lt;mat-form-field appearance=&quot;outline&quot; class=&quot;col-3 date-picker&quot; (click)=&quot;picker2.open()&quot;&gt;
  2.           &lt;mat-label&gt;start date&lt;/mat-label&gt;
  3.           &lt;mat-date-range-input class=&quot;special-element&quot; [rangePicker]=&quot;picker2&quot; [dateFilter]=&quot;dateFilter&quot;&gt;
  4.             &lt;input matEndDate
  5.               [readonly]=&quot;true&quot; (dateChange)=&quot;changeDate(&#39;endDate&#39;)&quot;&gt;
  6.             &lt;input matStartDate (dateChange)=&quot;changeDate(&#39;startDate&#39;)&quot;[readonly]=&quot;true&quot;&gt;
  8.           &lt;/mat-date-range-input&gt;
  10.           &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker2&quot;&gt;&lt;/mat-datepicker-toggle&gt;
  11.           &lt;mat-date-range-picker #picker2&gt;&lt;/mat-date-range-picker&gt;
  12.         &lt;/mat-form-field&gt;

Any suggestions please ?

答案1

得分: 1

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

  1. .mat-calendar-body-cell-content {
  2.   color: white;
  3. }
  5. .mat-calendar-body-cell-container {
  6.   background-color: green !important;
  7. }

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

编辑：

你可以这样做：

  1. export class YourComponent implements AfterViewInit {
  2.   range = new FormGroup({
  3.     start: new FormControl(), end: new FormControl()
  4.   });
  6.   @ViewChild('picker2') picker!: MatDatepicker<Date>;
  8.   ngAfterViewInit(): void {
  9.     this.picker.dateClass = (date: Date) => {
  10.       return {
  11.         ['cell-class']: (date.getDate() % 2 === 0)
  12.       }
  13.     }
  14.   }
  15. }

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

  1. .cell-class {
  2.     background-color: red !important; /* 你必须使用important */
  3. }

对于这个示例，它会将颜色应用于所有偶数日期。

参考：MatCalendarCellClassFunction

英文:

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

  1. .mat-calendar-body-cell-content {
  2.   color: white;
  3. }
  6. .mat-calendar-body-cell-container {
  7.   background-color: green !important;
  8. }

example of a datepicker with custom color

Edit:

What you can do is the following:

  1. export class YourComponent implements AfterViewInit {
  2.   range =  new FormGroup({
  3.     start: new FormControl(), end: new FormControl()
  4.   });
  6.   @ViewChild(&#39;picker2&#39;) picker!: MatDatepicker&lt;Date&gt;;
  8.   ngAfterViewInit(): void {
  9.     this.picker.dateClass = (date: Date) =&gt; {
  10.       return {
  11.         [&#39;cell-class&#39;]: (date.getDate() % 2 === 0)
  12.       }
  13.     }
  14.   }
  15. }

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

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

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-2.html
  • angular
  • angular-material
  • datepicker
  • mat-datepicker
匿名

发表评论

匿名网友

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

确定