filter details by start date and end date in angular2+

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>

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="">StartDatelabel>
<input type="text" class="form-control" #startDate>
div>
<div class="form-group">
<label for="">EndDatelabel>
<input type="text" 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>

Regards,

Mukesh Nayak

9 Replies

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

Dev Teywa8y ago
Dharmraj Thakur

i don't use database i use array in component
+2
Dev Teywa8y ago
Mukesh Nayak

i get the same error (in button) in your solution
+2
Mukesh Nayak8y ago
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.
+2
Dev Teywa8y ago
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 )
+2
Dev Teywa8y ago
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>
+2
Mukesh Nayak8y ago
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="">StartDatelabel>
        <input type="text" class="form-control"  #startDate>
      div>
      <div class="form-group">
        <label for="">EndDatelabel>
        <input type="text" 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>
Regards,
Mukesh Nayak
+2
Dharmraj Thakur8y ago
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...
+1
Dev Teywa8y ago
Sagar Pandurang Kap, but it's Angular js i want Angular 2
+2
Sagar Pandurang Kap8y ago
Hi,
Try below link :-

https://stackoverflow.com/questions/39369547/angularjs-filtering-the-field-based-on-start-date-and-end-date

HOpe it helps...
+2