Angular: insert date in input only

Asked

Viewed 252 times

0

In the system there is a field to insert a date. I want to block the input to insert only the dd/mm/yyyy values

<mat-form-field class="input-full-width">
<mat-label>Data citação</mat-label>                         
<input matInput  [matDatepicker]="datePickerCriacao" [max]="hoje"  (click)="datePickerCriacao.open()" id="dataCitacao" placeHolder="Data citação" [(ngModel)]="dataCitacao" name="dataCitacao" maxlength="10">
<mat-datepicker-toggle matSuffix [for]="datePickerCriacao"></mat-datepicker-toggle>
<mat-datepicker #datePickerCriacao></mat-datepicker>
</mat-form-field>
javascript html angular form

  • tries to add a type date or number to the input

1 answer

0

You can achieve this with the help of angular2-text-Mask

Component

public mask = {
    guide: true,
    showMask : true,
    mask: [/\d/, /\d/, '/', /\d/, /\d/, '/',/\d/, /\d/,/\d/, /\d/]
 };

Template

<mat-form-field>
  <input matInput [textMask]="mask" [matDatepicker]="picker" placeholder="Selecione uma data">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Browser other questions tagged javascript html angular form

You are not signed in. Login or sign up in order to post.