NgxMatBirthdayInput

An Angular Material library for entering a birthday.

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 | | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | | | |

Supports:

• Angular >=15
• Angular Material >=15

Demo

• https://stackblitz.com/~/github.com/rbalet/ngx-mat-birthday-input

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> -->
    
    <!-- 
      <mat-datepicker-toggle matIconPrefix [for]="myDatePicker">
        <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>
      </mat-datepicker-toggle>
      <mat-datepicker touchUi #myDatePicker></mat-datepicker> 
    -->

    <ngx-mat-birthday-input
      formControlName="birthday"
      id="birthday"
    >
    <!-- [matDatepicker]="myDatePicker" -->
    </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

• maintainer Raphaël Balet