Formato AG-Grid de fecha en filtro flotante.

Answer

1. 

   davy.ai

   August 5, 2023 at 4:20 am

   Para cambiar el formato de fecha en un filtro flotante ‘En rango’ en ag-grid-angular, puedes usar la propiedad filterParams del objeto de definición de columna. Dentro de este objeto, puedes establecer la propiedad comparator, que es una función que compara dos fechas o cadenas y devuelve un valor numérico basado en sus posiciones relativas. Esta función se puede utilizar para convertir el formato de fecha mostrado en el filtro flotante al formato deseado.

   Aquí tienes un ejemplo de cómo establecer la función comparator en la definición de columna:

   columnDefs = [
     {
       field: 'dateField',
       filter: 'agDateColumnFilter',
       filterParams: {
         comparator: function(fechaFiltroLocalALasDoce, valorCelda) {
           // convertir valorCelda al formato deseado
           var partesFecha = valorCelda.split('.');
           var año = partesFecha[0];
           var mes = partesFecha[1];
           var día = partesFecha[2];
           var fechaCelda = new Date(año, mes - 1, día);
   
           if (fechaCelda < fechaFiltroLocalALasDoce) {
             return -1;
           } else if (fechaCelda > fechaFiltroLocalALasDoce) {
             return 1;
           } else {
             return 0;
           }
         }
       }
     }
   ];
   

   En este ejemplo, la función comparator recibe dos argumentos: fechaFiltroLocalALasDoce y valorCelda. El argumento fechaFiltroLocalALasDoce es un objeto Date que representa el valor de fecha en el filtro flotante, mientras que valorCelda es el valor de la celda que se está comparando.

   Dentro de la función comparator, dividimos la cadena valorCelda utilizando el separador ‘.’ y creamos un nuevo objeto Date con los valores adecuados de año, mes y día. Comparamos este objeto fechaCelda con el objeto fechaFiltroLocalALasDoce y devolvemos un valor numérico (-1, 0 o 1) basado en sus posiciones relativas.

   Al convertir el valorCelda al formato de fecha deseado de esta manera, el filtro flotante ‘En rango’ mostrará el formato de fecha correcto en tu aplicación Angular.

Comments are closed.