Issue
I have the following input field in my angular 14 application:
<mdb-form-control>
<input id="arrivalTime" mdbInput
type="text" class="form-control" placeholder="--:--"/>
<label mdbLabel class="form-label">Arrival Time</label>
</mdb-form-control>
I am wondering how I can add a permanent ":" so that when the user types in a time it automatically steps to the other side of the colon
Basically like in this: https://www.npmjs.com/package/jquery-clock-timepicker
Thanks
Solution
You can create a custom directive to format the time
@Directive({
selector: '[appFormatTime]',
})
export class FormatTimeDirective {
constructor(private element: ElementRef) {}
@HostListener('input') logChange() {
let val = this.element.nativeElement.value.replace(/:/g, '');
val = val.match(/.{1,2}/g).join(":")
this.element.nativeElement.value = val.substring(0, 5);
}
}
<mdb-form-control>
<input
id="arrivalTime"
mdbInput
type="text"
class="form-control"
placeholder="--:--"
appFormatTime
/>
<label mdbLabel class="form-label">Arrival Time</label>
</mdb-form-control>
Answered By - Mr. Stash
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.