显示德国日名和右周编号 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] ;迪恩斯塔格 23.04 [17]

编辑：

使用解决方案，我刚刚解决了星期一 => 蒙塔格问题。但是使用周数它不起作用！

格式：日日期 [周号]

周一 29.04 [18] ...周六 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"是我的烟斗的名称。

创建管道

ng generate pipe WochenNummer

这创建 2 文件

wochen-nummer.pipe.spec.tswochen-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发布上面的链接

为了使事情正常工作，我必须将管道包含在myComponent.module.ts中

。

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

我一起得到了这个：我的标题单元格模板的图片，带有正确的周数和德国日期名称

我很高兴:)