Componente Date, DateTime, Time

Sabemos que o componente ion-datetime do Ionic é bem interessante, mas na web não é muito prático, então resolvi criar 3 componentes onde o usuário possa digitar a data, data e hora ou somente a hora.

O componente possui suporte a mascara automaticamente e validação.

Este componte possui uma dependencia do pacote br-mask, ou seja, é necessário instalar o componente através do npm.

Como usar

Crie uma pasta chamada components no seu projeto e adicione os arquivos deste repositorio.

Para usar os componentes é bem simples

Usando o componente app-time

<ion-item>
	<ion-label position="stacked">Horário inicio:</ion-label>
	<app-time (onGetValue)="onGetValueHorarioInicio($event)" (onValid)="onValid($event)" required="true"  [value]="timeHoraInicio"></app-time>
</ion-item>

No TS setando a informação no formulário.

onGetValueHorarioInicio(e){ 
	//Retorna o horario do componente
	this.formGroup.controls.horaInicio.setValue(e);
}

onValid(isValid : boolean){
    if (isValid==false){
      this.utilService.showToast('Horário inválido!');
    }
  }

Usando o componente app-date

<ion-item>
	<ion-label position="stacked">Data Agendamento</ion-label>
	<app-date (onGetValue)="onGetValue($event)" (onValid)="onValid($event)" required="true"></app-date>
</ion-item>

No TS setando a informação no formulário.

onGetValue(e){
	//Retorna a data do componente no formato Date do JS
	this.dataAgendamento = e;
}

onValid(isValid : boolean){
    if (isValid==false){
      this.utilService.showToast('Data inválida!');
    }
  }

Usando o componente app-datetime

<ion-item>
	<ion-label position="stacked">Data Agendamento</ion-label>
	<app-datetime (onGetValue)="onGetValue($event)" (onValid)="onValid($event)"  required="true"></app-datetime>
</ion-item>

No TS setando a informação no formulário.

onGetValue(e){
	//Retorna a data do componente no formato Date do JS
	this.dataAgendamento = e;
}

onValid(isValid : boolean){
    if (isValid==false){
      this.utilService.showToast('Data inválida!');
    }
  }

Fique a vontade para dar um Fork no repositório e alterar conforme sua necessidade.

pauloanalista / componente-date-datetime-time-para-ionic5 Goto Github PK