angular 2 date pipe weeknumber

Question

I looked up how to return the week number in Angular 2. I have not found an answer to this question. I did find on https://docs.angularjs.org/api/ng/filter/date that in Angular 1 it would be something like this: {{today | date:'w'}} but this does not seem to work in Angular 2. I know I can write a function to take care of this but this doesn't seem practical. Am I missing something in the documentation about Angular 2 or is this not (yet) implemented there?

is `today` a `Date` or a `string`? AFAIK currently it has to be a `Date` for the `date` pipe to work. — Günter Zöchbauer, Feb 18 '16 at 06:44
Today is just a variable I created to make life easier. as in: var today = new Date(); — JanVanHaudt, Feb 18 '16 at 07:10

score 9 · Answer 1 · edited Sep 30 '18 at 19:18

As Günter suggests, writing your own is pretty simple.

Create a new typescript file, 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;
    }
}

If you are using moment the code is even easier

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

include the pipe in your 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 { }

And then you can use it in your HTML as usual

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

where yourDate is a public yourDate: Date = new Date(); in your component.

Kenny · Answer 2 · 2019-03-22T11:55:08.257

Edit: Typo I mentioned right here has been fixed.

I don't have the reputation to comment on Patrick's example, but I want to state that there is a typo:

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

Mark the "value" parameter that is passed to "moment()".

score 3 · Answer 3 · answered Mar 28 '19 at 08:25

3

Week of Year and Week of Month are supported in DatePipe in Angular 7:

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

answered Mar 28 '19 at 08:25

Sisyphus40

110
4

score 1 · Accepted Answer · answered Feb 18 '16 at 07:23

1

The DatePipe currently doesn't support weekOfYear.

You can implement your own WeekOfYear pipe though.
See https://angular.io/docs/ts/latest/guide/pipes.html for more details.

answered Feb 18 '16 at 07:23

Günter Zöchbauer

623,577
216
2,003
1,567

angular 2 date pipe weeknumber

4 Answers4

Linked