角2日期管周数

时间:2016-02-18 06:36:52

标签: angular angular-date-format

我查看了如何返回Angular 2中的周数。我还没有找到这个问题的答案。 我确实在https://docs.angularjs.org/api/ng/filter/date上发现在Angular 1中它会是这样的:{{today | date:'w'}}但这似乎不适用于Angular 2.我知道我可以写一个函数来处理这个但是这个似乎不实用。我在关于Angular 2的文档中遗漏了什么或者是否(尚未)在那里实现了?

4 个答案:

答案 0 :(得分:4)

正如Günter建议的那样,写你自己的很简单。

创建新的打字稿文件week.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'week' })
export class WeekPipe implements PipeTransform {
    transform(value: Date): number {
        return this.getWeekNumber(value);
    }

    // source: http://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php
    private getWeekNumber(d: Date): number {
        // Copy date so don't modify original
        d = new Date(+d);
        d.setHours(0, 0, 0);
        // Set to nearest Thursday: current date + 4 - current day number
        // Make Sunday's day number 7
        d.setDate(d.getDate() + 4 - (d.getDay() || 7));
        // Get first day of year
        var yearStart = new Date(d.getFullYear(), 0, 1);
        // Calculate full weeks to nearest Thursday
        var weekNo = Math.ceil((((d.valueOf() - yearStart.valueOf()) / 86400000) + 1) / 7);
        // Return array of year and week number
        return weekNo;
    }
}

如果你正在使用,那么代码就更容易了

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({ name: 'week' })
export class WeekPipe implements PipeTransform {
    transform(value: Date): number {
        return moment(value).week();
    }
}

在app.module中包含管道

import { NgModule } from '@angular/core';
import { WeekPipe } from './pipes/week.pipe';
@NgModule({
    imports: [
        // your imports
    ],
    declarations: [
        AppComponent,
        WeekPipe      // including the pipe in declarations
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

然后您可以像往常一样在HTML中使用它

<div class="week-number">
    {{ yourDate | week }}
</div>

其中yourDate是您组件中的public yourDate: Date = new Date();

答案 1 :(得分:2)

编辑:我在这里提到的错字已被修复。

我没有对Patrick的例子发表评论的声誉,但我想声明有一个错字:

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({ name: 'week' })
export class WeekPipe implements PipeTransform {
    transform(value: Date): number {
        return moment(value).week();
    }
}

标记&#34;值&#34;传递给&#34; moment()&#34;。

的参数

答案 2 :(得分:1)

DatePipe目前不支持weekOfYear

您可以实现自己的WeekOfYear管道 有关详细信息,请参阅https://angular.io/docs/ts/latest/guide/pipes.html

答案 3 :(得分:1)

Angular 7的DatePipe支持每年的一周和每月的一周:

https://angular.io/api/common/DatePipe