Can't get time in the console with Angular material

Question

I have a problem, I can't get the correct time in the console with angular Material. I was using a old librairy (datepicker ng bootstraps) but when I was trying to update the date it was always day - 1/month/year. So I went with the angular materials, I tried to do the same, however in the console I never get the date I picked with the new librairy.

dashboard.component.html :

<div class="row">
        <div class="col-xs-12 col-12 col-md-6 form-group">
          <mat-form-field>
            <mat-label for="inputDemarrageDate">date de début</mat-label>
            <input id="inputDemarrageDate" matInput [matDatepicker]="picker" name="inputDemarrageDate"> 
            <mat-datepicker-toggle matSuffix [for]="picker" [(ngModel)]="edit.demarrageMission" [ngModelOptions]="{standalone: true}"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>
        </div>

old dashboard.component.html :

<div class="col-xs-12 col-12 col-md-6 form-group">
          <label for="inputDemarrageDate">date de début</label>
          <input type="text"
                 placeholder="Choisir une date..."
                 class="form-control"
                 bsDatepicker
                 [bsConfig]="{ dateInputFormat: 'YYYY/MM/DD' }"
                 [(ngModel)]="edit.demarrageMission"
                 [ngValue]="edit.demarrageMission"
                 id="inputDemarrageDate"
                 name="inputDemarrageDate">
        </div>
      </div>

It's like the new value is never sent.

Kishan Kishan · Accepted Answer · 2020-05-18T14:02:14

The ngModel binding needs to be defined on the input element:

<mat-form-field>
  <mat-label for="inputDemarrageDate">date de début</mat-label>
  <input id="inputDemarrageDate" matInput [matDatepicker]="picker" name="inputDemarrageDate" [(ngModel)]="edit.demarrageMission" [ngModelOptions]="{standalone: true}"> 
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Can't get time in the console with Angular material

1 Answers