Registration Date of Birth field: auto-format typed dates (insert slashes) as MM/DD/YYYY #262

New Issue

2026-06-27T03:01:22Z

spikerj commented

2026-06-27 03:01:22 +00:00

Improvement

In the "Join SpikerSoft" registration stepper (basic-info-step), the Date of Birth field accepts free typing but does not auto-insert the / separators. A user typing 01011988 has to either manually type the slashes or use the calendar picker. We should auto-format as they type so 01011988 becomes 01/01/1988.

Proposed solution

Add a small reusable attribute directive (appDateInputMask) on the existing DOB <input> (which already has matDatepicker). On each input event it keeps only digits (cap 8) and formats progressively to MM/DD/YYYY, then re-emits a synthetic input event so MatDatepickerInput still parses the slash-delimited value into a Date. Re-emitting (rather than depending on listener order) keeps the parsed form value correct regardless of which input handler runs first.

Also add inputmode="numeric" for a better mobile keypad.

Why MM/DD/YYYY

The registration datePlaceholder is MM/DD/YYYY in both en and es (es = MM/DD/AAAA), and the native date adapter parses slash strings as MM/DD/YYYY regardless of locale, so a fixed MM/DD/YYYY mask matches the field's existing expectation in both languages. The calendar picker flow is unchanged.

Acceptance

Typing 01011988 shows 01/01/1988 and sets dateOfBirth to 1988-01-01.
Non-digits are ignored; input capped at 8 digits.
Calendar picker still works; existing age-gate/validation unaffected.
Frontend-only change (spikersoft-angular).

## Improvement In the "Join SpikerSoft" registration stepper (`basic-info-step`), the Date of Birth field accepts free typing but does **not** auto-insert the `/` separators. A user typing `01011988` has to either manually type the slashes or use the calendar picker. We should auto-format as they type so `01011988` becomes `01/01/1988`. ## Proposed solution Add a small reusable attribute directive (`appDateInputMask`) on the existing DOB `<input>` (which already has `matDatepicker`). On each `input` event it keeps only digits (cap 8) and formats progressively to `MM/DD/YYYY`, then re-emits a synthetic `input` event so `MatDatepickerInput` still parses the slash-delimited value into a `Date`. Re-emitting (rather than depending on listener order) keeps the parsed form value correct regardless of which `input` handler runs first. Also add `inputmode="numeric"` for a better mobile keypad. ## Why MM/DD/YYYY The registration `datePlaceholder` is `MM/DD/YYYY` in both `en` and `es` (es = `MM/DD/AAAA`), and the native date adapter parses slash strings as `MM/DD/YYYY` regardless of locale, so a fixed `MM/DD/YYYY` mask matches the field's existing expectation in both languages. The calendar picker flow is unchanged. ## Acceptance - Typing `01011988` shows `01/01/1988` and sets `dateOfBirth` to 1988-01-01. - Non-digits are ignored; input capped at 8 digits. - Calendar picker still works; existing age-gate/validation unaffected. - Frontend-only change (`spikersoft-angular`).

spikerj commented

2026-06-27 03:04:06 +00:00

Resolved in spikersoft-angular PR #78 (merged to master). Added the reusable appDateInputMask directive on the registration DOB input so typing 01011988 auto-formats to 01/01/1988 while MatDatepickerInput still parses it to a Date; also added inputmode="numeric". Covered by directive unit tests + a basic-info-step integration test. Closing.

Resolved in spikersoft-angular PR #78 (merged to `master`). Added the reusable `appDateInputMask` directive on the registration DOB input so typing `01011988` auto-formats to `01/01/1988` while `MatDatepickerInput` still parses it to a `Date`; also added `inputmode="numeric"`. Covered by directive unit tests + a basic-info-step integration test. Closing.

spikerj closed this issue

2026-06-27 03:04:14 +00:00

spikerj referenced this issue

2026-07-13 20:13:09 +00:00

[Infra][MinIO] Migrate lesson-videos + LessonVideoProcessor to S3 (lesson-videos bucket, epic #413) #523

spikerj referenced this issue

2026-07-13 20:32:40 +00:00

[Infra][MinIO] Migrate lesson-videos + LessonVideoProcessor to S3 (lesson-videos bucket, epic #413) #523

spikerj referenced this issue

2026-07-18 17:59:15 +00:00

[Infra][MinIO] Migrate lesson-videos + LessonVideoProcessor to S3 (lesson-videos bucket, epic #413) #523

Sign in to join this conversation.