英文:
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:
<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>
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('picker2') picker!: MatDatepicker<Date>;
ngAfterViewInit(): void {
this.picker.dateClass = (date: Date) => {
return {
['cell-class']: (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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论