次のような日時ピッカーディレクティブを作成しようとしています。<input [(ngModel)]="date1" datetime-picker date-only />
および_date1
_は日付として割り当てられます。例:new Date()
これをhtmlで表示すると、input要素のテキストは次のようになります
_Thu Jan 01 2015 00:00:00 GMT-0500
_
代わりに次のように表示したい
_2015-01-01 00:00:00
_
デフォルトのtoString()関数からの結果を表示するのではなく、DatePipeを使用してディレクティブ内で日付をフォーマットしたい。
私の質問です。 「ディレクティブ内で、ngModel変数にどのようにアクセスしますか?」(例:date1)。これにより、toString()メソッドを追加できます。
私のアプローチが適切でない場合は、教えてください。
NgModelを聞いて通知するシンプルで簡単な方法を次に示します。簡単に理解できるように、jQueryを使用してデモを行いました。実際には、何でもかまいません。
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);
}
});
}
}
ngModel
にアクセスするには、_datetime-picker
_に@Input()
を含めるだけです。また、双方向データバインディングを使用しているため、ngModel
に加えた変更を発行する必要があります。
_@Directive({
selector:'[date-time-picker]'
})
export class DateTimePicker{
@Input() ngModel;
@Output() ngModelChange = new EventEmitter();
ngOnInit(){
this.ngModelChange.emit(this.ngModel.toDateString());
}
}
_
IMHOのより良い方法は DatePipe
を使用することです
_@Component({
selector: 'my-app',
directives:[DateTimePicker],
template: `
<input (ngModelChange)="myDate = $event" [ngModel]="myDate | date:'short'" datetime-picker />
`
})
export class AppComponent {
myDate = new Date();
}
_
「keyup」と「this.ngModel.model」を使用できます
import { Directive, HostListener } from '@angular/core';
import { NgModel } from '@angular/forms';
@Directive({
selector: '[ngModel][customDir]',
providers: [NgModel]
})
export class CustomDirective {
constructor(private ngModel: NgModel) { }
@HostListener('keyup', ['$event']) onKeyUp(event) {
let value = this.ngModel.model;
this.ngModel.update.emit(value);
}
}