c# - validar - El campo debe ser una fecha: la validación de DatePicker falla en Chrome-mvc

validar fecha c# dd mm yyyy

Question

Tengo un problema extraño Mi validación de fecha no funciona en Chrome. He intentado esta respuesta, pero no funcionó para mí.

Tengo esto en mi modelo:

[Display(Name = "Date")]
[DataType(DataType.Date)]
public DateTime Date { get; set; }

Mi vista:

<div class="editor-field">
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
</div>
$(document).ready(function () {
$(''.picker'').datepicker({
dateFormat: ''dd.mm.yy'',
changeMonth: true,
changeYear: true,
selectOtherMonths: true
});
});

Todo funciona en Opera y Firefox, pero a Chrome no le gusta este tipo de fecha. Constantemente aparece el siguiente error The field ''Date'' must be a date .

¿Algunas ideas?

ACTUALIZAR

Parece que hay un problema cuando el código está dentro de una vista parcial. Cuando copio ese código en una página principal, la validación funciona bien.

Estoy insertando una vista parcial dentro de mi vista principal simplemente así:

@Html.Partial("_CreateOrEdit", Model)

Y ese código de arriba está dentro de una vista parcial:

@model Pro.Web.Models.Model
<div class="editor-field">
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)

$(document).ready(function () {
$(''.picker'').datepicker({
dateFormat: ''dd.mm.yy'',
changeMonth: true,
changeYear: true,
selectOtherMonths: true
});
</script>
});

ACTUALIZACIÓN2

No funciona después de todo. A veces funciona, a veces no. Hice clic un par de veces en las fechas y, a veces, en los pases de validación. Para la misma fecha, podría haber una validación buena y errónea.

Este es el html de salida para el campo de fecha:

<div class="editor-field">
<input class="picker" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="date" name="Item.Date" type="text" value="1.1.0001. 0:00:00" />
<span class="field-validation-valid" data-valmsg-for="Item.Date" data-valmsg-replace="true"></span>
</div>

Answer 1

El problema parece ser con <input type="date" /> (HTML5) ya que la especificación dice que el valor válido se define como RFC3339 .

Así que cambié mi Vista a algo como esto:

<script>
$(function () {
$("#validfrom").datepicker({
altField: "#ValidFrom",
altFormat: "yy-mm-dd"
});
});
</script>
<div class="editor-label">
@Html.LabelFor(model => model.ValidFrom)
</div>
<div class="editor-field">
<input id="validfrom" type="text" name="validfrom" />
@Html.HiddenFor(model => model.ValidFrom)
@Html.ValidationMessageFor(model => model.ValidFrom)
</div>

Espero eso ayude.

Answer 2

Exactamente la misma situación aquí (vista parcial)

Lo resolví eliminando el atributo de validación y realizando la validación en el lado del servidor:

$(''#date'').removeAttr("data-val-date");

Answer 3

Es tarde para llegar a la fiesta después de un año, pero he intentado todas las soluciones que pude encontrar con respecto a este error, y ninguna de ellas me ayudó. Entonces, para cualquiera que esté luchando como yo aquí es lo que resolvió este problema.

Agregue al final de jquery.validate.globalize.js y su versión minimizada (depende de lo que esté usando) este pequeño fragmento de código.

...
$.validator.methods.range = function (value, element, param) {
var val = Globalize.parseFloat(value);
return originalMethods.range.call(this, val, element, param);
};
}(jQuery, Globalize));

Globalize.culture("en-GB");

Por supuesto, use su propia configuración de cultura entre comillas.

¡Espero eso ayude!

Answer 4

Lo resolví eliminando el atributo de validación

@model Pro.Web.Models.Model
<div class="editor-field">
@{ Html.EnableClientValidation(false); }
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
@{ Html.EnableClientValidation(true); }

Answer 5

Yo tenía el mismo error. Lo resolvió aplicando datetime como tipo,

 @Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" , @type = "datetime" } })

de manera similar use el tiempo solo por el tiempo

 @Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" , @type = "time" } })

Answer 6

En mi opinión, los problemas son que MVC está generando una entrada HTML5 de fecha con [type=date] . Esto hace que en formato de fecha válida de Chrome sea el mismo que el formato de fecha del sistema.

Probablemente pueda establecer el formato de fecha en MVC para que sea común con JqueryUI usando el siguiente atributo:

[DataType(DataType.Date), DisplayFormat( DataFormatString="{0:dd.MM.yy}", ApplyFormatInEditMode=true )]

La segunda idea es usar el código del artículo: Crear un marcador de fecha nativo HTML 5 con un retorno a la interfaz de usuario jQuery

Una cosa más. Hay un buen tema sobre la fecha en la entrada html: ¿Hay alguna forma de cambiar el tipo de entrada = formato de "fecha"?