我正在尝试构建类似以下的日期时间选择器指令
<input [(ngModel)]="date1" datetime-picker date-only />
和date1
被指定为日期,例如new Date()
当我在html中显示时,输入元素中的文字如下所示
Thu Jan 01 2015 00:00:00 GMT-0500
我希望显示如下,而不是
2015-01-01 00:00:00
我想使用DatePipe格式化日期WITHIN而不是显示默认的toString()函数的结果。
我的问题是; “在一个指令中,我如何访问ngModel变量?”,例如date1,这样我就可以添加toString()方法。
如果我的方法不对,请告诉我。
答案 0 :(得分:13)
要访问ngModel
,您只需在@Input()
中添加datetime-picker
即可。由于您使用的是双向数据绑定,因此必须发出对ngModel
所做的更改。
@Directive({
selector:'[date-time-picker]'
})
export class DateTimePicker{
@Input() ngModel;
@Output() ngModelChange = new EventEmitter();
ngOnInit(){
this.ngModelChange.emit(this.ngModel.toDateString());
}
}
恕我直言的更好方法是使用DatePipe
@Component({
selector: 'my-app',
directives:[DateTimePicker],
template: `
<input (ngModelChange)="myDate = $event" [ngModel]="myDate | date:'short'" datetime-picker />
`
})
export class AppComponent {
myDate = new Date();
}
答案 1 :(得分:13)
这是一种简单易用的方式来监听和通知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);
}
});
}
}
答案 2 :(得分:2)
您可以使用“ 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);
}
}