Kendo DatePicker no valida el formato de fecha personalizado

Question

Estoy usando Kendo DatePicker para editar un campo de fecha que se muestra en una rejilla Kendo en mi proyecto ASP.NET MVC 4. Con el fin de tener el Selector de fechas que se utiliza para la cadena de formato de fecha utilización de encargo campo Fecha, he actualizado el archivo Date.cshtml bajo la carpeta EditorTemplates a lo siguiente:

@(Html.Kendo().DatePickerFor(m => m).Format("dd/MM/yyyy")) 

Al hacer eso, logró que el DatePicker visualizar el formato como yo quiero. Sin embargo, falló la validación de algunas de las fechas ingresadas para la entrada, ya sea a través de la clave manual o la selección del calendario emergente.

En una investigación posterior, puedo decir que el DatePicker está validando la fecha según el formato M/d/Y. Esa suposición se basó en mis fundamentos de que el 12/1/2012 es una fecha válida, mientras que el 13/1/2012 no lo es.

También intenté agregar .ParseFormat("dd/MM/yyyy") al final de la declaración DatePicker en Date.cshtml pero no corrige nada. Entonces yo diría que esto definitivamente es un error y le informaré a Telerik más tarde.

Pero por el momento, estoy buscando una solución para que esto funcione. Encuentro que puedo anular kendo.ui.validator.rules.mvcdate en Javascript para tener mi propia función de validación. Si bien esto funciona bien en Chrome, no funciona en IE9.

¿Alguna idea de cómo puedo hacer que DatePicker acepte el formato de entrada dd/MM/yyyy? Gracias por adelantado.

Answer 1

Internamente, la regla de validación de fecha para ASP.NET MVC (la validación discreta del cliente), usa el método kendo.parseDate(string), que internamente usará the predefined date patterns si no se define/n ningún formato/s. Supongo que en su caso la cultura predeterminada es "en-US" y es por eso que la validación falla, ya que las fechas con el formato "dd/MM/aaaa" se consideran no válidas. Una posible solución es anular la regla de validación de fecha (como lo hizo) y analizar la cadena con un formato específico. La otra opción es establecer configuraciones de cultura diff para la página. For instance, the short date format for the "de-DE" culture is "dd/MM/yyyy".

Answer 2

me cambió la regla de validación Fecha:

$.validator.methods.date = function (value, element) { 
    return this.optional(element) || /^\d\d?-\w\w\w-\d\d\d\d/.test(value); 
}; 

Mi formato es ligeramente diferente a la suya, pero usted debería ser capaz de modificar esto.

Answer 3

La respuesta simple es no usar un formato de fecha personalizado. Simplemente siempre haga .Format ("MM/dd/aaaa") explícitamente y no use "dd/MM/aaaa" ("aaaa-MM-dd" o "MMM d, aaaa" podría estar bien). Y configure su servidor web para usar la configuración regional de EE. UU. En el panel de control o en Web.config.

Ahora, para una explicación del problema y cómo hacer realidad el trabajo dd/mm/aaaa:.

validación de fechas utiliza el kendo kendo kendo.culture formato predeterminado de fecha de la cultura() calendar.patterns.d (y .t por tiempo). Si configura esto directamente o aplica una cultura diferente, eso establece el formato de fecha que se validará. Utiliza kendo.parseDate, por lo que algo como "MMM d, yyyy" estará bien, pero algo como "dd/MM/yyyy" fallará la validación si d> 12 y se usa la cultura estadounidense predeterminada (ver demo de Kendo Globalization para saber cómo cambiar culturas).

La razón por la que esto ocurre es porque DatePicker.Format (...) está ligeramente roto. Es un error en kendo.aspnetmvc.js que proporciona una función de validación de fecha alternativa que ignora el formato DatePicker y simplemente ejecuta parseDate usando el formato de fecha de cultivo actual.Este es el javascript fijo:

date: function(input) { 
     var dp = input.data("kendoDatePicker") || input.data("kendoDateTimePicker"); 
     if (dp != undefined) { 
      return input.val() === "" || kendo.parseDate(input.val(), dp.options.format) !== null; 
     } 

     return input.val() === "" || kendo.parseDate(input.val()) !== null; 
    }, 

