我正在使用Angular,有一个动态填充的日历。我还有一个日期范围,我想在这个范围内改变几天的背景。我正在使用moment处理日期,moment-range处理日期范围。
在TypeScript中,我设法检查了某个特定的日期是否在该范围内。
const a = new Date(2023,0,8);
const start = new Date(2023, 0, 9);
const end = new Date(2023, 4, 23);
const range = moment.range(start, end);
console.log(range.contains(a));
但是在html中我只有一个不断变化的“天”,我有一个css-class class="background"
,当我用html写它的时候它会改变我的背景,但是我不能访问特定的天,我怎么能只突出显示在这个范围内的天呢?
ts文件
export class CalendarComponent implements OnInit {
week: any = [
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa",
"Su"
];
monthSelect: any[] | undefined;
dateSelect: any;
title: string | undefined;
range: any;
constructor() {
}
ngOnInit(): void {
this.getDaysFromDate(1, 2023)
}
getDaysFromDate(month: number, year: number) {
const startDate = moment(`${year}/${month}/01`)
const endDate = startDate.clone().endOf('month')
this.dateSelect = startDate;
const diffDays = endDate.diff(startDate, 'days', true)
const numberDays = Math.round(diffDays);
this.monthSelect = Object.keys([...Array(numberDays)]).map((a: any) => {
a = parseInt(a) + 1;
const dayObject = moment(`${year}-${month}-${a}`);
return {
name: dayObject.format("dddd"),
value: a,
indexWeek: dayObject.isoWeekday()
};
});
}
changeMonth(flag: number) {
if (flag < 0) {
const prevDate = this.dateSelect.clone().subtract(1, "month");
this.getDaysFromDate(prevDate.format("MM"), prevDate.format("YYYY"));
} else {
const nextDate = this.dateSelect.clone().add(1, "month");
this.getDaysFromDate(nextDate.format("MM"), nextDate.format("YYYY"));
}
}
超文本标记语言文件
<div class="wrapper-calendar">
<div class="header-calendar">
<div>
<button (click)="changeMonth(-1)" class="btn-prev"><img src="back.png" alt="back"></button>
</div>
<h1>{{dateSelect | date:'MMMM yyyy'}}</h1>
<div>
<button (click)="changeMonth(1)" class="btn-next"><img src="forward.png" alt="forward"></button>
</div>
</div>
<ol>
<li *ngFor="let day of week" class="day-name">{{day | slice:0:3}}</li>
<li [style.gridColumnStart]="first ? day?.indexWeek : 'auto'"
*ngFor="let day of monthSelect; let first = first">
<span> {{day?.value}}</span>
</li>
</ol>
<br>
</div>
1条答案
按热度按时间63lcw9qa1#
一种可能的解决方案是向
day
实体添加其他属性,如下所示someFunctionThatReturnsBooleanBasedOnTheSelectionRange
应该确定日期是否在所选范围内,然后在HTML中添加以下内容通过使用ngClass指令,可以仅向属于该范围的HTML元素添加自定义背景。