J'utilise ng-bootstrap datepicker mais lorsque j'enregistre mon formulaire, la date est enregistrée sous.
date: {
day: 01,
month: 12,
year: 16
}
J'espérais pouvoir le faire enregistrer comme quelque chose de plus comme "2016-11-23T00:39:31.768Z"
Voici ma mise en œuvre:
<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>
Et form.component:
constructor( private fb: FormBuilder ) {
this.form = this.fb.group({
due_date: [''],
});
}
Vous utilisez ng-bootstrap et non ng2-bootstrap (différents groupes). Le code derrière elle utilise le NgbDateStruct
qui est un objet { day, month, year }
Lors de la soumission, vous devrez vous connecter et changer la valeur en quelque chose d'autre, comme:
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
Interface NgbDateStruct du modèle des directives NgbDatepicker et NgbInputDatepicker
Propriétés
jour Type: nombre Le jour du mois, commençant à 1
month Type: nombre Le mois, avec le calendrier par défaut, nous utilisons ISO 8601: 1 = Jan ... 12 = Dec
année Type: nombre L'année, par exemple 2016
Comme l'a mentionné @silentsod, vous devez convertir l'objet de date utilisé par le sélecteur de dates du format NgbDateStruct
au format string
. ng-bootstrap fournit une fonction pour convertir une date au format NgbDateStruct
en ISO 8601
format ( aaaa-mm-jj ). Vous n'avez pas à écrire le vôtre si vous utilisez ce format:
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
...
}
Voir: https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/ngb-date-parser-formatter.ts
Vous pouvez implémenter votre propre méthode pour la convertir au format DD-MM-YYYY dont vous avez besoin.
Ou selon l'ordre des éléments dans l'instruction return et un séparateur, vous pouvez créer tout autre format que vous souhaitez.
La mise en oeuvre:
formatDate(d: NgbDate): string {
if (d === null) {
return null;
}
return [
(d.day < 10 ? ('0' + d.day) : d.day),
(d.month < 10 ? ('0' + d.month) : d.month),
d.year
].join('-');
}