在 Angular 中显示当前工作日日期答案

【问题标题】：Displaying Current Weekdays dates in Angular在 Angular 中显示当前工作日日期
【发布时间】：2021-03-02 00:06:49
【问题描述】：

如何在 Angular 中显示当前的工作日日期？这是 Mon-Fri 的时间表，我想动态显示运行周的具体日期。

例如本周从 2021 年 3 月 1 日开始。所以希望在表头中显示如下 -

Mon             Tues          Wed            Thur            Fri
01/03/2021      02/03/2021    03/03/2021     04/03/2021      05/03/2021

当周更改为下周时，日期应动态更改为该周。

【问题讨论】：

标签： angular typescript date calendar

【解决方案1】：

好的，第二次尝试，现在我知道你的问题了:)

首先我想指出，有许多日历和 Datepicker 组件可用（如 Bootstrap one），但如果您只是想将日期显示为表格标题，我只需要一个日期变量：

    startOfTheWeek: Date = new Date("2021-03-01");

这是您要显示的一周的开始日期。当然这应该是动态的，也许看到JavaScript - get the first day of the week from current date 的那部分。假设我们有我们想要的星期一，我写了一个 lillte 辅助函数：

    public getWeekDays(startingDate: Date): Date[] {
      const dateList: Date[] = [];
      for (let i = 0; i <= 4; i++) {
        const newDate = new Date(this.startOfTheWeek.getTime());
        newDate.setDate(newDate.getDate() + i);
        dateList.push(newDate);
      }
      return dateList;
    }

我只是创建了一个包含 5 个日期的数组，其中每个日期比前一个日期多一天。

在模板中我会这样做：

    <table>
      <thead>
        <tr>
          <th *ngFor="let day of getWeekDays(startOfTheWeek)">{{day | date:"EEE'\n'd/M/y"}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>running</td>
          <td>running</td>
          <td>running</td>
          <td>running</td>
          <td>running</td>
        </tr>
      </tbody>
    </table>

使用这个 CSS：

    table, tr, th, td {
      border: 1px solid black;
    }

    th {
      white-space: pre-wrap;
    }

pre-wrap 是保留日期和工作日之间的换行符。

希望有帮助:)

【讨论】：

【解决方案2】：

你可以使用DatePipe。

说，在 .ts 文件中，我有一个字段日期，如下所示：

    date: Date = new Date(Date.now());

然后我可以像这样使用管道在 HTML 中获取工作日：

    {{ date | date:'EEEE' }}

【讨论】：

我已对问题进行了编辑以使其更加清晰。我已经使用了你的建议，但这并不是我想要的。谢谢

【解决方案3】：

我可以使用 moment.js 解决它

【讨论】：