如何从时间戳获取未来7天名称并生成周预约日期表格（Angular）

嘿，这就帮你搞定从时间戳生成未来7天名称，同时搭建一周预约日期表格的需求！我把具体实现拆解成两个部分，你可以直接参考下面的代码~

1. 从时间戳获取未来7天的星期名称 #

你可以借助JavaScript的Date对象和Intl.DateTimeFormatAPI来优雅实现这个功能——后者还能轻松支持多语言的星期名称显示。我帮你把现有组件代码补全并添加生成逻辑：

import { Component, OnInit } from '@angular/core';
import { CalendarModel } from '../calendar-model';

@Component({
  selector: 'app-semaine',
  templateUrl: './semaine.component.html',
  styleUrls: ['./semaine.component.css']
})
export class SemaineComponent implements OnInit {
  startSemaine: number; // 一周起始时间戳
  weekDays: Array<{ date: Date, dayName: string, isBookable: boolean }> = []; // 存储一周日期及状态

  constructor(private _calendar: CalendarModel) {
    // 假设CalendarModel的getDateMinSemaine()返回一周起始的时间戳（比如周一0点）
    this.startSemaine = this._calendar.getDateMinSemaine();
  }

  ngOnInit(): void {
    this.generateWeekDays();
  }

  // 生成未来7天的日期和星期名称
  generateWeekDays(): void {
    const startDate = new Date(this.startSemaine);
    for (let i = 0; i < 7; i++) {
      const currentDate = new Date(startDate);
      currentDate.setDate(startDate.getDate() + i);
      // 获取完整星期名称（这里用法语示例，可改成'en-US'等其他语言）
      const dayName = new Intl.DateTimeFormat('fr-FR', { weekday: 'long' }).format(currentDate);
      // 模拟可预约状态，实际可替换为业务逻辑判断
      const isBookable = i % 2 === 0; 
      
      this.weekDays.push({
        date: currentDate,
        dayName: dayName,
        isBookable: isBookable
      });
    }
  }

  // 预约操作示例方法
  bookAppointment(day: { date: Date, dayName: string, isBookable: boolean }): void {
    console.log(`预约日期：${day.date.toLocaleDateString()}`);
    // 这里可以添加调用后端接口的逻辑
  }
}

2. 生成一周预约日期表格 #

接下来在模板文件里用Angular的*ngFor循环渲染表格，同时根据可预约状态添加样式区分：

<div class="appointment-calendar">
  <h3>本周可预约日期</h3>
  <table>
    <thead>
      <tr>
        <th>星期</th>
        <th>日期</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let day of weekDays" 
          [class.bookable]="day.isBookable" 
          [class.unavailable]="!day.isBookable">
        <td>{{ day.dayName }}</td>
        <td>{{ day.date | date: 'dd/MM/yyyy' }}</td>
        <td>{{ day.isBookable ? '可预约' : '已约满' }}</td>
        <td>
          <button *ngIf="day.isBookable" (click)="bookAppointment(day)">预约</button>
          <span *ngIf="!day.isBookable">-</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

再添加一点基础样式让表格更美观：

.appointment-calendar {
  max-width: 800px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: center;
  border: 1px solid #ddd;
}

th {
  background-color: #f5f5f5;
}

.bookable {
  background-color: #e8f5e9;
}

.unavailable {
  background-color: #ffebee;
}

button {
  padding: 8px 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #43a047;
}

小提示 #

• 若要调整星期起始日（比如从周日开始），只需修改startSemaine的时间戳或循环偏移量即可
• Intl.DateTimeFormat的weekday参数可设为'short'（短名称）或'narrow'（极简名称），按需调整
• isBookable的判断逻辑可替换为实际业务规则，比如从后端接口获取可预约状态

内容的提问来源于stack exchange，提问作者geek pédagogique lcms