I am trying to build a datetime picker directive like the following.
<input [(ngModel)]="date1" datetime-picker date-only />
and date1
is assigned as a Date, e.g., new Date()
When I display this in html, text in input element looks like the following
Thu Jan 01 2015 00:00:00 GMT-0500
I want to display like the following instead
2015-01-01 00:00:00
I want to format date WITHIN a directive using DatePipe instead of showing result from default toString() function.
My question is; "within a directive, how do I access ngModel variable?", e.g., date1, so that I can add toString() method.
If my approach is not right, please advise me.
Here is simple and easy way to listen and notify ngModel. I have just demonstrated with jQuery for easy understanding. Practically, it can be anything.
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);
}
});
}
}