Date Input Demo (MatDatepicker)

Typ "20260722" → ruiDateInputMask fügt automatisch Trennzeichen ein. "2026-07-22" direkt funktioniert genauso. Der MatDatepicker dient als Fallback zur Kalenderauswahl.

Basic Usage

ruiDateInputMask direkt auf dem matInput — keine eigene Komponente nötig.

Code
<mat-form-field>
  <mat-label>Date (YYYY-MM-dd)</mat-label>
  <input
    matInput
    ruiDateInputMask="YYYY-MM-dd"
    [matDatepicker]="dp"
    [(ngModel)]="myDate"
  />
  <mat-datepicker-toggle matSuffix [for]="dp" />
  <mat-datepicker #dp />
</mat-form-field>

Format Override (per-field)

Jedes Feld hat sein eigenes ruiDateInputMask-Format — Maskierung und Parsing passen sich automatisch an.

Code
<mat-form-field>
  <mat-label>dd.MM.YYYY</mat-label>
  <input matInput ruiDateInputMask="dd.MM.YYYY" [matDatepicker]="dp1" [(ngModel)]="date1" />
  <mat-datepicker-toggle matSuffix [for]="dp1" />
  <mat-datepicker #dp1 />
</mat-form-field>
<mat-form-field>
  <mat-label>MM/dd/YYYY</mat-label>
  <input matInput ruiDateInputMask="MM/dd/YYYY" [matDatepicker]="dp2" [(ngModel)]="date2" />
  <mat-datepicker-toggle matSuffix [for]="dp2" />
  <mat-datepicker #dp2 />
</mat-form-field>
<mat-form-field>
  <mat-label>YYYY/MM/dd</mat-label>
  <input matInput ruiDateInputMask="YYYY/MM/dd" [matDatepicker]="dp3" [(ngModel)]="date3" />
  <mat-datepicker-toggle matSuffix [for]="dp3" />
  <mat-datepicker #dp3 />
</mat-form-field>

Global Configuration

Diese Seite nutzt provideRuiDateAdapter(createDateFormats('dd.MM.YYYY')). Das erste Feld hat kein ruiDateInputMask → globales Format. Das zweite Feld überschreibt pro Feld.

Code
<!-- Ohne ruiDateInputMask → globales Format (dd.MM.YYYY) -->
<mat-form-field>
  <mat-label>Global: dd.MM.YYYY</mat-label>
  <input matInput [matDatepicker]="dp6" [(ngModel)]="myDate" />
  <mat-datepicker-toggle matSuffix [for]="dp6" />
  <mat-datepicker #dp6 />
</mat-form-field>

<!-- Mit ruiDateInputMask → per-field override -->
<mat-form-field>
  <mat-label>Override: MM/dd/YYYY</mat-label>
  <input matInput ruiDateInputMask="MM/dd/YYYY" [matDatepicker]="dp7" [(ngModel)]="myDate" />
  <mat-datepicker-toggle matSuffix [for]="dp7" />
  <mat-datepicker #dp7 />
</mat-form-field>

Reactive Forms

Control value: null

Code
<mat-form-field>
  <mat-label>Date</mat-label>
  <input matInput ruiDateInputMask="YYYY-MM-dd" [matDatepicker]="dp" [formControl]="dateControl" />
  <mat-datepicker-toggle matSuffix [for]="dp" />
  <mat-datepicker #dp />
</mat-form-field>

Signal Form

Mit model()-Signal via ngModel.

Code
<mat-form-field>
  <mat-label>Date</mat-label>
  <input matInput ruiDateInputMask="YYYY-MM-dd" [matDatepicker]="dp"
    [ngModel]="myDate()" (ngModelChange)="myDate.set($event)" />
  <mat-datepicker-toggle matSuffix [for]="dp" />
  <mat-datepicker #dp />
</mat-form-field>