angular2 Zugriff ngModel Variable von einer Direktive

Question

Ich versuche, eine Datetime-Picker-Direktive wie folgt zu erstellen.
<input [(ngModel)]="date1" datetime-picker date-only />

und date1 wird als Datum zugewiesen, zum Beispiel new Date()

Wenn ich dies in HTML-Anzeige, Text in Eingabeelement sieht wie folgt aus
Thu Jan 01 2015 00:00:00 GMT-0500

Ich mag die angezeigt werden sollen statt
2015-01-01 00:00:00

Ich möchte Datum WITHIN ad formatieren Irective mit DatePipe anstelle von Ergebnis von Standard zu String() -Funktion anzuzeigen.

Meine Frage ist; "Wie kann ich innerhalb einer Direktive auf die ngModel-Variable zugreifen?", z. B. date1, so dass ich die Methode toString() hinzufügen kann.

Wenn mein Ansatz nicht richtig ist, bitte informieren Sie mich.

Answer 1

Für den Zugriff auf ngModel können Sie einfach eine @Input() in Ihrem datetime-picker haben. Und da Sie eine 2-Wege-Datenbindung verwenden, müssen Sie die vorgenommenen Änderungen an ngModel senden.

@Directive({ 
    selector:'[date-time-picker]' 
}) 
export class DateTimePicker{ 
    @Input() ngModel; 
    @Output() ngModelChange = new EventEmitter(); 

    ngOnInit(){ 
    this.ngModelChange.emit(this.ngModel.toDateString()); 
    } 
} 

Check this plunk

---

Der bessere Weg IMHO, wird mit der DatePipe

@Component({ 
    selector: 'my-app', 
    directives:[DateTimePicker], 
    template: ` 
     <input (ngModelChange)="myDate = $event" [ngModel]="myDate | date:'short'" datetime-picker /> 
    ` 
}) 
export class AppComponent { 
    myDate = new Date(); 
} 

Check this plunk

Answer 2

Hier ist einfache Art und Weise ngModel zu hören und informieren. Ich habe gerade mit jQuery zum besseren Verständnis demonstriert. Praktisch kann es alles sein.

import { Directive, ElementRef } from '@angular/core'; 
import { NgModel } from '@angular/forms'; 

@Directive({ 
    selector: `[ngModel][customDir]`, 
    providers: [NgModel] 
}) 
export class CustomDirective { 


    constructor(private element: ElementRef, private ngModel: NgModel) { 

    } 

    ngOnInit() { 
     let that = this; 
     /* Here you can write custom initialization code */ 

     /* Listening to the value of ngModel */ 
     that.ngModel.valueChanges.subscribe(function (value) { 
      /* Set any value of your custom control */ 
      $(that.element.nativeElement).data("newValue",value); 
     }); 

     /* Inform ng model for any new change happened */ 
     $(that.element.nativeElement).bind("customEvent",function (someNewValue) { 
       that.ngModel.update.emit(someNewValue); 
      } 
     }); 
    } 
}