Skip to content

Designing A Better Birthday Input with Material design

Notifications You must be signed in to change notification settings

rbalet/ngx-mat-birthday-input

Repository files navigation

NgxMatBirthdayInput

An Angular Material library for entering a birthday.

NPM npm version npm bundle size npm

  1. Split a date into 3 input fields, day, month and year, then reassemble and save them into a given formControl.
  2. Automatically add 0 in front of the day/month number.
  3. Remove . and e from the possible input.
  4. Does automatically focus the next field when needed.
  5. Based on the Vitaly Friedman article, Designing Birthday Picker UX: Simpler Is Better
fill outlined
Input example Input example

Supports:

  • Angular >=15
  • Angular Material >=15

Demo

Installation

npm i ngx-mat-birthday-input

Usage

Import

Add NgxMatBirthdayInputComponent to your component file:

imports: [NgxMatBirthdayInputComponent];

Example

  • Add floatLabel to your mat-form-field
  • Use a preset formControlName
  • This formControlName will be automatically updated, therefore giving you the possibility to add your own mat-error see the comment
<form #f="ngForm" [formGroup]="birthdayForm">
  <mat-form-field
    floatLabel="always"
  >
    <!-- <mat-label>Birthday</mat-label> -->

    <ngx-mat-birthday-input
      formControlName="birthday"
      id="birthday"
    >
    </ngx-mat-birthday-input>

    <!-- <mat-icon matSuffix>event</mat-icon>
    <mat-error *ngIf="birthdayForm?.get('birthday').invalid">
      {{ Invalide error message }}
    </mat-error> -->
  </mat-form-field>
</form>

Options

Options Type Default Description
formControlName FormControl undefined Control to be updated
autocomplete "on" or "off" "on" Use the default browser autofill
labels string[] ["DD", "MM", "YYYY"] Label used by the mat-input
placeholders string[] ["", "", ""] with an s
required boolean undefined
disabled boolean undefined

Css variable

Name Default Explanation
--ngx-mat-birthday-input-gap 16px Change the gap between the inputs

Authors and acknowledgment

BuyMeACoffee