CODEWITHSUNDEEP
angulardatepickerangular-material
lrefopam
lrefopam

Reputation: 531

mat-datepicker changes input

in my Angular5 project I added a mat-datepicker. For example, if I enter 05.06.2018 there, the entry changes to 06.05.2018 when I leave the field.

Anyone have a solution for me?

  <mat-form-field>
    <input matInput max="{{age | date:'yyyy-MM-dd'}}" name="birthday" [(ngModel)]="model.birthday" [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

Upvotes: 1

Views: 1300

Answers (2)

Junaid Firdosi
Junaid Firdosi

Reputation: 127

For any one stumbling upon this in the future, I assume you have already created a custom format like @Akj 's answer, this image can help understand the configuration of this Format Object

enter image description here

Upvotes: 0

Akj
Akj

Reputation: 7231

Create Custom Date Formats:

DEMO

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';


import * as _moment from 'moment';

import { default as _rollupMoment } from 'moment';

const moment = _rollupMoment || _moment;


export const MY_FORMATS = {
  parse: {
    dateInput: 'DD.MM.YYYY',
  },
  display: {
    dateInput: 'DD.MM.YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@Component({
  selector: 'datepicker-formats-example',
  templateUrl: 'datepicker-formats-example.html',
  styleUrls: ['datepicker-formats-example.css'],
  providers: [

    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },

    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
  ],
})
export class DatepickerFormatsExample {
  date = new FormControl(moment());
}

Upvotes: 3

Related Questions