Kurzer Weg zu weisen-Datum ngbDatepicker

Ich bin mit reaktiven Formen in meinem Eckige 2-webapp und ich bin die Probleme der Zuordnung von Datum zu ngbDatepicker (ngbootstrap 1-alpha-6). Mein Objekt hat eines date-Objekts wie:

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

und in meinem reaktive form, es ist so konfiguriert, wie folgt:

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

und ich patch das Formular wie dieses:

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

Das problem ist, dass ngbDatepicker nehmen Sie das Datum mit der folgenden Struktur:

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

Ich fand einen workaround, der funktioniert:

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) => {

        });

Und alles funktioniert wie erwartet (das Datum wird jedesmal aktualisiert, wenn form bekommt gepatcht) aber es ist viel zu ausführlich (18 Zeilen code) und meine form hat ein Dutzend Termine!

Also meine Frage ist kann ich das erreichen das gleiche Ergebnis mit einem viel kürzere Lösung?

verschieben Sie den code in eine Funktion und rufen Sie es von der Karte.
Naja...ich erwartete eine kreative Lösung, die mit einer Richtlinie oder einem Rohr!

InformationsquelleAutor ncohen | 2016-10-02

  1. 2

    @ncohen wir füllen die Schmerzen zu finden: https://github.com/ng-bootstrap/ng-bootstrap/issues/754. Es gibt keine perfekte Lösung, auf den moment und die letztlich von Winkel-selbst in form von Parser /Formatierer bekannt von AngularJS. Es gibt schon 2 Themen in das Eckige repo, verfolgen Sie Ihre use-case als ein feature-request:

    Ich glaube, dass jetzt die beste option ist, um zu extrahieren verbose code, um eine utility-Funktion, und rufen Sie, wenn die Konvertierung benötigt wird (wie bereits in einem der Kommentare).

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

    InformationsquelleAutor pkozlowski.opensource

  2. 5

    Ich weiß nicht, ob es helfen könnte, Sie

    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>
    Danke, mein Problem gelöst
    Vielen Dank, seine arbeitete für mich

    InformationsquelleAutor Leonardo Ampuero

  3. 1

    Ich habe gerade festgestellt, dass Ihre Frage, während Sie auf der Suche nach einer Lösung für das gleiche problem. Was ich getan habe, ist leveraged momentjs, die ein Datum/Zeit-manipulation-Bibliothek (http://momentjs.com), und ich bin die Manipulation von Daten kommen aus der Datenbank über momentjs patchen, bevor Sie in die form und das initialisieren des ngbDatepicker.

    this.START_DATE ist der Wert aus der Datenbank, und es kommt als string 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
})

    Dies ist Ausführlicher, als es sein muss, könnte man das Objekt erstellen, und ordnen Sie die Attribute in einer Zeile, aber dieses ist viel besser lesbar.

    Schaffen im Grunde ein moment date-Objekt durch übergabe das Datum als string in dem moment () - Funktion, und rufen Sie dann die toObject-Funktion auf das Ergebnis, das Ihnen ein Objekt wie diese: {years: 2017, months: 7, date: 27, hours: 0, minutes: 0, seconds: 0, milliseconds: 0}

    Erstellen Sie dann ein leeres Objekt im format ngbDatepicker es sehen will {day:0,month:0,year:0}, und ordnen Sie die entsprechenden Attribute aus dem moment-Objekt in der ngbDatepicker Objekt, dann rufen Sie this.formpatchValue und übergeben das neu erstellte Objekt mit dem entsprechenden format.

    Relevanten momentjs docs sind hier http://momentjs.com/docs/#/displaying/as-object/

    InformationsquelleAutor Stephen R. Smith

Schreibe einen Kommentar