web-dev-qa-db-fra.com

angular élément 2, modifiez le format de date "Date / Heure" de MM / JJ / AAAA en "JJ / MM / AAAA"

Je viens d'essayer de changer le angular matériau 2 date-picker format de date par défaut MM/JJ/AAAA à JJ/MM/AAAA ou JJ.MM.AAAA ou au moins JJ-MM-AAAA

Selon cette question et comme mentionné dans la documentation

providers: [{provide: MD_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS}]

Alors essayé les approches suivantes

Approche 1 plunkr : pour entrer au format JJ-MM-AAAA

Approche 2 plunkr : pour entrer au format DD.MM.YYYY

Approche plunkr : pour entrer au format JJ/MM/AAAA

mais chacune des approches ci-dessus fonctionne normalement jusqu'à ce que je sélectionne une date 1 à 12,

pour ex: aujourd'hui la date est le 25 septembre 2017 , si je sélectionne le 12 septembre 2017 comme date, puis une fois cliqué sur le bouton datepicker à nouveau, je peux voir la date du calendrier, prise le 09 novembre 2017 (09/11/2017) et non comme (11/09/2017), ce qui semble être le format de date par défaut qui n'est pas remplacé correctement

angulardatepickerangular-material2
18
Kelum Priyadarshane

1/DOCS: En personnalisant le format d'analyse et d'affichage avec un adaptateur de date personnalisé

Dans l'adaptateur de date personnalisé (vous utilisez AppDateAdapter), ajoutez une méthode d'analyse pour analyser le nouveau format de date (JJ/MM/AAAA) avec une date valide:

par exemple, pour le format JJ/MM/AAAA , l'analyse peut être:

   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);
  }

pileblitz de travail: https://stackblitz.com/edit/angular-material-datepicker-format?embed=1&file=app/date.adapter.ts

votre adaptateur de date complet:

export class AppDateAdapter 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: any): 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);
   } 
}

L’avantage de cette approche est que vous pouvez également personnaliser le format de monthYearLabel dans les constantes d’affichage et créer un calendrier ressemblant à ceci:

enter image description here

24
Fetrarij

Utilisez ceci dans votre app.module.ts sous le providers: tableau.

{provide: MAT_DATE_LOCALE, useValue: 'en-GB'}

59
Nalin Mathur

Une des solutions possibles consiste simplement à définir votre propre format d’entrée:

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

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [
        {provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format},
    ]
})
export class AppComponent implemets OnInit {
   // ... some code
}

Le code suivant indique à l’injecteur de renvoyer un DD_MM_YYYY_Format quand quelque chose demande le MAT_DATE_FORMATS _ (lisez ici pour plus de détails). Dans votre format personnalisé, propriété display.dateInput est réglé sur DD/MM/YYYY.

8
Marko

Version mise à jour de Fetrarij, pour le format de date jj.mm.aaaa avec le premier jour du lundi:

  • dans app.module.ts:
 
    { provide: MAT_DATE_LOCALE, useValue: 'sk-SK' },
  • extension de l'adaptateur de date:
 

    @Injectable()
    export class DateAdapterSK extends NativeDateAdapter {

        getFirstDayOfWeek(): number {
            return 1;
        }

        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);
        }

    }

Travaille pour moi. Angular 6.

0
bmi