Angular 2 Material 2 format de date du datepicker

Question

J'ai besoin d'aide. Je ne sais pas comment changer le format de date du material 2 datepicker. J'ai lu la documentation mais je ne comprends pas ce que je dois réellement faire. Le format de date de sortie fourni par défaut est par exemple : 6/9/2017

Ce que j'essaie d'atteindre est de changer le format en 9-Juin-2017 ou autre.

La documentation https://material.angular.io/components/component/datepicker ne m'aide pas du tout. Merci d'avance

Answer 1

Voici la seule solution que j'ai trouvée pour celle-ci :

Tout d'abord, créez const :

const MY_DATE_FORMATS = {
   parse: {
       dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
   },
   display: {
       // dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
       dateInput: 'input',
       monthYearLabel: {year: 'numeric', month: 'short'},
       dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
       monthYearA11yLabel: {year: 'numeric', month: 'long'},
   }
};

Ensuite, vous devez étendre NativeDateADapter :

export class MyDateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat: Object): string {
       if (displayFormat == "input") {
           let day = date.getDate();
           let month = date.getMonth() + 1;
           let year = date.getFullYear();
           return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
       } else {
           return date.toDateString();
       }
   }

   private _to2digit(n: number) {
       return ('00' + n).slice(-2);
   } 
}

Dans la fonction de format, vous pouvez choisir le format que vous voulez

Et enfin, la dernière étape, vous devez l'ajouter dans les fournisseurs de module :

providers: [
    {provide: DateAdapter, useClass: MyDateAdapter},
    {provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS},
],

Et c'est tout. Je ne peux pas croire qu'il n'y ait pas de moyen facile de changer le format de la date via @Input mais espérons que cela sera implémenté dans une future version de material 2 (actuellement beta 6).

Answer 2

La réponse d'Igor ne fonctionnait pas pour moi, donc j'ai demandé directement sur Angular 2 Material's github et quelqu'un m'a donné cette réponse qui a fonctionné pour moi :

1. Commencez par écrire votre propre adaptateur :

   import { NativeDateAdapter } from "@angular/material";
   
   export class AppDateAdapter extends NativeDateAdapter {
   
      format(date: Date, displayFormat: Object): string {
   
          if (displayFormat === 'input') {
   
              const day = date.getDate();
              const month = date.getMonth() + 1;
              const year = date.getFullYear();
   
              return `${day}-${month}-${year}`;
          }
   
          return date.toDateString();
      }
   }

2. Créez votre format de date :

   export const APP_DATE_FORMATS = {
      parse: {
          dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
      },
      display: {
          dateInput: 'input',
          monthYearLabel: { year: 'numeric', month: 'numeric' },
          dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
          monthYearA11yLabel: { year: 'numeric', month: 'long' },
      }
   };

3. Fournissez ces deux éléments à votre module

   providers: [
          {
              provide: DateAdapter, useClass: AppDateAdapter
          },
          {
              provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
          }
      ]

Plus d'informations ici

EDIT: Pour ceux qui rencontrent des problèmes avec la saisie manuelle ne respectant pas le format, vous pouvez remplacer la fonction parse(value: any) de NativeDateAdapter comme suit.

parse(value: any): Date | null {
   const date = moment(value, 'DD/MM/YYYY');
   return date.isValid() ? date.toDate() : null;
}

Ainsi, l'adaptateur personnalisé prendra la forme finale suivante.

import { NativeDateAdapter } from "@angular/material";
import * as moment from 'moment';

export class AppDateAdapter extends NativeDateAdapter {

   format(date: Date, displayFormat: Object): string {
       if (displayFormat === 'input') {

           const day = date.getDate();
           const month = date.getMonth() + 1;
           const year = date.getFullYear();

           return `${day}/${month}/${year}`;
       }

       return date.toDateString();
   }

   parse(value: any): Date | null {
       const date = moment(value, environment.APP_DATE_FORMAT);
       return date.isValid() ? date.toDate() : null;
   }
}

Answer 3

Vous devez simplement fournir un MAT_DATE_FORMATS personnalisé

export const APP_DATE_FORMATS = {
    parse: {dateInput: {month: 'short', year: 'numeric', day: 'numeric'}},
    display: {
        dateInput: {month: 'short', year: 'numeric', day: 'numeric'},
        monthYearLabel: {year: 'numeric'}
    }
};

et l'ajouter aux fournisseurs.

fournisseurs: [{
   provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
}]

Code fonctionnel

Answer 4

La solution qui fonctionne pour moi est :

my.component.html:

my.component.ts :

@Component({...
})
export class MyComponent implements OnInit {
  ....
  public someDate: Date;
  ...

Maintenant vous pouvez avoir le format (Ex. 'd-MMM-y') qui fonctionne le mieux pour vous.

Answer 5

Il y a de fortes chances que vous utilisiez déjà une bibliothèque qui vous offre un moyen pratique de manipuler (analyser, valider, afficher, etc.) des dates et heures en JavaScript. Si ce n'est pas le cas, jetez un œil à l'une d'entre elles, par exemple moment.js.

Implémenter votre adaptateur personnalisé en utilisant moment.js ressemblerait à ceci.

Créez CustomDateAdapter.ts et implémentez-le comme ceci:

import { NativeDateAdapter } from "@angular/material";
import * as moment from 'moment';

export class CustomDateAdapter extends NativeDateAdapter {
    format(date: Date, displayFormat: Object): string {
        moment.locale('ru-RU'); // Choisissez le paramètre régional
        var formatString = (displayFormat === 'input')? 'DD.MM.YYYY' : 'LLL';
        return moment(date).format(formatString);
    }
}

Dans votre app.module.ts:

import { DateAdapter } from '@angular/material';

providers: [
    ...
    {
        provide: DateAdapter, useClass: CustomDateAdapter
    },
    ...
]

C'est tout. Simple, facile et pas besoin de réinventer la roue.