I am in need of an input that adheres to the following format:
[00-23]:[00-59]
Due to the limitations of Angular 2.4, where the pattern directive is unavailable and external libraries like primeNG cannot be used, I have been attempting to create a directive for this purpose:
@HostListener('keyup', ['$event']) onKeyUp(event) {
var newVal = this.el.nativeElement.value.replace(/\D/g, '');
var rawValue = newVal;
// default format for empty value
if(newVal.length === 0) {
newVal = '00:00';
}
// do not display colon for empty groups at the end
else if(newVal.length === 1) {
newVal = newVal.replace(/^(\d{1})/, '00:0$1');
} else {
newVal = newVal.replace(/^(\d{2})(\d{2})/, '$1:$2');
}
// set the new value
this.el.nativeElement.value = newVal;
}
This implementation works as intended for the first two digits entered.
Initial string:
00:00
After pressing the number 1:
00:01
Subsequently pressing the number 2:
00:12
However, upon entering a third digit, the result is:
00:123
Instead of 01:23, and 00:1234 rather than 12:34
Despite this issue, backspacing functions correctly.
Is there a solution to this challenge that solely involves using a directive?