IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Ajouter deux inputs (date d'entrée et date de sortie)


Sujet :

Angular

  1. #1
    Membre actif
    Homme Profil pro
    Ressources humaines
    Inscrit en
    septembre 2009
    Messages
    454
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Doubs (Franche Comté)

    Informations professionnelles :
    Activité : Ressources humaines

    Informations forums :
    Inscription : septembre 2009
    Messages : 454
    Points : 233
    Points
    233
    Par défaut Ajouter deux inputs (date d'entrée et date de sortie)
    Bonsoir,

    J'ai un webService qui me renvoie des données que j'affiche dans un tableau HTML.
    Comme j'ai énormément de lignes dans mon tableau, j'aimerai utiliser 2 inputs pour filtrer les dates.



    Je galère toujours à comprendre comment je pourrais filtrer les dates....

    Dans le fichier service.ts j'appelle un webservice c'est grâce à celui ci que j'affiche les datas dans le tableau html.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    @Injectable()
    export class HistoricalPricesService {
      private readonly api: string = environment.api;
     
      constructor(private http: HttpClient, private datePipe: ProjetFormatDatePipe) {}
     
      getInstrumentHistoryEquities(svm: string, model: ReturnModel): Observable < InstrumentHistoryResponse > {
        const now = new Date();
        const lastYear = new Date();
        lastYear.setFullYear(now.getFullYear() - 1);
     
        return this.http.post < InstrumentHistoryResponse > (this.api + `/WEBSERVICETITRE`, {
          SVM: parseInt(svm),
          PERIODE: 'XX',
          PERIODEXX: {
            DATEDEBUT: this.datePipe.transform(model.startDate, 'yyyy-MM-dd'),
            DATEFIN: this.datePipe.transform(model.endDate, 'yyyy-MM-dd'),
          }
        }, {
          headers: {
            DoNotSetBusy: ''
          }
        });
      }
    }
    Ensuite, j'ai créé un fichier return-model.ts pour les deux inputs.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    export class ReturnModel {
      startDate: Date;
      endDate ? : Date;
     
      constructor() {
        this.endDate = new Date();
        this.startDate = new Date();
        this.startDate.setFullYear(this.endDate.getFullYear() - 5);
      }
     
      verifyStart(): void {
        if (this.endDate && (this.startDate >= this.endDate)) {
          this.endDate = undefined;
        }
      }
    }

    vocii le fichier historical-prices.component.ts

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    export class HistoricalPricesComponent implements OnInit, OnDestroy {
      private unsubscribe$ = new Subject < void > ();
     
      infoTitle: string = "";
      historicals: Tit;
      lines: HistoryPoint[] = [];
     
      model = new ReturnModel();
     
      constructor(
        private service: HistoricalPricesService,
        private activatedRoute: ActivatedRoute
      ) {}
     
      ngOnInit(): void {
        const svm = this.activatedRoute.snapshot.paramMap.get('svm');
        if (!svm) {
          return;
        }
        this.getPrices(svm);
      }
     
      ngOnDestroy(): void {
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
      }
     
      //Display data //
      getPrices(svm: string): void {
        this.service.getInstrumentHistoryEquities(svm, this.model, ).pipe(
          takeUntil(this.unsubscribe$)
        ).subscribe(res => {
          if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
            if (res.HISTO.POINT.length > 0) {
              this.lines = res.HISTO.POINT.reverse();
     
              console.log("Display => " + JSON.stringify(res.HISTO.POINT));
            }
          }
        });
      }
     
    }
    J'ai également un console.log et vous voyez je récupère bien les datas



    Si je clique depuis mon browser sur Network > Payload

    Je vois bien les 2 inputs (date de début et date de fin)


    Maintenant mon problème est que je ne comprends vraiment pas ce que je dois faire dans la méthode getPrices() pour adapter les 2 inputs?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    getPrices(svm: string): void {
      this.service.getInstrumentHistoryEquities(svm, this.model, ).pipe(
        takeUntil(this.unsubscribe$)
      ).subscribe(res => {
        if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
          if (res.HISTO.POINT.length > 0) {
            this.lines = res.HISTO.POINT.reverse();
     
            console.log("Display => " + JSON.stringify(res.HISTO.POINT));
          }
        }
      });
    }
    Au niveau HTML, j'ai ceci actuellement avec un message d'erreur....

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid && getPrices()">
      <div class="row mb-4 align-items-end">
        <div class="col-12 col-sm-6 col-md-4">
          <div class="mb-2">
            <h5>
              Date de départ
            </h5>
            <input id="startDate" name="startDate" type="text" class="form-control form-max-width" [(ngModel)]="model.startDate" bsDatepicker />
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <div class="mb-2">
            <h5>
              Date de fin
            </h5>
            <input id="endDate" name="endDate" type="text" class="form-control form-max-width" [(ngModel)]="model.endDate" bsDatepicker />
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="mb-2">
            <button type="submit" class="btn btn-primary" [disabled]="formulaire.form.invalid">
              Rechercher
            </button>
          </div>
        </div>
      </div>
    </form>


    Je vous remercie infiniment pour votre aide.

  2. #2
    Membre régulier
    Profil pro
    Inscrit en
    novembre 2007
    Messages
    63
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2007
    Messages : 63
    Points : 70
    Points
    70
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    (ngSubmit)="formulaire.form.valid && getPrices()">
    et

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      getPrices(svm: string): void {
    tu vois que getPrices demande un argument

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Débutant] CompareValidator : écart max entre deux champs date
    Par Yosko dans le forum ASP.NET
    Réponses: 4
    Dernier message: 08/08/2011, 17h28
  2. update une date en ajoutant deux année
    Par Msysteme dans le forum MS SQL Server
    Réponses: 2
    Dernier message: 02/03/2009, 18h18
  3. Réponses: 3
    Dernier message: 03/02/2009, 15h54
  4. Date comprise entre deux autres dates
    Par Jean_guy dans le forum Requêtes et SQL.
    Réponses: 2
    Dernier message: 06/05/2008, 15h00
  5. Réponses: 6
    Dernier message: 20/12/2007, 11h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo