filter ,date pipe using angular2

Dev Teywa

8y7.4kTypeScript

hi,

I want to filter some details by start date and end date

PS: i have array in component contains details and start date and end date

i created this pipe but it doesn't work

how to do please

and thanks in advance

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
@Pipe({
name: 'dateFormatPipe',
})
export class dateFormatPipe implements PipeTransform {
transform(projetList:any,value1: string,value2: string) {
if (projetList && projetList.length)
{
var datePipe = new DatePipe("en-US");
value1= datePipe.transform(value1, 'dd/MM/yyyy');
value2= datePipe.transform(value2, 'dd/MM/yyyy');
projetList.forEach(proj => {
if (value1 >= value2)
{
return proj.title;
}
});
}
else
{
return projetList;
}
}
}

11 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mukesh Nayak8y ago
Accepted answer
Hi Dev,
I have tried creating my custom pipe which look like as following :
import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';
@Pipe({ name: 'dateFormatPipe' })

export class DateFormatPipe implements PipeTransform {
    transform(projetList: Array, startDate: string, endDate: string): Array {
        var filteredArray = new Array();

        var datePipe = new DatePipe("en-US");
        startDate = datePipe.transform(startDate, 'dd/MM/yyyy');
        endDate = datePipe.transform(endDate, 'dd/MM/yyyy');

        if (projetList && projetList.length) {
            projetList.forEach(proj => {
                var projectStartDate = datePipe.transform(proj.dateDebut, 'dd/MM/yyyy');
                var projectEndDate = datePipe.transform(proj.dateFin, 'dd/MM/yyyy')
                if (projectStartDate >= startDate && projectEndDate <= endDate) {
                    filteredArray.push(proj);
                }
            });
        }
        return filteredArray;
    }
}
Again in component follwing changes need to be done:
a) import pipe
import {DateFormatPipe } from '../custompipe/date.format.pipe';
b) add output array as following
filterdArrayByDate:Array = new Array();
c) in constructor
constructor(private dateFormatPipe:DateFormatPipe)
d) add following function
getFilteredDate(startDate:string, endDate:string): void {
       this.filterdArrayByDate = this.dateFormatPipe.transform(this.projetList, startDate, endDate);
   }
e)Now in HTML
<div class="container">
  <div class="form-control">
      <div class="form-group">
        <label for="">StartDatelabel>
        <input type="date" class="form-control"  #startDate>
      div>
      <div class="form-group">
        <label for="">EndDatelabel>
        <input type="date" class="form-control"  #endDate>
      div>
      <button type="button" class="btn btn-default" (click)=" getFilteredDate(startDate.value, endDate.value)">Filterbutton>

    <div class="form-control">
      <label>
        Projects
        <div *ngFor="let project of filterdArrayByDate">
          {{
             project.title
          }}
        div>
      label>
    div>
  div>
div>
Results Initial
Final Result
Regards,
Mukesh Nayak
+2
sri harsha8y ago
Hi Mukesh Nayak,
I want zip folder of the date pipe.
Urgent need
0
nav a8y ago
i tried the same but not able achive it. could you please give github link angular filter using src???
+1
Dev Teywa8y ago
Mukesh In app.module i provide pipedate
0
Mukesh Nayak8y ago
Please provide what you are providing as start date and end date . And please provide what is projetList array.
0
Dev Teywa8y ago
Mukesh Nayak

i try pipe another time i find that if i give it a start date min that date start in the array and a end date max at the end date of the array it will show me only one
+2
Dev Teywa8y ago
Mukesh Nayak
I get this error when i click on filter

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {routes} from './app.routing'
import { FormsModule } from '@angular/forms';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { FooterComponent } from './footer/footer.component';

import { HomeComponent } from './main/main.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { PilotageComponent } from './pilotage/pilotage.component';

import {Globals} from './globals'
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

import {TranslateModule, TranslateLoader, TranslateService} from "@ngx-translate/core";
import {TranslateHttpLoader} from "@ngx-translate/http-loader";
import {HttpClientModule , HttpClient} from "@angular/common/http";
import { FilterPipe } from './pilotage/pipe';
import { SelectPipe } from './pilotage/pipeselect';
import { PhasesPipe } from './pilotage/pipephase';

import { DatePipe } from '@angular/common';
import { dateFormatPipe } from './pilotage/pipedate';


export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    SidebarComponent,
    HomeComponent,
    FooterComponent,
    LoginComponent,
    RegisterComponent,AboutComponent,ContactComponent,PilotageComponent,FilterPipe,
    SelectPipe,PhasesPipe,dateFormatPipe
  ],
  imports: [
    BrowserModule,routes,FormsModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
        }
      })
  ],
  providers: [Globals,dateFormatPipe, {
    provide: LocationStrategy, useClass: HashLocationStrategy
}],
  bootstrap: [AppComponent]
})
export class AppModule { }
+2
Mukesh Nayak8y ago
Hi Dev
Just try following in your pipe replace your start date and end date as following :
startDate = datePipe.transform(startDate.replace(/(\d\d)\/(\d\d)\/(\d{4})/, "$3-$2-$1"), 'dd/MM/yyyy');
endDate = datePipe.transform(endDate.replace(/(\d\d)\/(\d\d)\/(\d{4})/, "$3-$2-$1"), 'dd/MM/yyyy');
may be this will work.
Regards,
Mukesh Nayak
+2
Mukesh Nayak8y ago
please provide your code.
+1
Dev Teywa8y ago
Mukesh Nayak

when i try i get this error i didn't understand because format date is day/month/year

+2
Dev Teywa8y ago
Mukesh Nayak

just a question if I do not want to store in another array I want to directly displayed result without the stored in another array
+2