title: Angular Material Datepicker - manual date entry in the input field
body: <p>Datepicker works fine until I type the date manually in. If I type a date between 01.MM.YYYY and 12.MM.YYYY the value switches to MM.DD.YYYY but if I type for example 16.09.2021 it stays DD.MM.YYYY.</p>
  <p>How can I change the date format from input field?</p>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;form-group inline datepicker&quot;&gt;
    &lt;mat-form-field appearance=&quot;fill&quot;&gt;
        &lt;input matInput
               [matDatepicker]=&quot;validFromPicker&quot;
               [formControl]=&quot;validFromFormControl&quot;
               (dateChange)=&quot;setValidFromDate($event.value)&quot;&gt;
        &lt;mat-datepicker-toggle matSuffix [for]=&quot;validFromPicker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
        &lt;mat-datepicker #validFromPicker&gt;&lt;/mat-datepicker&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  <p>TypeScript</p>
  <pre><code> validFrom: Date;
   validFromFormControl: FormControl;
   
   ngOnInit() {
     this.validFromFormControl = new FormControl(new Date());
     this.validFrom = new Date();
   }
  
   setValidFromDate($event: any) {
     this.validFrom = $event;
   }
  </code></pre>
  <p>I tried to set in AppModule the locale like in this thread - <a href="https://stackoverflow.com/a/54670289/11945378">https://stackoverflow.com/a/54670289/11945378</a> but without success.</p>