Invalid input when manual modification with specific localization

[michaelsivo]

Hello,

I'm using a specific localization for my datetime picker, the display is correct and if I'm using the picker it works well. However, if I'm trying to modify directly the date, the input is invalid while the date entered is correct in its localization format.

App.component.ts

import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';
import {DateAdapter, NativeDateAdapter} from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form: FormGroup;
  constructor(private adapter: DateAdapter<NativeDateAdapter>) {
    this.adapter.setLocale('fr-FR');
  }

  ngOnInit() {
    this.form = new FormGroup({
      start: new FormControl(new Date())
    });
  }
}

App.component.html

<form [formGroup]="form">
  <mat-form-field>
    <mat-placeholder>Start DateTime</mat-placeholder>
    <mat-datetimepicker-toggle [for]="datetimePicker" matSuffix></mat-datetimepicker-toggle>
    <mat-datetimepicker #datetimePicker type="datetime" openOnFocus="true" timeInterval="5"></mat-datetimepicker>
    <input matInput formControlName="start" [matDatetimepicker]="datetimePicker" required autocomplete="false">
  </mat-form-field>
</form>

App.module.ts

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    FormsModule,
    MatInputModule,
    ReactiveFormsModule,
    // use this if you want to use native javascript dates and INTL API if available
    // MatNativeDatetimeModule,
    MatNativeDatetimeModule,
    MatDatetimepickerModule
  ]

[JusuVh]

Hi,
I don't think it's clearly indicated in the docs by you should use the MAT_DATETIME_FORMATS provider to specify the formats for parsing and display.
Add this to your app.module providers (specifically the dateInput in the parse object) :

    {
      provide: MAT_DATETIME_FORMATS,
      useValue: {
        parse: {
          dateInput: 'DD/MM/YYYY HH:mm',
          timeInput: 'HH:mm',
        },
        display: {
          dateInput: 'DD/MM/YYYY',
          datetimeInput: 'DD/MM/YYYY HH:mm',
          timeInput: 'HH:mm',
          monthYearLabel: 'MMM YYYY',
          dateA11yLabel: 'LL',
          monthYearA11yLabel: 'MMMM YYYY',
        },
      }
    }

Also, there should be a datetimeInput in the parse object, because if you use date and datetime types at the same time, there is confusion on the format.

[michaelsivo]

I have added the MAT_DATETIME_FORMATS to my module and changed

private adapter: DateAdapter<NativeDateAdapter>

into

private adapter: DatetimeAdapter<NativeDatetimeAdapter>

Now the datetimepicker only display the date and not the time. I think it is related to your last sentence but i didn't understand what you meant by date and datetime confusion. Is it related to the js Date type?

[kuhnroyal]

Date(time) parsing with the native date implementation is not supported, this is a limitation of the native date and the INTL API .
See Material2 native-date-adapter.ts

If you want to display and parse a certain datetime format, you have to use the moment adapter and set the display.datetimeInput and parse.datetimeInput properties to the same format. This works exactly the same way as the dateInput property for the official material datepicker does.

See datetime-formats.ts

[michaelsivo]

Ok thanks!