iONIC – Como limpar um campo data (datetime)

A imagem mostra um campo de data com um botão adicional de "Limpar"
Ao usar o componente <ion-datetime> e escolher uma data/hora, por default, não é possível limpar esse campo, mesmo clicando em Cancelar. Nesse post mostrarei como resolver isso em simples passos. Você deve ter percebido que, ao usar um campo do tipo <ion-datetime> é possível selecionar uma data/hora e cancelar. Mas depois de escolher alguma data, não é possível limpar o campo, ou desselecionar. O que fazer? No seu Controller (.ts), crie um atributo/função, como abaixo:
public dateOptions: any = {
   buttons: [{
      text:’Limpar’,
      handler: () => {
         this.order.end_time=null; //Nome do Objeto que armazena a data
      }
   }]
}
Depois disso, é hora de editarmos nossa view (.html). Onde estiver seu campo <ion-datetime>, adicione o atributo em negrito abaixo:
<ion-datetime
displayFormat=”DD/MM/YYYY H:mm” [pickerOptions]=”dateOptions”
cancelText=”Cancelar” doneText=”Confirmar”
[(ngModel)]=”order.end_time”>
Agora você deverá ter um terceiro botão, Limpar, o qual ativará uma ação que limpará seu objeto (que no meu caso é order.end_time”). Veja no aplicativo que estou trabalhando como ficou. A imagem mostra um campo de data com um botão adicional de "Limpar"

Seus comentários são muito apreciados.

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.