2016-11-24 5 views
3

Ich benutze ng-bootstrap datepicker, aber wenn ich mein Formular speichern, wird das Datum als gespeichert.ng-bootstrap datepicker format

date: { 
    day: 01, 
    month: 12, 
    year: 16 
} 

Ich hatte gehofft, ich es als etwas mehr wie "2016-11-23T00:39:31.768Z"

Hier ist meine Implementierung zu speichern bekommen konnte:

<div class="input-group"> 
    <button class="input-group-btn" (click)="d.toggle()" > 
    <md-icon svgSrc="assets/images/calendar-plus.svg" style="cursor: pointer;"></md-icon> 
    </button> 
    <input class="form-control" placeholder="dd-mm-yyyy" name="dp" formControlName="due_date" navigation="arrows" ngbDatepicker #d="ngbDatepicker"> 
</div> 

Und form.component:

constructor(private fb: FormBuilder) { 
    this.form = this.fb.group({ 
     due_date: [''], 
    }); 
    } 

Antwort

6

Sie benutze ng-bootstrap nicht ng2-bootstrap (verschiedene Gruppen). Der Code dahinter nutzt die NgbDateStruct, die ein Objekt { day, month, year }

Bei der Vorlage ist, dass Sie in einzuhaken benötigen und den Wert auf etwas ändern anderes, wie:

onSubmit(): { 
    let ngbDate = this.form.controls['due_date'].value; 
    let myDate = new Date(ngbDate.year, ngbDate.month-1, ngbDate.day); 
    let formValues = this.form.value; 
    formValues['due_date'] = myDate; 
    <...> 
    http.post(url, formValues); 
} 

https://ng-bootstrap.github.io/#/components/datepicker

NgbDateStruct Schnittstelle des Modells der NgbDatepicker und NgbInputDatepicker Direktiven

Immobilien

Tag Typ: Anzahl Der Tag des Monats, beginnend bei 1

Monat Typ: Anzahl der Monat, mit Standard-Kalender verwenden wir ISO 8601: 1 = Jan ... 12 = Dezember

Jahr Typ: Anzahl der Jahre, zum Beispiel 2016

+10

Es verwirrt mich, warum sie beschlossen, ihr eigenes kleinen Date-Objekt zu erfinden, anstatt nur ein Standard-Date-Objekt verwenden. Ich kann mir keinen vernünftigen Grund dafür vorstellen, und ich hasse es, extra Code schreiben zu müssen, um sie in ihr Format zu konvertieren. – Davy

5

Wie @silentsod erwähnt, das Datum Objekt konvertieren müssen, dass die Datumsauswahl aus der verwendet NgbDateStruct forma t in ein string Format. ng-bootstrap bietet eine Funktion zum Konvertieren eines Datums im Format NgbDateStruct in das Format ISO 8601 (yyyy-mm-dd). Sie müssen nicht Ihre eigenen schreiben, wenn dieses Format verwenden:

import {NgbDateParserFormatter} from '@ng-bootstrap/ng-bootstrap'; 

... 

constructor(private ngbDateParserFormatter: NgbDateParserFormatter; ...) { 
    ... 
} 

... 

onSubmit(): { 
    let ngbDate = this.form.controls['due_date'].value; 
    let myDate = this.ngbDateParserFormatter.format(ngbDate); // e.g. myDate = 2017-01-01 
    ... 
} 

See: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/ngb-date-parser-formatter.ts

Verwandte Themen