google - reproductor html5 chrome
El campo de fecha HTML-5 muestra como "mm/dd/aaaa" en Chrome, incluso cuando se establece una fecha válida (4)
Acabo de actualizar una aplicación ASP.Net MVC a MVC-4. El editor de campo para las entradas basadas en los valores de DateTime ahora incluye el atributo HTML-5 type="date" / declaración de valor.
Ahora, al ver en Chrome, mis entradas de fecha aparecen con "mm / dd / aaaa" en el campo de entrada:
Incluso cuando paso una fecha correctamente formateada con el atributo de valor:
<input value="2012/10/02" type="date"/>
Todavía estoy recibiendo "mm / dd / aaaa" en el cuadro de entrada, que está ahí hasta que el usuario cambie el valor manualmente.
El problema parece ser Chrome y es independiente de mi marco de back-end. Vea este problema en acción: jsFiddle
... gran problema para editar discos, por supuesto. Si el usuario saca un registro que ya tiene una fecha válida, no pasará la validación en el envío, a menos que haga clic en el campo y restablezca el valor manualmente.
No hay problemas con los otros navegadores.
¿Es esto un error de Chrome? ¿O me he perdido algo sobre la forma en que se supone que funciona el campo de fecha HTML-5?
ACTUALIZAR
Vea este violín http://jsfiddle.net/HudMe/5/ : http://jsfiddle.net/HudMe/5/ Tiene tanto una entrada de fecha HTML-4 como una entrada de fecha HTML-5, cada una con "10/01/2012" establecido como el valor en carga de página.
Haga clic en cualquiera de los campos de fecha. El Javascript debe generar una alerta con el valor del campo para ese elemento.
Debido a que se ha pasado una fecha válida con el atributo de valor, esto debería mostrar "10/01/2012", pero en Chrome, para el campo de fecha HTML-5, no se muestra nada. Restablezca este valor a mano, luego haga clic de nuevo, y ahora se mostrará.
El valor del campo HTML5 muestra y alerta como se esperaba sin ajustes después de la carga de la página en Safari, Firefox, IE y Opera.
Nota sobre la respuesta aceptada:
Para otros usuarios de Asp.net mvc-4, puede ajustar el formato de visualización con el atributo [DisplayFormat] en la declaración de campo DateTime en su modelo de visualización. (encontrado en https://stackoverflow.com/a/12634470/613004 )
En cromo para establecer el valor que necesita para hacer YYYY-MM-DD supongo porque esto funcionó: http://jsfiddle.net/HudMe/6/
Para que funcione, debe establecer la fecha como 2012-10-01
Estaba teniendo el mismo problema, con un valor como 2016-08-8, luego resolví agregar un cero para tener dos dígitos días, y funciona. Probado en Chrome, Firefox y Edge
today:function(){
var today = new Date();
var d = (today.getDate() < 10 ? ''0'' : '''' )+ today.getDate();
var m = ((today.getMonth() + 1) < 10 ? ''0'' :'''') + (today.getMonth() + 1);
var y = today.getFullYear();
var x = String(y+"-"+m+"-"+d);
return x;
}
Tenía el mismo problema. Un colega resolvió esto con jQuery.Globalize .
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.globalize/globalize.js" type="text/javascript"></script>
<script src="/Scripts/jquery.globalize/cultures/globalize.culture.nl.js"></script>
<script type="text/javascript">
var lang = ''nl'';
$(function () {
Globalize.culture(lang);
});
// fixing a weird validation issue with dates (nl date notation) and Google Chrome
$.validator.methods.date = function(value, element) {
var d = Globalize.parseDate(value);
return this.optional(element) || !/Invalid|NaN/.test(d);
};
</script>
Estoy usando jQuery Datepicker para seleccionar la fecha.
Tengo el mismo problema y encontré la solución que se proporciona a continuación con datepicker completo usando HTML simple, Javascript y CSS. En este código, preparo formato como dd / mm / aaaa pero puedes trabajar cualquiera.
Código HTML:
<body>
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt" onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
</body>
Código CSS:
#dt{text-indent: -500px;height:25px; width:200px;}
Código Javascript:
function mydate()
{
//alert("");
document.getElementById("dt").hidden=false;
document.getElementById("ndt").hidden=true;
}
function mydate1()
{
d=new Date(document.getElementById("dt").value);
dt=d.getDate();
mn=d.getMonth();
mn++;
yy=d.getFullYear();
document.getElementById("ndt").value=dt+"/"+mn+"/"+yy
document.getElementById("ndt").hidden=false;
document.getElementById("dt").hidden=true;
}
Salida:
