我想在过滤器7中设置mat-date-picker

时间:2019-07-09 12:29:37

标签: angular angular-material angular7 datetimepicker

在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) {

    }
  }

0 个答案:

没有答案