0

Eu estou trabalhando em uma melhoria, pois esse calendário não "espera o usuário terminar de selecionar as informações" para poder carregar os dados do filtro desejado, por exemplo, se eu clico no dia 15/12/2022, ele carrega as informações, se eu quiser selecionar o horário específico, horas e minutos, a cada clique ele faz o filtro novamente, de minuto em minuto.

Gostaria de evitar que quando clicasse no horário, ele filtrasse tão rápido, pensei em fazer isso incluindo um botão para aplicar.

Até aí tudo bem, comecei a inclusão do botão, e consegui resolver uma parte do problema, que seria incluir uma dependência do botão para fazer a requisição, mas aí outro dilema surgiu...

Toda vez que insiro uma data no calendário, ele fecha e seta a data selecionada (só que não faz o filtro pq eu setei para clicar no botão primeiro), e aí para selecionar uma hora específica ou aplicar o filtro, é necessário abrir o calendário novamente e depois de selecionar a hora clicar em aplicar.

Como eu posso evitar que o calendário feche? Segue o código utilizado:

 // seta a data desejada 
    setData(value: any){
        this.date = value;
    }
   
    getData(){
        return this.date;
    }

    
    public filterColumn(value: any, column: Column): void {
        let valueChanged = true;
          if(this._oldValue != undefined) {
            if(value !== undefined && (column.type === TypeColumn.DATE || column.type === TypeColumn.DATETIME)) {
                if(value.getTime() === this._oldValue.getTime()) {
                    valueChanged = false;
                }
            }
        } else if (value == undefined) {
            valueChanged = false;
        }
        this._oldValue = value;
        if(valueChanged) {
            of(this.filter.emit({ value, column })).pipe(last()).subscribe();
        }
    }
}
<p-calendar #Datepicker *ngSwitchCase="'DATETIME'"
                        [readonlyInput]="true"
                        [showIcon]="true"
                        [locale]="'calendar' | translate"
                        [dateFormat]="'calendar.dateFormat' | translate"
                        hourFormat="24"
                        showTime="true"
                        [monthNavigator]="true"
                        hideOnDateTimeSelect="false"
                        showButtonBar="true"
                        (onSelect)="filterColumn($event, column); setData($event, column);"
                        (onInput)="filterColumn(undefined, column);"
                        (onClearClick)="filterColumn(undefined, column);"
                        [ngModel]="filters[column.field]?.value" [ngModelOptions]="{standalone: true}">
                <ng-template pTemplate="footer"> 
                    <button pButton type="button" label="Ok" (click)="filterColumn(getData(), column);" >
                    </button>
                </ng-template>
            </p-calendar>

https://clipchamp.com/watch/nsB5CiPG9Gn - vídeo do problema

A função que eu criei para o botão abaixo:

setData(value: any){
        
     this.date = value;
   
 }
   

getData(){
        
    return this.date;
    
}
2
  • Tente criar uma ViewChild no seu componente @ViewChild('Datepicker') datePicker : any; E na sua função filterColumn adicione o seguinte trecho this.datePicker.hideOnDateTimeSelect = false;. 20/12/2022 às 14:48
  • 1
    Muito obrigada, eu tentei mas não funcionou... porém fiz a função de uma forma diferente e consegui resolver... fiz a aplicação de comparações da data atual com a data anterior selecionada, e se for menor do que 24 horas, chamo a função do botão :D 20/12/2022 às 18:13

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .