1
votes

Comment puis-je personnaliser le format de la date et de l'heure dans ngx-mat-datetime-picker?

Je travaille sur Angular7 et son ngx-mat-datetime-picker compatible. Cela fonctionne comme prévu.

Vous souhaitez personnaliser le format:

Réel: mm / jj / aaaa, hh: mm: ss Attendu: aaaa-mm-jj hh: mm: ss

Actuellement, je ne trouve aucune option pour le formatage.

J'ai essayé quelque chose comme ça dans le modèle value = "{{mydate | date: 'aaaa-mm-jj hh: mm: ss'}}

Mais ne fonctionne pas.

angular angular8 angular-material angular-material2 date-pipe

0 commentaires

3 Réponses :

0
votes

Créez une constante: (insérez votre format préféré)

9/4/2020, 1:11 PM

Fournissez:

{provide: NGX_MAT_DATE_FORMATS, useValue: DATE_TIME_FORMAT}

résultat (avec mon format supprimant les secondes) :

export const DATE_TIME_FORMAT = {
  parse: {
    dateInput: 'l, LT',
  },
  display: {
    dateInput: 'l, LT',
    monthYearLabel: 'MM yyyy',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  }

0 commentaires

3
votes

Vous devez créer un adaptateur personnalisé et spécifier les formats personnalisés

const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
  parse: {
    dateInput: 'l, LTS'
  },
  display: {
    dateInput: 'YYYY-MM-DD HH:mm:ss',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  }
};

@NgModule({
  providers: [
    {
      provide: NgxMatDateAdapter,
      useClass: CustomNgxDatetimeAdapter,
      deps: [MAT_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
  ],
})
export class CustomNgxDateTimeModule { }

Veuillez trouver le CustomNgxDatetimeAdapter.ts à partir de l'essentiel ci-dessous

https://gist.github.com/nandhakumargdr/635af05419793e15f3758656ddd1ef a

//i.stack.imgur.com/6BKHe.png "rel =" nofollow noreferrer "> entrez la description de l'image ici

Je l'ai testé. Cela fonctionne!

4 commentaires

Faites-moi savoir si vous avez besoin de la classe CustomNgxDatetimeAdapter. Je mettrai à jour la réponse avec le code CustomNgxDatetimeAdapter.

Veuillez ajouter la classe CustomNgxDatetimeAdapter

Modification de la réponse, veuillez trouver l'essentiel

gist.github.com/nandhakumargdr/635af05419793e15f3758656ddd1e je l'attache ici.

0
votes

Vous pouvez trouver plus d'exemples ici https://github.com/h2qutc / angular-material-components / issues / 27

0 commentaires