Formato de entrada Angular Material Datepicker

Iñigo

Ao selecionar uma data com o selecionador de data, tudo funciona bem, exibindo a data no formato desejado: DD/MM/YYYY

Mas ao inserir manualmente uma data com formato DD/MM/YYYY, o selecionador de data altera automaticamente a data para MM/DD/YYYY, detectando o primeiro valor DDcomo um mês.

Como posso fazer com que a entrada manual seja detectada como DD/MM/YYYY, não como MM/DD/YYYY?

Obrigado!

<mat-form-field class="datepickerformfield" floatLabel="never">
    <input matInput class="dp" formControlName="fpresentaciondesde" [matDatepicker]="picker5" placeholder="DD/MM/YYYY" required>
    <mat-datepicker-toggle matSuffix [for]="picker5"></mat-datepicker-toggle>
    <mat-datepicker #picker5></mat-datepicker>
</mat-form-field>
Amadou Beye

Você precisa construir um adaptador de data personalizado como este:

export class CustomDateAdapter extends NativeDateAdapter {

    parse(value: any): Date | null {

    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
       const str = value.split('/');

      const year = Number(str[2]);
      const month = Number(str[1]) - 1;
      const date = Number(str[0]);

      return new Date(year, month, date);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }

  format(date: Date, displayFormat: Object): string {
    date = new Date(Date.UTC(
      date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(),
      date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
    displayFormat = Object.assign({}, displayFormat, { timeZone: 'utc' });

    const dtf = new Intl.DateTimeFormat(this.locale, displayFormat);
    return dtf.format(date).replace(/[\u200e\u200f]/g, '');
  }

}

e, em seguida, use-o em seu aplicativo:

@NgModule({
    ....
    providers: [
        { provide: DateAdapter, useClass: CustomDateAdapter }
    ]
})

DEMO

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Formato de entrada Angular Material Datepicker

Formato de data angular 2 Material 2 datepicker

formato de entrada MD-datepicker

Como editar o formato de data no material-datepicker no angular 6?

Como alterar o formato do Angular Material Datepicker em tempo de execução

Angular reativo Forma material Selecionador de data formato de entrada manual DD / MM / AAAA

Angular Material, Md-datepicker - abra o selecionador de data no clique de entrada

ngb-datepicker não funciona na entrada de material angular (matInput)

Evento e formato do Angular Material mat-datepicker (alterar)

react-native-datepicker alterar o formato de entrada

O selecionador de data Angular 5 Material não suporta o formato "DD / MM / AAAA" usando a entrada

Número de entrada no Angular Material Design?

entrada de material angular com um addon

entrada de material angular com um addon

Entrada de material angular: bug com muitos campos de entrada

Angular material datepicker dateformat

Angular Material DatePicker Autocomplete

Alterar o formato do md-datepicker no Material angular com momentjs

Alterar o formato do md-datepicker no Material angular com momentjs

Local do formato do selecionador de data de material angular

Validador personalizado angular para entrada de horas no formato HHH: MM

Definir validação de entrada personalizada em formato angular

O selecionador de data do material 10 angular (mat-datepicker) não se alinha com os outros campos de entrada

Formato de data Angular Material DateRangePicker chenge superior esquerdo

Validação do filtro de material angular Datepicker

Alterar o estilo de entrada de material angular

usando arquivo de tipo de entrada com material angular 2

Formato de data mostrado no DatePicker

formato de data reactjs datepicker

TOP lista

quentelabel

Arquivo