iONIC – Como limpar um campo data (datetime)

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.