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.

Date (YYYY-MM-dd)

HTML

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

dd.MM.YYYY

MM/dd/YYYY

YYYY/MM/dd

HTML

<mat-form-field>
  <mat-label>dd.MM.YYYY</mat-label>
  <input matInput ruiDateInputMask="dd.MM.YYYY" [matDatepicker]="dp" [(ngModel)]="date1" />
  <mat-datepicker-toggle matSuffix [for]="dp" />
  <mat-datepicker #dp />
</mat-form-field>
<mat-form-field>
  <mat-label>MM/dd/YYYY</mat-label>
  <input matInput ruiDateInputMask="MM/dd/YYYY" [matDatepicker]="dp" [(ngModel)]="date2" />
  <mat-datepicker-toggle matSuffix [for]="dp" />
  <mat-datepicker #dp />
</mat-form-field>
<mat-form-field>
  <mat-label>YYYY/MM/dd</mat-label>
  <input matInput ruiDateInputMask="YYYY/MM/dd" [matDatepicker]="dp" [(ngModel)]="date3" />
  <mat-datepicker-toggle matSuffix [for]="dp" />
  <mat-datepicker #dp />
</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.

Global: dd.MM.YYYY (ohne Mask)

Override mit Mask: MM/dd/YYYY

HTML

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

Reactive Forms

Date

Control value: null

HTML

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

Date

HTML

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