telerik - mvc - Kendo DatePicker no valida la validez del formato de fecha personalizado

kendo datepicker set value

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. Para que el DatePicker se use para el campo de Fecha, use una cadena de formato de fecha personalizada, actualicé el archivo Date.cshtml en la carpeta EditorTemplates a lo siguiente:

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

Al hacer eso, logré que el DatePicker muestre 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.

Tras una investigación más exhaustiva, puedo decir que DatePicker está validando la fecha según un 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 soluciona 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. Me parece 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.

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

Answer 1

Cambié la regla de validación de 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 al tuyo, pero deberías poder modificarlo.

Answer 2

Internamente, la regla de validación de fecha para ASP.NET MVC (la validación discreta del cliente) utiliza el kendo.parseDate(string) , que internamente utilizará los patrones de fecha predefinidos 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. Por ejemplo, el formato de fecha corta para la cultura "de-DE" es "dd / MM / aaaa".

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 realmente hacer que dd / MM / aaaa funcione:

La validación de fecha de Kendo usa el formato de fecha de cultura kendo predeterminado kendo.culture (). Calendar.patterns.d (y .t por hora). 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 sucede 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 error menor en la función de validación de fecha en kendo.validator.js / kendo.web.js, que hace que la validación de fecha en las cuadrículas en Internet Explorer siempre falle.

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 usar 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 son en cuadrícula parecen no tener validación debido a la falta del atributo "data-val-date".

Además: "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 las validaciones. Por eso la utilizo en la validación aaaa-MM-dd y no [" MM / dd / aaaa "," dd / MM / aaaa "]." - ¿Cómo validar una fecha está en el formato aaaa-MM-dd usando el validador de kendo?

Globalization Line para Web.config:

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

Answer 4

Tuve el mismo problema cuando uso el componente Gantt here . El soporte de Telerik me puso en la línea correcta al referirme here .

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

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

Una vez incluido (junto con la secuencia de comandos apropiada de kendo.culture en mi paquete de JS) el ayudante comenzó a comportarse como se esperaba.

Answer 5

Yo uso este método y funciona bien ...

Agregue 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, anule el método de validación de 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

  [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"}))

/ Agregar secuencia de comandos document.ready function /

     $(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;
}

});