Lier une entrée avec le type datetime-local à une propriété Date dans Angular 2

Il est possible de lier une propriété d'un composant de type Date pour une entrée HTML5 avec le type d'ensemble de datetime-local?

Dans mon composant j'ai matériels:

public filterDateFrom: Date;

et dans mon template j'ai une entrée définie comme:

<input type="datetime-local" [(ngModel)]="filterDateFrom" />

mais la liaison ne fonctionne pas.

source d'informationauteur Dominik Palo

Démo Plnkr

Vous pouvez lier à une date en utilisant le format suivant: yyyy-MM-ddTHH:mmvous pouvez également obtenir de date.toISOString().slice(0,16) (la tranche supprime la partie heure après le procès-verbal).

@Component({
    selector: 'app',
    template: `<input type="datetime-local" [value]="date" 
          (change)="date=$event.target.value" /> {{date}}` 
})
export class AppComponent {
    date: string;
    constructor() {
        this.date = new Date().toISOString().slice(0, 16);
    }
}

Gardez à l'esprit que date.toISOString() sera de retour un jour de décalage de l'heure locale. Vous pouvez également construire la chaîne de date vous-même:

private toDateString(date: Date): string {
    return (date.getFullYear().toString() + '-' 
       + ("0" + (date.getMonth() + 1)).slice(-2) + '-' 
       + ("0" + (date.getDate())).slice(-2))
       + 'T' + date.toTimeString().slice(0,5);
}

Si vous voulez être en mesure de lier le sélectionner pour un Date modèle, vous pouvez l'utiliser pour construire une coutume composant de date:

@Component({
selector: 'my-date',
events: ['dateChange'],
template: `<input type="datetime-local" [value] = "_date" 
(change) = "onDateChange($event.target.value)" />`
})
export class MyDate{
private _date: string;
@Input() set date(d: Date) {
this._date = this.toDateString(d);
}
@Output() dateChange: EventEmitter<Date>;
constructor() {
this.date = new Date();
this.dateChange = new EventEmitter();       
}
private toDateString(date: Date): string {
return (date.getFullYear().toString() + '-' 
+ ("0" + (date.getMonth() + 1)).slice(-2) + '-' 
+ ("0" + (date.getDate())).slice(-2))
+ 'T' + date.toTimeString().slice(0,5);
}
private parseDateString(date:string): Date {
date = date.replace('T','-');
var parts = date.split('-');
var timeParts = parts[3].split(':');
//new Date(year, month [, day [, hours[, minutes[, seconds[, ms]]]]])
return new Date(parts[0], parts[1]-1, parts[2], timeParts[0], timeParts[1]);     //Note: months are 0-based
}
private onDateChange(value: string): void {
if (value != this._date) {
var parsedDate = this.parseDateString(value);
//check if date is valid first
if (parsedDate.getTime() != NaN) {
this._date = value;
this.dateChange.emit(parsedDate);
}
}
}
}

Les utilisateurs de votre composant se lient à un Date modèle à deux voies de la liaison de modèle:

@Component({
selector: 'my-app',
directives: [MyDate],
template: '<my-date [(date)]="date"></my-date>  {{date}}' 
})
export class AppComponent {
@Input() date: Date;
constructor() {
this.date = new Date();
}
}

Ou si vous voulez éviter des balises personnalisées, réécrire le composant en tant que directive:

<input type="datetime-local" [(date)]="date" />

Démo Plnkr à la Directive

5

Maintenant que son Printemps 2017, DatePipe est livré OOTB. Vous pouvez obtenir (one-way) de liaison en spécifiant les paramètres de format pour le tuyau. Par exemple:
```
<input type="datetime-local" [ngModel]="filterDateFrom | date:'yyyy-MM-ddTHH:mm'" />
```
Légère mise en garde est que vous avez à gérer ensuite les DOM --> côté du modèle de choses à gérer les changements du client à la commande (sauf que je suis absent quelque chose!), mais il semble beaucoup plus propre de cette façon.

Mise à jour

Semble que j'ai été bien raté quelque chose!

Ajoutant ngModelChange à la ci-dessus doivent fournir les DOM --> côté du modèle de la liaison bidirectionnelle processus:
```
<input type="datetime-local" 
[ngModel]="filterDateFrom | date:'yyyy-MM-ddTHH:mm'
(ngModelChange)="filterDateFrom = $event" />
```

Vous devez vous connecter pour publier un commentaire.

Mise à jour