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.
