How to put maximum value in a Date field in Angular 7?

Asked

Viewed 453 times

2

Look at the picture;

inserir a descrição da imagem aqui

You can see from the image that the field is accepting more than ten digits, what I need to do is allow the user to only type ten digits in the data field, I’m having difficulty correcting the bug due to lack of experience.

The html component is this below;

 <div class="form-group col-4">
    <label>Período</label>
    <div class="row" style="margin: 0">
      <input type="date" class="form-control col-5" name="dataInicial" [(ngModel)]="filtro.dataInicial" InputDateValidationOnBlur/>
      <span class="col-2" style="text-align: center; padding-top: 5px">até</span>
      <input type="date" class="form-control col-5" name="dataFinal" [(ngModel)]="filtro.dataFinal" InputDateValidationOnBlur/>
    </div>
  </div>

Please I need a lot of help, I found this link below, I do not know it helps clear so they can help me.

https://stackblitz.com/edit/angular-triyfr?file=src%2Fapp%2Fapp.component.html

angular typescript

  • tried to put maxlength=10? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input or in angular form: ng-maxlength="10"?

  • 1

    I have tried, maxlength does not support date field.

  • I really need to try to validate the number of digits with date type.

  • Eae, blz? The Date field already has the format, min and max I don’t understand the need to validate the length and the mask of the input already takes care of it.

1 answer

1

So it seems to be a bug in the Html this problem with inputs like date, I made an example below that can help you there in the case, basically I take the value of the input and when the value is the determined I jump to the next data input, can see the functioning in an example here:

TS:

@ViewChild('dataInicial') dataInicial: ElementRef;
@ViewChild('dataFinal') dataFinal: ElementRef;

Valor() {
  let valor = this.dataInicial.nativeElement.value;
  if(valor[0] == 1) this.dataFinal.nativeElement.focus();
}

HTML:

<div class="form-group col-4">
  <label>Período</label>
  <div class="row" style="margin: 0">
    <input type="date" class="form-control col-5" name="dataInicial" #dataInicial (input)="Valor()">
    <span class="col-2" style="text-align: center; padding-top: 5px;padding-left:10px;padding-right:10px">até</span>
    <input type="date" class="form-control col-5" name="dataFinal" #dataFinal>
  </div>
</div>

Or use the attributes max and min to limit a date, in this case the HTML is responsible for validating the input. Example, if you type in the input a value greater than the maximum (31/12/2100) or less than the minimum (01/01/1900), when you hover over the input an error message can be seen, and if you try to click with the input arrows, Html itself will insert valid dates, "in Firefox these min and max attributes have no effect":

<input type="date" id="festa" name="festa" min="1900-01-01" max="2100-12-31">

Browser other questions tagged angular typescript

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