在Angular 中从TypeScript操作CSS

rjjhvcjd  于 2023-01-14  发布在  TypeScript
关注(0)|答案(1)|浏览(146)

我正在使用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>
63lcw9qa

63lcw9qa1#

一种可能的解决方案是向day实体添加其他属性,如下所示

...
 getDaysFromDate(month: number, year: number) {
    ...
    
    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(),
        selected: someFunctionThatReturnsBooleanBasedOnTheSelectionRange(a)
      };
    });
  }
...

someFunctionThatReturnsBooleanBasedOnTheSelectionRange应该确定日期是否在所选范围内,然后在HTML中添加以下内容

<li  [style.gridColumnStart]="first ? day?.indexWeek : 'auto'"
       [ngClass]="{'selected-day-backround': day.selected}"
        *ngFor="let day of monthSelect; let first = first">
      <span> {{day?.value}}</span>
    </li>

通过使用ngClass指令,可以仅向属于该范围的HTML元素添加自定义背景。

相关问题