时间戳

首页 > 解决方案 > 如何从 datepicker Angular 材料中读取日期

javascript - 如何从 datepicker Angular 材料中读取日期

问题描述

我在 Angular 8 中有一个应用程序和一个搜索表单。因此，用户可以使用日期选择器选择日期。然后 api 调用将搜索该日期。

但现在我会收到这个错误：

ExtendedSearchComponent.html:41 ERROR TypeError: Cannot read property 'toString' of undefined

thml 看起来像这样：

  <div class="search-fields-inputs">
      <mat-form-field class="search-field-input">
        <input matInput [matDatepicker]="startDate" placeholder="sinds" [(ngModel)]="startDate.date" />
        <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
        <mat-datepicker #startDate  [(ngModel)]="startDate.date" ngDefaultControl (selectedChanged)="onDate($event)"></mat-datepicker>
      </mat-form-field>
    </div>

纽扣：

 <div fxFlex="none">
        <div fxLayout="row">
          <div class="is-grouped">
            <button mat-raised-button color="accent" class="Button" (click)="searchFor()">Zoek</button>&nbsp;
            <button mat-raised-button color="secondary" class="Button">Clear</button>
          </div>

      </div>
    </div>

并且 ts 代码如下所示：


startDate: Date;
 // endDate: Date;

  constructor( private participantService: ParticipantService) {}

  ngOnInit() {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes.searchExtended) {
      this.searchExpanded = changes.searchExtended.currentValue;
    }
  }

/*   public onDate(event): void {
    this.startDate.date = event;
    this.getData(this.roomsFilter.date);
  } */

  searchFor( filterRegistration : FilterByRegistrationDTO) {

   console.log(this.participantService.filterParticipantsByRegistration(1, "Invited", this.startDate.toString()).subscribe(result => {
  //  this.startDate = filterRegistration.start.value;
   console.log(result);
   console.log(this.startDate);


   }));


  }

谢谢

如果我这样做：


  <div class="search-fields-inputs">
      <mat-form-field class="search-field-input">
        <input matInput [matDatepicker]="startDate" placeholder="sinds" [(ngModel)]="startDate" />
        <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
        <mat-datepicker #startDate  [(ngModel)]="startDate" ngDefaultControl (selectedChanged)="onDateChanged()"></mat-datepicker>
      </mat-form-field>
    </div>

我收到此错误：

core.js:12584 ERROR Error: Uncaught (in promise): Error: Cannot assign to a reference or variable!
Error: Cannot assign to a reference or variable!
    at _AstToIrVisitor.push../node_modules/@angular/compiler/fesm5/compiler.js._AstToIrVisitor.visitPropertyWrite (compiler.js:6440)

标签： javascriptangulardatepickerangular-material

解决方案

您尚未将 分配startDate给任何值，您一定会收到另一个错误，说无法读取未定义的“日期”。也不需要，您可以直接将'startDate'变量绑定到ngModel.

替换[(ngModel)]="startDate.date"为[(ngModel)]="startDate"

我在这里创建了一个叉子 - https://stackblitz.com/edit/angular-5r6u3p

组件.html

<mat-form-field>
  <input matInput [matDatepicker]="picker1" placeholder="Angular forms" [(ngModel)]="startDate">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

 <button mat-raised-button color="accent" class="Button" (click)="searchFor()">Search</button>

组件.ts

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

/** @title Datepicker selected value */
@Component({
  selector: 'datepicker-value-example',
  templateUrl: 'datepicker-value-example.html',
  styleUrls: ['datepicker-value-example.css'],
})
export class DatepickerValueExample {
  startDate: Date;

  searchFor() {
   console.log(this.startDate.toString());
   };
}

推荐阅读