ngx-mat-date-input v19.4.1

NgxMatDateInput

An Angular Material library for entering a date.

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. Control the form value with the max number for day & month
4. Remove . and e from the possible input.
5. Does automatically focus the next field when needed.
6. 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-date-input

  Installation

  npm i ngx-mat-date-input

  Usage

  Import

Add NgxMatDateInputComponent to your component file:

imports: [NgxMatDateInputComponent];

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]="dateForm">
  <mat-form-field
    floatLabel="always"
  >
    <!-- <mat-label>Date</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-date-input
      formControlName="date"
      id="date"
    >
    <!-- [matDatepicker]="myDatePicker" -->
    </ngx-mat-date-input>

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

Options

Css variable

Auto formatting

Month

• Max 12

Day

• Month: 2 -> max 29
• Month: 4, 6, 9 & 11 -> max 30
• Month: else -> max 31

Authors and acknowledgment

• maintainer Raphaël Balet