Court moyen d'attribuer une date de ngbDatepicker

Je suis à l'aide de formes réactives dans mon Angulaire 2 webapp et je vais avoir des ennuis attribution de la date de ngbDatepicker (ngbootstrap 1 alpha 6). Mon objet est un objet date, tels que:

var myObject = {date: new Date(1, 9, 2016)};

et dans ma forme réactive, il est configuré de la manière suivante:

input.form-control(name='date', ngbDatepicker, #date="ngbDatepicker", placeholder='jj.mm.aaaa', formControlName='date', type="text")

et je patch le formulaire comme ceci:

this.form.patchValue({myObject: myObject});

Le problème est que ngbDatepicker prendre de la date avec la structure suivante:

{day: DD, month: MM, year: YYYY}

J'ai trouvé une solution de contournement qui n':

this.form.controls.myObject.controls.date.valueChanges
        .map((value) => {
            if(value) {
                if (typeof value.getMonth === 'function') {
                    this.form.controls.myObject.patchValue({
                        date: {
                            day: value.getUTCDay(),
                            month: value.getUTCMonth(),
                            year: value.getUTCFullYear()
                        }
                    });
                }
            }
            return value;
        })
        .subscribe((value) => {

        });

Et tout fonctionne comme prévu (la date est mise à jour chaque fois que formulaire est patché), mais il est trop verbeux (18 lignes de code) et mon formulaire a une douzaine de dates!

Donc ma question est puis-je obtenir le même résultat avec une période beaucoup plus courte de la solution?

déplacer le code dans une fonction et de l'appeler à partir de la carte.
Eh bien...je m'attendais à un plus solution créative à l'aide d'une directive ou d'une pipe!

OriginalL'auteur ncohen | 2016-10-02

  1. 2

    @ncohen nous remplir la douleur trop, voir: https://github.com/ng-bootstrap/ng-bootstrap/issues/754. Il n'y a pas de solution parfaite au moment et le, en fin de compte les besoins à venir de l'Angulaire de lui-même dans une forme de parsers /formateurs connu d'AngularJS. Il y a déjà 2 questions dans l'angle pensions que le suivi de votre cas d'utilisation comme une demande de fonctionnalité:

    Je crois que pour le moment, votre meilleure option est d'extraire verbose code pour une fonction d'utilité et de l'appeler quand la conversion est nécessaire (comme suggéré dans un des commentaires).

    Aussi: github.com/ng-bootstrap/ng-bootstrap/issues/839

    OriginalL'auteur pkozlowski.opensource

  2. 6

    Je ne sais pas si cela peut vous aider à

    ng-bootstrap: 1
angular: 2
bootstrap: 4

ngOnInit() {
const now = new Date();
const since = moment().subtract(14,'d').toDate();

this.model.fechaHasta = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
this.model.fechaDesde = {year: since.getFullYear(), month: since.getMonth() + 1, day: since.getDate()};
}

    HTML

    <div class="input-group">
    <input class="form-control" placeholder="yyyy-mm-dd"
                name="fechaHasta" [(ngModel)]="model.fechaHasta" ngbDatepicker #d10="ngbDatepicker">

    <div class="input-group-addon" (click)="d10.toggle()">
       <img src="../../shared/img/calendar-icon.png" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
    </div>
</div>
    Merci, résolu mon problème
    Merci, sa a fonctionné pour moi

    OriginalL'auteur Leonardo Ampuero

  3. 1

    Je viens de trouver votre question lors de la recherche d'une solution au même problème. Ce que j'ai fait est mis à profit momentjs, qui est une date/heure de la manipulation de la bibliothèque (http://momentjs.com), et je suis à la manipulation de dates à venir à partir de la base de données via momentjs avant de rapiéçage dans le formulaire et de l'initialisation de la ngbDatepicker.

    this.START_DATE est la valeur à partir de la base de données, et il vient comme une chaîne START_DATE : "2017-08-27"

    var _savedStartDate = moment(this.START_DATE).toObject();

var _savedStartDateObject = {day:0,month:0,year:0};

    _savedStartDateObject.day = _savedStartDate.date;
    _savedStartDateObject.month = _savedStartDate.months;
    _savedStartDateObject.year = _savedStartDate.years;

this.form.patchValue({
  START_DATE: _savedStartDateObject
})

    C'est plus détaillée que nécessaire, vous pouvez créer l'objet et affecter les attributs dans une ligne, mais c'est beaucoup plus lisible.

    Créer un moment de la date d'objet en passant de la date sous forme de chaîne en ce moment() de la fonction, et ensuite appeler la toObject fonction sur le résultat, ce qui vous donne un objet comme ceci: {years: 2017, months: 7, date: 27, hours: 0, minutes: 0, seconds: 0, milliseconds: 0}

    Puis créer un objet vide dans le format ngbDatepicker veut le voir {day:0,month:0,year:0} et mapper les attributs appropriés à partir du moment où l'objet dans le ngbDatepicker objet, puis d'appeler this.formpatchValue et passer dans l'objet nouvellement créé avec le format approprié.

    Pertinentes momentjs docs sont ici http://momentjs.com/docs/#/displaying/as-object/

    OriginalL'auteur Stephen R. Smith