在Angular中显示当前工作日的日期

Question

如何在Angular中显示当前的工作日日期?这是一个星期一到星期五的时间表，我想动态地显示运行周的具体日期。

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

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

当一周变为下一周时，日期应动态变为该周。

Answer 1

你可以直接使用DatePipe。

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

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

然后我可以在HTML中使用管道获取工作日，如下所示:

{{ date | date:'EEEE' }}

Answer 2

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

首先，我想指出，有许多日历和日期picker组件可用(如Bootstrap一个)，但如果你只是想显示日期作为表头，我只是有一个日期变量:

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

是要显示的一周的开始日期。当然，这应该是动态的，也许可以看到JavaScript -从当前日期获取一周的第一天。假设我们有我们想要的星期一，我写了一个小的辅助函数:

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;
}

预换行是为了保留日期和工作日之间的换行符。

希望有帮助:)

Answer 3

我可以用moment.js解决