web-dev-qa-db-fra.com

angular2 ngbdatepicker comment formater la date dans le champ de saisie

J'utilise ng-bootstrapDatepicker . Je souhaite formater une date affichée dans le champ de saisie qui est modèle. J'ai regardé l'API et je n'ai trouvé aucun autre exemple que NgbDateParserFormatter sans expliquer beaucoup :(

Dans Angular 1, c'était aussi simple que d'ajouter un attribut format="MM/dd/yyyy". Quelqu'un peut-il aider?

angularng-bootstrap
10
d-man

J'ai créé un issue et y ai obtenu une réponse.

4
d-man

"Par défaut, le sélecteur de dates est livré avec l'implémentation de base de cette interface qui accepte uniquement les dates au format ISO. Si vous souhaitez gérer un format différent (ou plusieurs formats), vous pouvez fournir votre propre implémentation de NgbDateParserFormatter et l'enregistrer en tant que fournisseur dans votre module. " Source

Dans ce GitHub Gist vous pouvez trouver un exemple d'implémentation. Voici une copie de cette source:

app.component.ts

import { NgbDatepickerConfig, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { NgbDateFRParserFormatter } from "./ngb-date-fr-parser-formatter"

@Component({
    providers: [{provide: NgbDateParserFormatter, useClass: NgbDateFRParserFormatter}]
})
export class AppComponent {}

ngb-date-fr-parser-formatter.ts

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

function padNumber(value: number) {
    if (isNumber(value)) {
        return `0${value}`.slice(-2);
    } else {
        return "";
    }
}

function isNumber(value: any): boolean {
    return !isNaN(toInteger(value));
}

function toInteger(value: any): number {
    return parseInt(`${value}`, 10);
}


@Injectable()
export class NgbDateFRParserFormatter extends NgbDateParserFormatter {
    parse(value: string): NgbDateStruct {
        if (value) {
            const dateParts = value.trim().split('/');
            if (dateParts.length === 1 && isNumber(dateParts[0])) {
                return {year: toInteger(dateParts[0]), month: null, day: null};
            } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
                return {year: toInteger(dateParts[1]), month: toInteger(dateParts[0]), day: null};
            } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
                return {year: toInteger(dateParts[2]), month: toInteger(dateParts[1]), day: toInteger(dateParts[0])};
            }
        }   
        return null;
    }

    format(date: NgbDateStruct): string {
        let stringDate: string = ""; 
        if(date) {
            stringDate += isNumber(date.day) ? padNumber(date.day) + "/" : "";
            stringDate += isNumber(date.month) ? padNumber(date.month) + "/" : "";
            stringDate += date.year;
        }
        return stringDate;
    }
}
17
Javan R.