dostęp kątowy2 Zmienna modelModel z dyrektywy

Question

Próbuję zbudować dyrektywy wyboru pliku datetime, jak poniżej.
<input [(ngModel)]="date1" datetime-picker date-only />

i date1 jest przypisany jako data, np new Date()

Kiedy wyświetli to w HTML, tekst w elemencie wejściowego wygląda następującym
Thu Jan 01 2015 00:00:00 GMT-0500

chcę wyświetlić jakby zamiast tego należy wpisać
2015-01-01 00:00:00

Chcę sformatować datę W reklamie z użyciem DatePipe zamiast wyświetlać wynik z domyślnej funkcji toString().

Moje pytanie brzmi; "w ramach dyrektywy, jak uzyskać dostęp do zmiennej ngModel?", np. date1, aby móc dodać metodę toString().

Jeśli moje podejście nie jest właściwe, proszę mi doradzić.

Answer 1

Aby uzyskać dostęp do ngModel, wystarczy po prostu mieć @Input() w swoim datetime-picker. A ponieważ używasz dwukierunkowego powiązania danych, musisz wyemitować zmiany wprowadzone do ngModel.

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

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

Check this plunk

---

Lepszym sposobem IMHO, używa 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

Tutaj jest prosty i łatwy sposób, aby słuchać i powiadomić ngModel. Właśnie pokazałem z jQuery dla łatwego zrozumienia. Praktycznie może to być cokolwiek.