How can I do a search filter by dates in angular 6?

Question

How can I do a search filter by dates in angular 6?

Navigation

#1 by (0 votes)

0

I would like to know how to achieve a search filter by date of hiring a table employees having a start date and an end date. this is my html

<div style="justify-content:center">
  <mat-card style="  max-width: 900px;  ">
    <div class="example-container">
      <mat-card-title> Resporte buscando información de empleados por fecha de contratación</mat-card-title>
      <mat-form-field>
          <input matInput [matDatepicker]="picker" placeholder="Seleccione una fecha desde">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
    </div><br>
    <div class="example-container">
        <mat-form-field>
            <input matInput [matDatepicker]="picker2" placeholder="Seleccione una fecha hasta">
            <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
            <mat-datepicker #picker2></mat-datepicker>
          </mat-form-field>
      </div>
    <button mat-raised-button>Buscar</button> <br>
  </mat-card>
</div><br>

I would greatly appreciate the help!

typescript angular angular6 angular-material

asked by David Gutierrez 17.09.2018 в 16:51

source

1 answer

Error renewing credentials of mercadopago connect Query comparing two fields from two different records

score 0 · Answer 1

To compare dates, I recommend that you always work in its format in milliseconds.

So, for example, getting the Date type object of "picker" and "picker2" using ngModel:

HTML

<input matInput [matDatepicker]="picker" placeholder="Seleccione una fecha desde" [(ngModel)] = "pickerDate">

<input matInput [matDatepicker]="picke2r" placeholder="Seleccione una fecha hasta" [(ngModel)] = "pickerDate2">)

When you click the search button, therefore, it is enough to turn the dates into milliseconds and look for all those dates between them.

TypeScript

onSearch() {
   fechasFiltradas = this.myDates
          .filter((date: Date) => pickerDate.getTime() < date.getTime() < pickerDate2.getTime());
}

Greetings!