角度自定义控件

Question

我为日期时间选择器创建了自定义组件。我正在使用两个相同的控件来过滤开始时间和停止时间。选择开始时间和停止时间的日期时间来过滤数据，并清除两个过滤器。     现在，如果我选择日期时间作为开始时间过滤器，则停止时间过滤器也会采用先前的停止时间过滤器。

datetime-picker-dialog.html

<div fxLayout="row" fxLayoutAlign="flex-start center" fxLayoutGap="5px">
  <mat-form-field style="width:50%;">
    <!-- <input matInput [matDatepicker]="fromStartPicker" name="startTimeFromDate"> -->
    <input matInput value="{{selectedFromDate | date:'dd-MM-yyyy HH:mm'}}" [disabled]="true" style="font-size:12px;" name="FromDate" placeholder="From">
  </mat-form-field>
  <mat-form-field style="width:50%;">
    <input matInput value="{{selectedToDate | date:'dd-MM-yyyy HH:mm'}}" [disabled]="true" style="font-size:12px;" name="ToDate" placeholder="To">
  </mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="flex-start center" fxLayoutGap="5px">
  <!-- <mat-datepicker #fromStartPicker opened="true" [touchUi]="true"></mat-datepicker> -->
  <!-- <mwl-calendar-month-view></mwl-calendar-month-view> -->
  <!-- <mat-calendar [selected]="selectedFromDate" (selectedChange)="saveConfig($event)"></mat-calendar> -->
  <mat-calendar [selected]="selectedFromDate" (selectedChange)="selectedFromDate = $event">
  </mat-calendar>

  <mat-calendar [selected]="selectedToDate" (selectedChange)="selectedToDate = $event">
  </mat-calendar>
</div>

datetime-picker-dialog.ts

@Component({
  selector: 'time-picker-dialog',
  templateUrl: './datetime-picker-dialog.html',
  encapsulation: ViewEncapsulation.None,
})

export class DateTimePickerDialog implements OnInit {

  selectedFromDate: Date;
  selectedToDate: Date;

  @Input() emitDateTime: any[] = [];

  constructor(public dialogRef: MatDialog) { }


  ngOnInit() { 
    this.selectedFromDate = this.emitDateTime[0];
    this.selectedToDate = this.emitDateTime[1];
  }
}

datetime-range-picker.component.html

<div>
  <mat-form-field class="mat-form-field-infix" style="width: 275px !important;">
    <div fxLayout="row">
      <input matInput (click)="openTimePickerDialog()"
        value="{{(dateTimePersist && fromTime != null ? (fromTime | date:'dd-MM-yyyy HH:mm') : 'Select') +'   '+ (dateTimePersist && toTime != null ? (toTime | date:'dd-MM-yyyy HH:mm') : 'Date Time')}}"
        style="font-size:14px;font-weight:inherit;">
      <button mat-icon-button (click)="openTimePickerDialog()" style="height:10px;padding-bottom: 37px;">
        <mat-icon>date_range</mat-icon>
      </button>
    </div>
    <mat-hint>Search by Date Time</mat-hint>
  </mat-form-field>
</div>

datetime-range-picker.component.ts

import { Component, Output, EventEmitter, Input } from '@angular/core';
import { MatDialog } from '@angular/material';
import { DateTimePickerDialog } from '../datetime-picker-dialog/datetime-picker-dialog';


@Component({
  selector: 'datetime-range-picker',
  templateUrl: './datetime-range-picker.component.html',
})
export class DateTimeRangePickerComponent {

  @Output() dateTimeValue: EventEmitter<any[]> = new EventEmitter<any[]>();
  @Input() dateTimePersist: boolean;
  fromTime: any;
  toTime: any;
  customControlName: string = ""

  constructor(private dialog?: MatDialog) { }

  openTimePickerDialog() {
    const dialog = this.dialog.open(DateTimePickerDialog, {
      width: '650px',
    });
    if (!this.dateTimePersist) {
      dialog.componentInstance.emitDateTime.push("", "");
      this.fromTime = this.toTime = null;
    }
    else { dialog.componentInstance.emitDateTime.push(this.fromTime, this.toTime); }
    dialog.afterClosed().subscribe(() => {
      var datetimeValues: any[] = [];
      if (dialog.componentInstance.selectedFromDate && dialog.componentInstance.selectedToDate) {
        datetimeValues.push(dialog.componentInstance.selectedFromDate)
        datetimeValues.push(dialog.componentInstance.selectedToDate)
        this.dateTimeValue.emit(datetimeValues)
        this.fromTime = dialog.componentInstance.selectedFromDate,
          this.toTime = dialog.componentInstance.selectedToDate
      }
    });
    this.dateTimePersist = true;
  }
}

jobs.component.html

<!-- start time -->
<datetime-range-picker (dateTimeValue)="dateTimeChangedStartTime($event)" [dateTimePersist]="clearDateTimePickerValue">
            </datetime-range-picker>

<!-- stop time -->
<datetime-range-picker (dateTimeValue)="dateTimeChangedStopTime($event)" [dateTimePersist]="clearDateTimePickerValue">
            </datetime-range-picker>