CODEWITHSUNDEEP
javascriptangulardatepickerangular-material
mightycode Newton
mightycode Newton

Reputation: 3949

How to read date out of a datepicker Angular material

I have a application in Angular 8 and a search form. So A user can select a date with a datepicker. And then a api call will search for that date.

But for now I will get this error:

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

the thml looks like this:

  <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>

buttons:

 <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>

and the ts code looks like this:


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);


   }));


  }

Thank you

if I do this:


  <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>

I get this error:

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)

Upvotes: 1

Views: 6240

Answers (1)

Hemendra
Hemendra

Reputation: 388

You haven't assigned the startDate to any value, you must be getting another error saying that cannot read 'date' of undefined. Also it's not needed, you can directly bind 'startDate' variable to ngModel.

Replace [(ngModel)]="startDate.date" with [(ngModel)]="startDate"

I've created a fork here - https://stackblitz.com/edit/angular-5r6u3p

component.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>

component.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());
   };
}

Upvotes: 2

Related Questions