filter details by start date and end date in angular2+

Question

hi, I want to filter some details by start date and end date how to do please and thanks in advance

Dev Teywa · Answer

Mukesh Nayak i get the same error (in button) in your solution

Dev Teywa · Answer

Dharmraj Thakur i don't use database i use array in component

Mukesh Nayak · Answer

Hi, In you pilotage component please remove following line datepipe:DatePipe; and add public datepipe:DatePipe in constructor Make sure you have everything in app.module as mentioned earlier. Again this changes are for the code i mentioned not the pipe you created.

Dev Teywa · Answer

Mukesh Nayak i created this pipe but it doesn't work 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; } } } div * ngIf = "datedeb.checked" > Date début input type = "date" #startdate class = "form-control" [(ngModel)]="value1" /> Date Fin input type = "date" #enddate class = "form-control" [(ngModel)]="value2" /> div > //call pipe let p of (projetList | FilterPipe: titleSearch | selectfilter: sel | PhasesPipe: selc | dateFormatPipe:value1:value2 )

Dev Teywa · Answer

Mukesh Nayak i get this error pilotage .component.ts import { Globals } from './../globals'; import { Component,OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import {FilterPipe} from './pipe'; import { SelectPipe } from './pipeselect'; import {PhasesPipe} from './pipephase'; import { DatePipe } from '@angular/common'; @Component({ selector: 'app-pilotage', templateUrl: './pilotage.component.html' }) export class PilotageComponent { projetList:any; show = false ; showlist:any; showlivrable1:any; datepipe:DatePipe; filterdArrayByDate:any = new Array(); constructor(private globals: Globals,private route: Router) { this.showlist ={}; this.showlivrable1 ={}; this.projetList = [ { title: "Titre du projet 01", dateDebut: "21/03/2017", dateFin: " 01/01/2018", img: "./assets/img/projet_1.jpg", filliale: "BMCE capital", doc_fiche_projet: "../pdf/test_pdf.pdf", responsable: "Resposable projet", taille_fiche_projet: "pdf 4.06 Mo", objectif: "Lorem ipsum dolor sit amet", type_projet: "Organisation", domaine: "Domaine fonctionnel 01", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", phase_cours:"demarrage", phases: [{ libelle: "demarrage", code: "demarrage", img:"./assets/img/icons/icon_demarrage.png", phaseColor: "color_yellow", du: "01 mars 2017", au: "02 avril 2018" },{ libelle: "planification", code: "planification", img:"./assets/img/icons/icon_planif.png", phaseColor: "color_cyan", du: "01 mars 2017", au: "02 avril 2018" }, { libelle: "exécution", code: "execution", img:"./assets/img/icons/icon_execution.png", phaseColor: "color_orange", du: "03 mars 2017", au: "02 avril 2018" }, { libelle: "Suivi", code: "suivi", img:"./assets/img/icons/icon_suivi.png", phaseColor: "color_pink", du: "01 mars 2017", au: "02 avril 2018" }, { libelle: "Clôture", code: "cloture", img:"assets/img/icons/icon_cloture.png", phaseColor: "color_pistach", du: "01 mars 2017", au: "02 avril 2018" }, { libelle: "Bilan d’efficacité", code: "bilan", img:"./assets/img/icons/icon_bilan.png", phaseColor: "color_green", du: "01 mars 2017", au: "02 avril 2018" }], livrablesDemmarage: [{ title: "Livrable 01", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 02", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 03", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesPlanification: [{ title: "Livrable 04", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 05", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 06", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesExecution: [{ title: "Livrable 07", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 09", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 10", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesSuivi: [{ title: "Livrable 11", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 12", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 13", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesCloture: [{ title: "Livrable 14", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 15", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 16", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }], livrablesBilan: [{ title: "Livrable 17", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 18", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }, { title: "Livrable 19", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }] } ]; } //Add a function like following : getFilteredDate(startDate:string, endDate:string): void { if (this.projetList && this.projetList.length) { this.projetList.forEach( proj = > { if (this.datepipe.transform(proj.dateDebut, 'yyyy-MM-dd') > = this.datepipe.transform(startDate, 'yyyy-MM-dd') && this.datepipe.transform(proj.dateFin, 'yyyy-MM-dd') = this.datepipe.transform(endDate, 'yyyy-MM-dd') ) { this.filterdArrayByDate.push(proj); console.log(proj) } }); } } ngOnInit() { /*if ( this.globals.user === '' || this.globals.user === null) { this.route.navigateByUrl('login/login'); }*/ } } div * ngIf = "datedeb.checked" > input type = "date" #startDate > input type = "date" #endDate > button type = "button" class = "btn btn-default" (click)=" getFilteredDate(startDate.value, endDate.value)" > Filter button > span * ngFor = "let project of filterdArrayByDate" > {{ project.title }} span >

Mukesh Nayak · Answer

Following changes need to be done . First in app.module import the following and add to provider: import { DatePipe } from '@angular/common' ; providers: [DatePipe], Further in the component where you want to filter by date import the same.And then add following : import { DatePipe } from '@angular/common' ; //Add the following within component filterdArrayByDate:Array = new Array(); //Add a function like following : getFilteredDate(startDate:string, endDate:string): void { if ( this .projetList && this .projetList.length) { this .projetList.forEach(proj => { if ( this .datepipe.transform(proj.dateDebut, 'yyyy-MM-dd' ) >= this .datepipe.transform(startDate, 'yyyy-MM-dd' ) && this .datepipe.transform(proj.dateFin, 'yyyy-MM-dd' ) this .datepipe.transform(endDate, 'yyyy-MM-dd' ) ) { this .filterdArrayByDate.push(proj); } }); } } Now in the html add following : div class = "container" > div class = "form-control" > div class = "form-group" > label for = "" > StartDate label > input type = "text" class = "form-control" #startDate > div > div class = "form-group" > label for = "" > EndDate label > input type = "text" class = "form-control" #endDate > div > button type = "button" class = "btn btn-default" (click)=" getFilteredDate(startDate.value, endDate.value)" > Filter button > div class = "form-control" > label > Projects div * ngFor = "let project of filterdArrayByDate" > {{ project.title }} div > label > div > div > div > Regards, Mukesh Nayak

Dharmraj Thakur · Answer

1. Create a function which will get text from startDate textbox, endDate textbox and send that data to service method. 2. Service method will call a server method via get or post request. 3. Create a method in your backend which receive startDate and endDate as argument. This method will get data from database within given date and return to ther angular service... Thats it...

Dev Teywa · Answer

Sagar Pandurang Kap, but it's Angular js i want Angular 2

Sagar Pandurang Kap · Answer

Hi, Try below link :- https://stackoverflow.com/questions/39369547/angularjs-filtering-the-field-based-on-start-date-and-end-date HOpe it helps...

filter details by start date and end date in angular2+

Answers (9)