Limit date input field chars and length

This commit is contained in:
Michael Shamoon
2022-03-11 00:11:59 -08:00
parent 89c2a0a037
commit cf18cc940e
4 changed files with 20 additions and 6 deletions

View File

@@ -1,8 +1,9 @@
<div class="mb-3">
<label class="form-label" [for]="inputId">{{title}}</label>
<div class="input-group" [class.is-invalid]="error">
<input class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" (dateSelect)="onChange(value)" (change)="onChange(value)" (focusout)="onFocusOut()"
name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel">
<input class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
(dateSelect)="onChange(value)" (change)="onChange(value)" (focusout)="onFocusOut()" (keypress)="onKeyPress($event)"
name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel">
<button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>

View File

@@ -40,4 +40,11 @@ export class DateComponent extends AbstractInputComponent<string> implements OnI
this.value = dateFormatter.preformatDateInput(valArr.join(''))
}
}
// prevent chars other than numbers and separators
onKeyPress(event: KeyboardEvent) {
if (!/[0-9,\.\/-]+/.test(event.key)) {
event.preventDefault();
}
}
}