Angular中IgniteUI日历无样式加载且日期选中异常求助

问题描述 #

• 样式渲染异常：IgxCalendar组件样式无法正常显示，与预期效果差距明显
  当前显示效果：
  预期显示效果：
• 日期选中偏移：点击某一日期时，实际选中的是该日期的前一天

已尝试在项目中引入igniteui-angular.css，但问题仍未解决。

组件代码 #

组件类代码 #

import { Component, ViewChild, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import {ApiService} from "../api.service";
import { IgxCalendarComponent, DateRangeType } from 'igniteui-angular';

@Component({
  selector: 'app-calendarform',
  templateUrl: './calendarform.component.html',
  styleUrls: ['./calendarform.component.css']
})
export class CalendarformComponent implements OnInit {
  @ViewChild('calendar', { static: true }) public calendar: IgxCalendarComponent;
  public today = new Date(Date.now());

  ngOnInit() {
    this.calendar.disabledDates = [{
      type: DateRangeType.Between,
      dateRange: [
        new Date(1, 1, 1),
        new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDay())
      ]
    }];
  }

  constructor(private router: Router, private service: ApiService) {

  }

  public onSelection(dates: Date | Date[]) {
    console.log(JSON.stringify(dates));
  }

}

HTML模板代码 #

<div class="calendar-section">
  <article class="calendar-wrapper">
    <igx-calendar #calendar selection="single" (selected)="onSelection($event)" [showWeekNumbers]="true"></igx-calendar>
  </article>
</div>

CSS样式代码 #

.calendar-wrapper {
  max-width: 400px;
  min-width: 200px;
  margin: 8px;
}

.igx-calendar {
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), 0 1px 1px 0 rgba(0,0,0,.12), 0 2px 1px -1px rgba(0,0,0,.08);
}

解决方案 #

修复样式渲染异常 #

1. 正确引入样式文件：在angular.json的styles数组中添加IgniteUI样式路径，确保路径指向正确

   "styles": [
     "node_modules/igniteui-angular/styles/igniteui-angular.css",
     "src/styles.css"
   ]
   

2. 排查样式冲突：暂时移除自定义的.igx-calendar样式，测试是否是自定义样式覆盖了组件默认样式
3. 版本兼容检查：确认当前使用的IgniteUI版本与Angular版本匹配，参考官方文档的版本兼容表

修复日期选中偏移问题 #

1. 时区适配：JavaScript Date对象受本地时区影响，组件内部可能使用UTC时间处理，可绑定组件的timezone属性强制统一时区

   // 组件类中添加
   public timezone = 'UTC';
   

   <!-- 模板中绑定属性 -->
   <igx-calendar #calendar selection="single" (selected)="onSelection($event)" [showWeekNumbers]="true" [timezone]="timezone"></igx-calendar>
   

2. 修正禁用日期逻辑：当前代码中this.today.getDay()返回的是一周中的星期数（0=周日，6=周六），而非当月日期，应替换为this.today.getDate()

   this.calendar.disabledDates = [{
     type: DateRangeType.Between,
     dateRange: [
       new Date(1, 1, 1),
       new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate())
     ]
   }];
   

内容的提问来源于stack exchange，提问作者Giovanni Grana