Saltar al contenido

Filtro de fecha y hora en la cuadrícula de kendo

Verificamos de forma cada noticia de nuestro sitio web con el objetivo de enseñarte en todo momento información más veraz y actualizada.

Solución:

Desde mi experiencia, el kendoDateTimePicker es muy exigente; si el formato del filtro no puede especificar la precisión de fecha y hora de los datos de la columna, no la encontrará.

En su caso, su formato de columna es "MM/dd/yyyy HH:mm:ss" (con segundos). El formato predeterminado para kendoDateTimePicker es "MM/dd/yyyy h:mm tt" (sin segundos y la especificación de hora no coincide). Dado que inicializó un kendoDateTimePicker predeterminado, no importa lo que coloque en el selector, nunca podría filtrar a una fecha que IS EQUAL TO un valor de columna ya que no pudo ingresar cuántos segundos fueron.

La forma más fácil de asegurarse de que funcione es usar el mismo formato para la columna y el kendoDateTimePicker. Reemplace su DateTimeFilter funciona con esto:

function DateTimeFilter(control) 

   $(control).kendoDateTimePicker(
      format: "MM/dd/yyyy HH:mm:ss",
      timeFormat: "HH:mm:ss"
   );

Con respecto al kendoDateTimePicker:

  • format define el formato del valor de entrada para el control
  • timeFormat define el formato de hora del selector de hora
  • interval (no lo usé arriba), pero especifica el intervalo de tiempo en minutos entre cada opción del selector de tiempo.

No estoy usando asp.net mvc, así que no estoy 100% seguro de que esto resuelva tu problema. Sin embargo, estoy seguro de que solucionará al menos algunos de los problemas de filtrado que tiene. Puedo proporcionar un jsfiddle para una muestra puramente html/javascript si lo desea.

Sé que llegué tarde con esta respuesta, pero aún podría ayudar a alguien.

El código anterior funciona cuando selecciono la fecha y hora exactas de datetimepicker pero no funciona cuando selecciono isequalto. Por ejemplo: si tengo esta fecha y hora “21/12/2013 07:15:45” que se muestra en mi columna de cuadrícula de kendo y cuando copio esta fecha y hora en la opción isequalto en el filtro, no proporciona ningún dato.

Supongo que está experimentando esto porque su servidor DateTime los valores también contienen datos de fracciones de segundo y el operador de igualdad no los ignora en la comparación. He descubierto que es más fácil encontrar una solución del lado del servidor en lugar de escribir todo tipo de soluciones sucias de JS.

La idea es que cada vez que encuentres un filtro en el DataSourceRequest objeto que se filtraría en un DateTime propiedad, la reemplaza manualmente con una CompositeFilterDescriptorque trunca el valor a la precisión deseada, lo establece como el límite inferior y luego agrega una unidad de la precisión deseada (seg, min, hora, etc.) y lo establece como el límite superior.

El código es el siguiente:

public static class KendoHelpers

    public enum DateTimePrecision
    
        Seconds = 1,
        Minutes = 2,
        Hours = 4
    

    public static DataSourceRequest NormalizeDateFilters(this DataSourceRequest request, DateTimePrecision precision)
    
        // TODO: Add parameter validation.

        for (int i = 0; i < request.Filters.Count; ++i)
        
            FilterDescriptor filter = request.Filters[i] as FilterDescriptor;
            if (filter != null && filter.ConvertedValue is DateTime && filter.Operator == FilterOperator.IsEqualTo)
            
                DateTime val = (DateTime)filter.ConvertedValue;

                CompositeFilterDescriptor newFilter = new CompositeFilterDescriptor
                
                    LogicalOperator = FilterCompositionLogicalOperator.And
                ;

                DateTime lowerBound;
                DateTime upperBound;

                if (precision == DateTimePrecision.Seconds)
                
                    lowerBound = val.TruncateToWholeSeconds();
                    upperBound = lowerBound.AddSeconds(1);
                
                else if (precision == DateTimePrecision.Minutes)
                
                    lowerBound = val.TruncateToWholeMinutes();
                    upperBound = lowerBound.AddMinutes(1);
                
                else if (precision == DateTimePrecision.Hours)
                
                    lowerBound = val.TruncateToWholeHours();
                    upperBound = lowerBound.AddHours(1);
                
                else
                 Minutes
                    throw new ArgumentException("Not supported precision. Only Second, Minute, Hour values are supported.", "precision");
                

                newFilter.FilterDescriptors.Add(new FilterDescriptor
                
                    Member = filter.Member,
                    MemberType = filter.MemberType,
                    Operator = FilterOperator.IsGreaterThanOrEqualTo,
                    Value = lowerBound
                );

                newFilter.FilterDescriptors.Add(new FilterDescriptor
                
                    Member = filter.Member,
                    MemberType = filter.MemberType,
                    Operator = FilterOperator.IsLessThan,
                    Value = upperBound
                );

                request.Filters[i] = newFilter;
            
        

        return request;
    

Observaciones:

  • Él DateTime La extensión truncadora se basa en esta respuesta.
  • Este método solo hará algo si el operador está equalsporque si selecciona Es posterior a o similar, el comportamiento predeterminado funcionará igual de bien.
  • Este método no se preocupa por ningún regalo. CompositeFilterDescriptors porque una expresión dateToSearch = 2016-11-21 11:22:00 AND dateToSearch = 2016-11-21 11:59:00 no tiene sentido de todos modos.
  • Se podría hacer algo similar para DateTimeOffset valores.

Agradecemos que quieras favorecer nuestra faena dejando un comentario o dejando una puntuación te estamos eternamente agradecidos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *