angular2 access ngModel variabile da una direttiva

Question

Sto provando a creare una direttiva di selezione datetime come la seguente.
<input [(ngModel)]="date1" datetime-picker date-only />

e date1 viene assegnato come una data, ad esempio, new Date()

Quando visualizzo questo in html, testo in elemento di input si presenta come il seguente
Thu Jan 01 2015 00:00:00 GMT-0500

voglio visualizzare come il seguente invece
2015-01-01 00:00:00

Desidero formattare la data ENTRO annuncio irettiva usando DatePipe invece di mostrare il risultato dalla funzione toString() predefinita.

La mia domanda è; "all'interno di una direttiva, come posso accedere alla variabile ngModel?", ad esempio, data1, in modo da poter aggiungere il metodo toString().

Se il mio approccio non è corretto, si prega di avvisare.

Answer 1

Per accedere a ngModel, è sufficiente disporre di un @Input() nel numero datetime-picker. E dal momento che stai utilizzando l'associazione dati bidirezionale, devi emettere le modifiche apportate a 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

---

Il modo migliore secondo me, sta utilizzando il 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

Qui è modo semplice e facile da ascoltare e comunicare ngModel. Ho appena dimostrato con jQuery per una facile comprensione. Praticamente, può essere qualsiasi cosa.

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); 
      } 
     }); 
    } 
}