2

Observem a imagem;

inserir a descrição da imagem aqui

Você conseguem observar pela imagem que o campo está aceitando mais de dez digitos, o que preciso fazer é permitir que o usuário consiga somente digita dez digitos no campo data, estou tendo dificuldade de corrigir o bug por falta de experiência.

O componente html é esse abaixo;

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

Por favor preciso muito de ajuda, eu encontrei esse link abaixo, não sei isso ajuda a clarear para poderem me ajudar.

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

4
  • já tentou colocar maxlength=10? developer.mozilla.org/en-US/docs/Web/HTML/Element/input ou ainda no jeito angular: ng-maxlength="10"? Commented 30/07/2019 às 14:22
  • 1
    eu já tentei, o maxlength não suporta campo tipo date.
    – user10264
    Commented 30/07/2019 às 14:28
  • Preciso mesmo tentar validar o número de digitos com tipo date.
    – user10264
    Commented 30/07/2019 às 14:57
  • Eae, blz? O campo Date já tem o format, min e max não estou entendo a necessidade de validar o length sendo que a mascara do input já cuida disso. Commented 31/07/2019 às 14:36

1 Resposta 1

1

Então, parece ser um bug no Html este problema com inputs do tipo date, fiz um exemplo abaixo que pode lhe ajudar aí no caso, basicamente pego o valor do input e quando o valor for o determinado eu pulo para o próximo input de data, pode ver o funcionamento em um exemplo aqui:

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>

Ou utilizar os atributos max e min para limitar uma data, aí neste caso o próprio HTML se encarrega de validar a entrada. Exemplo, se digitar no input um valor maior que o máximo (31/12/2100) ou menor que o mínimo (01/01/1900), ao se passar o mouse sobre o input pode ser visto uma mensagem de erro, e se ao tentar clicar com as setas do input, o próprio Html se encarrega de inserir datas válidas, "no Firefox esses atributos min e max, não surtem efeito":

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

Você deve fazer log-in para responder a esta pergunta.