Est-il correct d'implémenter un NgbDateParserFormatter personnalisé pour changer le format de la valeur d'entrée sur NgbInputDatepicker ?

Question

J'utilise le sélecteur de date ( ng-boostrap ) dans une fenêtre popup et je voudrais changer le format de la date en dd-mm-yyyy .

Il semble que ce problème puisse être résolu en mettant en œuvre une nouvelle NgbDateParserFormatter pour remplacer l'option par défaut NgbDateISOParserFormatter .

Mais je me demandais s'il y avait un autre moyen.

UPDATE :

Une petite mise en œuvre de NgbDateParserFormatter en utilisant Moment.js (testé avec la version 1.0.0-alpha.14 de ng-bootstrap) :

import {NgbDateParserFormatter, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
import * as moment from 'moment';

export class NgbDateMomentParserFormatter extends NgbDateParserFormatter {
    constructor(private momentFormat: string) {
        super();
    };
    format(date: NgbDateStruct): string {
        if (date === null) {
            return '';
        }
        let d = moment({ year: date.year, 
                         month: date.month - 1, 
                         date: date.day });
        return d.isValid() ? d.format(this.momentFormat) : '';
    }

    parse(value: string): NgbDateStruct {
        if (!value) {
            return null;
        }
        let d = moment(value, this.momentFormat);
        return d.isValid() ? { year: d.year(), 
                               month: d.month() + 1, 
                               day: d.date() } : null;
    }
}

Et dans un module, vous incluez le fournisseur en utilisant une usine pour indiquer le format de date comme paramètre :

---

@NgModule({

  ---

  providers: [
    { 
      provide: NgbDateParserFormatter, 
      useFactory: () => { return new NgbDateMomentParserFormatter("DD-MM-YYYY") } 
    }
  ]

  ---

})

Answer 1

À partir d'aujourd'hui, la mise en œuvre d'une NgbDateParserFormatter est le meilleur moyen d'y parvenir. Donc oui, c'est une façon correcte.

À l'avenir, nous pourrions avoir une mise en œuvre plus sophistiquée de la fonction NgbDateParserFormatter où vous pourrez simplement passer un format souhaité (ex. yyyy-MM-dd ). L'ajout de cette fonctionnalité dépendra de l'intérêt de l'utilisateur.

Vous pouvez également consulter d'autres informations de fond dans https://github.com/ng-bootstrap/ng-bootstrap/issues/754#issuecomment-247767027

Answer 2

Créer un formateur d'analyseur personnalisé.

import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';

@Injectable()
export class NgbDateCustomParserFormatter extends NgbDateParserFormatter {

  format(date: NgbDateStruct): string {
    return date ? `${isNumber(date.day) ? padNumber(date.day) : ''}-${isNumber(date.month) ? padNumber(date.month) : ''}-${date.year}` : '';
  }
}

Définissez le fournisseur du formateur d'analyseur personnalisé dans le @NgModule.

providers: [
    {provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter}
]

Comme décrit dans le api