jquery - example - La fecha del campo debe ser una fecha en mvc en chrome

jquery ui datepicker es js

Question

Esta pregunta ya tiene una respuesta aquí:

• Jquery Datepicker Chrome 6 respuestas

Estoy haciendo una simple aplicación de Internet MVC4, que permite agregar algunos elementos a las categorías.

Esto es lo que hice hasta ahora.

Tengo un marcador de fecha en la vista de mvc. El script para datepicker es así.

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(function () {
$(''#dtItemDueDate'').datepicker({
dateFormat: ''dd/mm/yy'',
minDate: 0
});
});
</script>

La propiedad de mi modelo:

 [DisplayName("Item DueDate")]
[Required]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}",ApplyFormatInEditMode = true)]
[DataType(DataType.DateTime)]
public DateTime? dtItemDueDate { get; set; }
public char charCompleted { get; set; }

y en mi opinión, he hecho esto:

@Html.TextBoxFor(m => m.dtItemDueDate)
@Html.ValidationMessageFor(m => m.dtItemDueDate)

El error es así:

The field Item DueDate must be a date.

Lo extraño es que funciona en IE y en mozilla, pero no funciona en Chrome.

Encontré muchas publicaciones en SO, pero ninguna de ellas ayuda

¿Alguna idea / sugerencia?

Answer 1

A continuación se muestra el código de trabajo que puede ser útil para que alguien solucione el problema del selector de fecha en Chrome y Safari: Modelo:

public DateTime? StartDate { get; set; }

Ver:

@Html.TextBoxFor(model => model.StartDate, "{0:dd/MM/yyyy}", new { @type = "text", @class = "fromDate" })

js:

$(function () {
checkSupportForInputTypeDate();
$(''#StartDate'').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: ''dd/mm/yy''
});
});
//Function to configure date format as the native date type from chrome and safari browsers is clashed with jQuery ui date picker.
function checkSupportForInputTypeDate() {
jQuery.validator.methods.date = function (value, element) {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari || isChrome) {
var d = new Date();
return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
} else {
return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
}
};
}

Answer 2

Aquí está la solución de Maxim Gershkovich explicada un poco más:

jQuery.validator.methods.date = function (value, element) {
if (value) {
try {
$.datepicker.parseDate(''dd/mm/yy'', value);
} catch (ex) {
return false;
}
}
return true;
};

Notas :

• Esto depende del método jQuery datepicker que viene con jQuery UI

• Esto es realmente más robusto que la validación de fecha nativa que viene con jQueryValidate.

  De acuerdo con la documentación de la fecha de validación :

  Devuelve verdadero si el valor es una fecha válida. Utiliza la fecha incorporada de JavaScript para comprobar si la fecha es válida y, por lo tanto , no realiza verificaciones de cordura . Solo el formato debe ser válido, no la fecha real, por ejemplo 30/30/2008 es una fecha válida.

  Mientras que parseDate verificará que la fecha sea válida y que realmente exista.

Answer 3

La solución Rowan Freeman no funcionará para mí, ya que .toLocaleDateString(value) no analiza las cadenas de value

aquí está la solución que se me ocurrió => en jquery.validate.js encontrar esta definición de función: "fecha: función (valor, elemento)" y reemplazar el código con:

// http://docs.jquery.com/Plugins/Validation/Methods/date
date: function (value, element) {
var d = value.split("/");
return this.optional(element) || !/Invalid|NaN/.test(new Date((/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) ? d[1] + "/" + d[0] + "/" + d[2] : value));
},

Answer 4

Resolví este problema cambiando de DateTime a String .

Esta es la mejor solución para un buen mantenimiento que puedo pensar en este momento.

Answer 5

Sin cambiar jquery.validate.js, puede usar el fragmento de código siguiente en $(document).ready() :

jQuery.validator.methods.date = function (value, element) {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (isChrome) {
var d = new Date();
return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
} else {
return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
}
};

Answer 6

Nota del editor: esta respuesta ya no es válida, a partir de jQuery 1.9 (2013) se $.browser método $.browser

De acuerdo con este post , es un capricho conocido con navegadores basados ​​en Webkit.

Una solución es modificar jquery.validate.js encontrando la función date: function (value, element) y poner este código en él:

if ($.browser.webkit) {
//ES - Chrome does not use the locale when new Date objects instantiated:
var d = new Date();
return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
}
else {
return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
}