Además, hay un pequeño error en la función de validación de la fecha en kendo.validator.js/kendo.web.js que hace la validación fecha en las redes de Internet Explorer siempre fracasan.

Además, asegúrese de que la globalización de su servidor web esté configurada en EE. UU. Para que coincida con la cultura kendo (en Web.config o en el Panel de control regional de Windows). Firefox publica MM/dd/aaaa y el servidor web debe coincidir. Además, el formato de fecha regional del servidor web se aplica a todos los navegadores de cliente si no especifica DatePicker.Format explícitamente. Entonces, si su servidor web tiene formatos de fecha canadiense/británica establecidos en el panel de control para Windows, la rejilla de Kendo cambiará a dd/MM/aaaa, luego se producirá un error en la validación y nuevamente cuando Firefox publique en el servidor web (cultura predeterminada de kendo en mensajes de Firefox MM/dd/aaaa así que si su servidor web espera dd/MM/aaaa, el enlace de fecha del mvc falla).

Nota: Si prefiere utilizar el validador de fecha que no es mvc: elimine el atributo data-val-date. Agregar: data-type = \ "date \" data-format = \ "dd/MM/aaaa h: mm: ss tt \". Creo que esto no es posible usando el helper html. Tienes que especificar el html y javascript directamente.

Nota: los DatePickers que no están en la cuadrícula parecen no tener validez debido a la falta del atributo "data-val-date".

También: "Recuerda que KendoUI primero usa la opción parseFormats para analizar la fecha, luego la convierte a la opción de formato y finalmente ejecuta validaciones. Es por eso que uso en la validación aaaa-MM-dd y no [" MM/dd/yyyy "," dd/MM/yyyy "]". - How to validate a date is in the format yyyy-MM-dd using kendo validator?

Línea globalización de Web.config:

<globalization requestEncoding="utf-8" responseEncoding="utf-8" culture="en-US" uiCulture="en-US" /> 

Answer 4

[DataType(DataType.Date)] 
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)] 
    [Required(ErrorMessage = "Pick a date from Kendo Date Picker")] 
    public DateTime mydate{ get; set; } 

    @(Html.Kendo().DatePickerFor(m=>m.mydate) 
       .Name("MyDate") 
       .Format("dd/MM/yyyy") 
       .ParseFormats(new string[] {"dd/MM/yyyy"})) 

/Añadir guión document.ready función/

 $(document).ready(function() { kendo.culture("en-GB"); 

     $.validator.methods['date'] = function (value, element) { 
    var check = false; 
    var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/; 
    if (re.test(value)) { 

     var adata = value.split('/'); 
     var dd = parseInt(adata[0], 10); 

     var mm = parseInt(adata[1], 10); 
     var yyyy = parseInt(adata[2], 10); 
     var xdata = new Date(yyyy, (mm - 1), dd); 

     if ((xdata.getFullYear() == yyyy) && (xdata.getMonth() == (mm - 1)) && 
      (xdata.getDate() == dd)) { 

      check = true; 
     } 
     else { 
      alert(value); 
      check = false; 
     } 

    } else 
     check = false; 
    return this.optional(element) || check; 
} 

});

Answer 5

utilizo este método y que está trabajando muy bien ..

Añadir estas dos líneas en su página ..

<script src="@Url.Content("~/Scripts/jquery.validate.js")"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script> 

A continuación, reemplazar el método de validación fecha de jQuery ..

<script> 
    $(document).ready(function() { 
     kendo.culture("en-MY"); //your culture 
     $.validator.addMethod('date', 
      function (value, element) { 
       return this.optional(element) || kendo.parseDate(value) 
      }); 
    }); 
</script> 

Mientras tanto en mi Web.config Tengo esto ...

<system.web> 
    <globalization uiCulture="en-MY" culture="en-MY"></globalization> 
</system.web> 

Answer 6

Tuve el mismo problema cuando uso el componente Gantt here. El soporte de Telerik me puso en las líneas correctas al referirme al here.

Mi omisión crucial era que no había incluido la siguiente en mi archivo _Layout.vbhtml:

<script> 
kendo.culture("en-GB"); 
</script> 

Una vez incluido (junto con el guión kendo.culture apropiada en mi paquete JS) el ayudante empezó a comportarse como esperado.