Я хочу установить коврик на фильтр 7 - PullRequest
Новая
       21

Я хочу установить коврик на фильтр 7

0 голосов
/ 09 июля 2019

В Angular я пытаюсь отфильтровать данные по датам.У меня есть два mat-date-picker элемента, один для даты начала и другой для даты окончания.У меня также есть выпадающий список, который содержит фильтр для выбора даты, как - последние 7 дней, последние 24 часа, в прошлом месяце.Когда я выбираю один из этих вариантов, он должен установить даты в mat-date-picker в соответствии с выбранным фильтром.

gmapcomponent.html 

    <div class="search-box-container">
      <div class="row">
        <form [formGroup]="angForm" (ngSubmit)="onSubmit()">

          <div class="form-controls">
            <mat-form-field>
              <input matInput [matDatepicker]="start_date_picker" placeholder="Start date" formControlName="start_date">

              <mat-datepicker-toggle matSuffix [for]="start_date_picker"></mat-datepicker-toggle>

              <mat-datepicker #start_date_picker></mat-datepicker>


              <mat-error *ngIf="submitted && formControl.start_date.errors">
                <mat-error *ngIf="formControl.start_date.errors.required"> * select the start date</mat-error>

              </mat-error>
            </mat-form-field>
          </div>
          <h4>To</h4>
          <div class="form-controls">
            <mat-form-field>
              <input matInput [matDatepicker]="end_date_picker" placeholder="End date" formControlName="end_date">

              <mat-datepicker-toggle matSuffix [for]="end_date_picker"></mat-datepicker-toggle>

              <mat-datepicker #end_date_picker></mat-datepicker>

              <mat-error *ngIf="submitted && formControl.end_date.errors">
                <mat-error *ngIf="formControl.end_date.errors.required"> * select the start date</mat-error>

              </mat-error>
            </mat-form-field>

          </div>

          <h4>Or</h4>
          <div class="col">
            <div class="drop-down">
              <mat-form-field>
                <mat-select [(value)]="selectedOption" (selectionChange)="onSelectChange($event.value)">

                  <mat-option [value]="'hours'">
                    <mat-radio-button>Last 24 hours</mat-radio-button>
                  </mat-option>
                  <mat-option [value]="'days'">
                    <mat-radio-button>Last 7 days</mat-radio-button>
                  </mat-option>
                  <mat-option [value]="'month'">
                    <mat-radio-button>Last month</mat-radio-button>
                  </mat-option>

                </mat-select>
              </mat-form-field>
            </div>
          </div>
          <button mat-flat-button color="primary">Search</button>
        </form>

      </div>
    </div>

.ts 

onSelectChange(value) {
    console.log(value);
    if ('days' === value) {

    }
  }
...