显示德国日名称和正确的周数 Angular

Question

我用 dxScheduler 构建了一个调度程序。想要在 dx-scheduler-header-row 中以德语显示当天的名称。

我已经在德国本地化了我的申请。

到目前为止我有：

<div *dxTemplate="let data of 'dateCellTemplate' let dataIndex = index">
        <div [ngClass]="getClassName(data)">
             <span>{{[data.date | date :'EEEE dd.MM [w]'}}</span>
         </div>
</div>

这显示了我

星期一 22.04 [17] ;星期二 23.04 [17]

等等。

我想要那里

蒙塔格 22.04 [17] ; Dienstag 23.04 [17]

编辑：

通过解决方案，我刚刚解决了 Monday => Montag 问题。但是对于周数，它不起作用！

格式：日期 [周数]

Mo 29.04 [18] ... Sa 04.05 [18] 所以 05.05 [19] <- ????

为什么这里的周数是 19？应该是 18。

Answer 1

感谢@briosheje，我找到了正确的待办事项：

在myComponent.component.html我改了：

<div *dxTemplate="let data of 'dateCellTemplate' let dataIndex = index">
        <div [ngClass]="getClassName(data)">
             <span>{{[data.date | date :'EEEE dd.MM [w]'}}</span>
         </div>
</div>

到

<div *dxTemplate="let data of 'dateCellTemplate' let dataIndex = index">
    <div [ngClass]="getClassName(data)">
        <span>{{[ data.date | date : '.MM' ]}}</span><br>
        <span>{{[ data.date | wochenNummer ]}}</span>
    </div>            
</div>

其中 "wochenNummer" 是我的 Pipe 的名称。

创建管道

ng generate pipe WochenNummer

这将创建 2 个文件

wochen-nummer.pipe.spec.ts wochen-nummer.pipe.ts

在 wochen-nummer.pipe.ts 我有：

 export class WochenNummerPipe implements PipeTransform {

  transform(value: Date): string {
    // Copy date so don't modify original
    value = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate()));
    // Set to nearest Thursday: current date + 4 - current day number
    // Make Sunday's day number 7
    value.setUTCDate(value.getUTCDate() + 4 - (value.getUTCDay() || 7));
    // Get first day of year
    const yearStart = new Date(Date.UTC( value.getUTCFullYear(), 0, 1));
    // Calculate full weeks to nearest Thursday
    const weekNo = Math.ceil(( ( (+value - +yearStart) / 86400000) + 1) / 7);
    // Return array of year and week number
    const returner = '[' + weekNo + ']';
    return returner;
  }

}

这里是我的周数计算。 @briosheje postet link 以上

为了让事情正常进行，我必须在 myComponent.module.ts

中包含管道

@NgModule({
  imports: [
    ...
  ],
  providers: [WochenNummerPipe],
  declarations: [
    ...  ,
    WochenNummerPipe
  ]
})

总而言之，我得到了这个：picture of my header cell template with right week number and german daynames

我很开心:)

显示德国日名称和正确的周数 Angular

Show the german dayname & right week number Angular

format

date

devextreme

angular