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.

This site uses Akismet to reduce spam. Learn how your comment data is processed.