Question

我正在使用matdatepicker for angular2。即使在刷新页面之后，它仍然保留了日期的值。如何在刷新页面或单击“提交”按钮后重置这些占位符？代码如下：

HTML：

<div class="div1">
   <form (ngSubmit)="getJobsByDateRange(f)" #f="ngForm" >
     <label style="float:left;padding:7px;"> From : </label>
      <mat-form-field style="float:left;padding:7px;">
        <input type="date" matInput [matDatepicker]="picker1" placeholder="Choose a date" name="fromDate" 
        [(ngModel)]="eventobj.fromDate" #eventDate="ngModel"  required>
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
      </mat-form-field>
      <label style="float:left;padding:7px;"> To : </label>
      <mat-form-field style="float:left;padding:7px;">
        <input type="date" matInput [matDatepicker]="picker2" placeholder="Choose a date" name="toDate" 
        [(ngModel)]="eventobj.toDate" #eventDate="ngModel"  required>
        <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
        <mat-datepicker #picker2></mat-datepicker>
      </mat-form-field>
      <button mat-raised-button class="btn btn-info btn-sm"> Submit </button>
      </form>
</div>

TS：

eventobj = {
  fromDate: new Date(this.defaultDate - 1000 * 60 * 60 * 24 * 7), // One week
  toDate: new Date(this.defaultDate),
}
getJobsByDateRange() {
  let fromDate1 = this.eventobj.fromDate;
  let toDate1 = this.eventobj.toDate;
  let fromDate2=null;
  let toDate2=null;
  if(fromDate1!=null && toDate1!=null){
    fromDate2= ("00"+fromDate1.getDate()).slice(-2)+"-"+("0"+(1+fromDate1.getMonth())).slice(-2)+"-"+fromDate1.getFullYear()
    toDate2= ("00"+toDate1.getDate()).slice(-2)+"-"+("0"+(1+toDate1.getMonth())).slice(-2)+"-"+toDate1.getFullYear()

  }
  else{
    alert("Enter a valid date!")
  }
  alert(fromDate2+"||"+toDate2)
}

Answer 1

我找到了适合我的解决方案。

TS文件的修改：

getJobsByDateRange(form) {
// rest of code
form.resetForm();
}

matdatepicker甚至在刷新页面后仍保持日期

1 个答案: