angulaire des matériaux 2, changement datepicker Date au Format “JJ/MM/AAAA” “DD/MM/YYYY” comportement étrange

J'ai juste essayé de changer l'angle de matériel 2 date-sélecteur de Format de Date par défaut MM/JJ/AAAA à JJ/MM/AAAA ou DD.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}]

Donc essayé de suivre des approches

Approche 1 plunkr : être en JJ-MM-AAAA format

Approche 2 plunkr : être en DD.MM.AAAA format

Approche 3 plunkr : être en JJ/MM/AAAA format

mais chaque de au-dessus de l'approche de travail ordinaire jusqu'à ce que je sélectionner un Date 1 à 12,

ex: date d'aujourd'Hui est 25 septembre 2017, si je sélectionne 12 septembre 2017 que la date, puis une fois sur datepicker nouveau sur le bouton, je peux voir le calendrier la date, pris en date du 09 novembre 2017(09/11/2017) pas comme (11/09/2017) , qui est semble-format de date par défaut remplace pas correctement

InformationsquelleAutor Kelum Priyadarshane | 2017-09-24

24

1/DOCS: Par cusomising les analyser et de les afficher au format de date personnalisé atapter

Dans la coutume de la Date de l'Adaptateur (le vôtre est AppDateAdapter), ajouter une méthode d'analyse pour analyser le nouveau format de la date (JJ/MM/AAAA) à une date valide date:

par exemple pour la JJ/MM/AAAA format, l'analyse pourrait ê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);
  }
```
de travail stackblitz: https://stackblitz.com/edit/angular-material-datepicker-format?embed=1&fichier=application/jour.l'adaptateur.ts

votre date complète de l'adaptateur:
```
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 de vous pourrait aussi personnaliser le format de monthYearLabel dans l'affichage des constantes et pourrait avoir un calendrier qui ressemble à:
- merci c'est digne de beaucoup 🙂
- merci, mais changer ce à 2017/06/28 ne finissent à la situation bizarre.
- comment est-ce? il y travaille incorporer.plnkr.co/qp86UWC3QlkcXmBo3UaS
- R. bien, disons-le de cette façon: je n'ai modifié cette ligne de retour cette._to2digit(jour) + '/' + ce._to2digit(mois) + '/' + an; an + '/'+ ce._to2digit(jour) + '/' + ce._to2digit(mois); N'est-il pas suffisant?
- Ce que vous venez d'ajouter est en fait le travail! Merci!!!!
- Cette brokes si l'entrée est numérique...serait-il mauvais pour ajouter un "displayFormat" pour enregistrer le format sélectionné dans le format de la méthode?
- Et pourquoi "displayFormat" devrait être un Objet si en fait c'est une chaîne de caractères?
- Le plunker est en fait ne fonctionne plus
- mis à jour avec stackblitz
- J'ai créé un simple et facilement personnalisable DateAdapter à l'aide de Day.js et créé un Résumé de celui-ci: gist.github.com/wottpal/4211f4c01c41b16be181110273cff5a9
- vraiment sympa solution. Mais il semble y avoir un problème. Essayez de taper une date non valide directement dans l'entrée déposée. Par exemple 88/88/8888 et il est converti en une date aléatoire dès que le curseur passe en dehors du terrain. En dehors de cela est-il normal que chaque fois que j'ouvre un datepicker la fonction format est appelé 30/31(nombre de jours dans les monts) fois?
InformationsquelleAutor Fetrarij
62

L'utiliser dans vos app.module.ts en vertu de la providers: tableau.

{provide: MAT_DATE_LOCALE, useValue: 'en-GB'}
- useValue: 'en-AU' fonctionne bien aussi
- La meilleure solution, simple et fonctionne bien!
- A fonctionné comme un charme!!!!!!!!!!! Merci beaucoup..
- c'est ce qu'il a essayé au début, et il agit toujours bizarre
- Merci man! J'ai eu le même problème et je l'ai utilisé juste " nl " avant de. Avec "nl-NL' il fonctionne correctement.
- yep cela fonctionne, mais vous devez l'importer dans votre application.module d'importation { MAT_DATE_LOCALE } à partir de '@angulaire/matériel';
- Grand.. sans doute la façon la plus simple...merci pour le partage
InformationsquelleAutor Nalin Mathur

L'une des solution est tout simplement de 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 sur le retour d'un DD_MM_YYYY_Format quand quelque chose demande le MAT_DATE_FORMATS (lire ici pour plus de détails). À l'intérieur de votre format personnalisé, propriété display.dateInput est fixé à DD/MM/YYYY.

InformationsquelleAutor Marko

Version mise à jour de Fetrarij, pour le format de date jj.mm.aaaa avec la première journée de lundi:

dans l'app.le module.ts:

 
    { provide: MAT_DATE_LOCALE, useValue: 'sk-SK' },

date de l'adaptateur d'extension:

 

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

    }

De travail pour moi. Angulaire 6.

InformationsquelleAutor bmi

0

L'utiliser sur votre module du fournisseur de la section
```
{provide: MAT_DATE_LOCALE, useValue: 'en-GB'}
```
InformationsquelleAutor Abdus Salam Azad

Vous devez vous connecter pour publier un commentaire.