Move padding into date formatter

This commit is contained in:
Michael Shamoon 2022-03-11 00:28:06 -08:00
parent a1fd9f7310
commit 4c7eb34290
3 changed files with 8 additions and 18 deletions

View File

@ -2,7 +2,7 @@
<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" maxlength="10"
(dateSelect)="onChange(value)" (change)="onChange(value)" (focusout)="onFocusOut()" (keypress)="onKeyPress($event)"
(dateSelect)="onChange(value)" (change)="onChange(value)" (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">

View File

@ -1,9 +1,6 @@
import { Component, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgbDateAdapter, NgbDateParserFormatter, NgbDatepickerContent } from '@ng-bootstrap/ng-bootstrap';
import { Component, forwardRef, OnInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { SettingsService } from 'src/app/services/settings.service';
import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter';
import { v4 as uuidv4 } from 'uuid';
import { AbstractInputComponent } from '../abstract-input';
@ -30,17 +27,6 @@ export class DateComponent extends AbstractInputComponent<string> implements OnI
placeholder: string
// Allow dates to be specified without 'padding' e.g. 2/3
onFocusOut() {
if (!this.value || this.value.length > 8) return; // its already been formatted
if ([',','.','/','-'].some(sep => this.value.includes(sep))) {
let valArr = this.value.split(/[\.,\/-]+/)
valArr = valArr.map(segment => segment.padStart(2,'0'))
let dateFormatter = new LocalizedDateParserFormatter(this.settings)
this.value = dateFormatter.preformatDateInput(valArr.join(''))
}
}
// prevent chars other than numbers and separators
onKeyPress(event: KeyboardEvent) {
if (!/[0-9,\.\/-]+/.test(event.key)) {

View File

@ -42,7 +42,11 @@ export class LocalizedDateParserFormatter extends NgbDateParserFormatter {
let inputFormat = this.getDateInputFormat()
let dateSeparator = inputFormat.replace(/[dmy]/gi, '').charAt(0)
value = value.replace(/[\/,\.-]/g, '')
if ([',','.','/','-'].some(sep => value.includes(sep))) {
let valArr = value.split(/[\.,\/-]+/)
valArr = valArr.map(segment => segment.padStart(2,'0'))
value = valArr.join('')
}
if (value.length == 4 && inputFormat.substring(0, 4) != 'yyyy') {
return [value.substring(0, 2), value.substring(2, 4), new Date().getFullYear()].join(dateSeparator)