date.component.html

<div class="fields-container">
  <mat-form-field>
    <mat-label>Date</mat-label>
    <input
      #picker
      [(ngModel)]="selectedDate"
      matInput
      placeholder="Choose a date"
      type="datetime-local"
    />
    <button (click)="picker.showPicker()" mat-icon-button matIconSuffix>
      <mat-icon>today</mat-icon>
    </button>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Locale</mat-label>
    <mat-select [(ngModel)]="locale">
      <mat-option [value]="undefined">Browser default</mat-option>
      @for (language of languages; track $index) {
        <mat-option [value]="language">{{ language }}</mat-option>
      }
    </mat-select>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Date style</mat-label>
    <mat-select [(ngModel)]="dateStyle">
      <mat-option [value]="undefined">Browser default</mat-option>
      <mat-option [value]="'short'">short</mat-option>
      <mat-option [value]="'medium'">medium</mat-option>
      <mat-option [value]="'long'">long</mat-option>
      <mat-option [value]="'full'">full</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Time style</mat-label>
    <mat-select [(ngModel)]="timeStyle">
      <mat-option [value]="undefined">Browser default</mat-option>
      <mat-option [value]="'short'">short</mat-option>
      <mat-option [value]="'medium'">medium</mat-option>
      <mat-option [value]="'long'">long</mat-option>
      <mat-option [value]="'full'">full</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field>
    <mat-label>12 Hours</mat-label>
    <mat-select [(ngModel)]="hour12">
      <mat-option [value]="undefined">Browser default</mat-option>
      <mat-option [value]="true">true</mat-option>
      <mat-option [value]="false">false</mat-option>
    </mat-select>
  </mat-form-field>
</div>

<p>{{ selectedDate() | intlDate: options() }}</p>