type - ¿Cómo establecer el formato de fecha en la etiqueta de entrada de fecha HTML?
insertar fecha en formulario html (11)
¿Por qué no utilizar el control de fecha html5 tal como está, con otros atributos que le permiten funcionar bien en los navegadores compatibles con el tipo de fecha y que aún funciona en otros navegadores como Firefox que todavía no es compatible con el tipo de fecha?
<input type="date" name="input1" placeholder="YYYY-MM-DD" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD"/>
Me pregunto si es posible establecer el formato de fecha en la etiqueta html <input type="date"></input> ... Actualmente es aaaa-mm-dd, mientras que lo necesito en dd-mm- formato yyyy.
Creo que no hay solución si solo usas HTML
creo que deberías usar jquery
el plugin jquery adecuado es jQuery Masked Input
Creo que sí, en HTML no hay sintaxis para el formato DD-MM-YYYY. Consulte esta página http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm . Algo te ayudará. De lo contrario, use el selector de fecha de Javascript.
El formato del valor de la fecha es ''YYYY-MM-DD'' . Mira el siguiente ejemplo
<form>
<input value="2015-11-30" name=''birthdate'' type=''date'' class="form-control" placeholder="Date de naissance"/>
</form>
Todo lo que necesita es formatear la fecha en php, asp, ruby o lo que sea para tener ese formato.
En realidad lo hay, pero parece que nadie se ha molestado en apoyarlo. Tenías razón, es <input type="date"> . En caso de que alguien me dude http://www.w3schools.com/html/html5_form_input_types.asp
Encontré la misma pregunta o pregunta relacionada en
¿Hay alguna forma de cambiar el tipo de entrada = formato de "fecha"?
Encontré una solución simple. No puedes dar formato de partículas, pero puedes personalizar Like this.
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:
Implementación limpia sin dependencias https://jsfiddle.net/h3hqydxa/1/
<style type="text/css">
.dateField {
width: 150px;
height: 32px;
border: none;
position: absolute;
top: 32px;
left: 32px;
opacity: 0.5;
font-size: 12px;
font-weight: 300;
font-family: Arial;
opacity: 0;
}
.fakeDateField {
width: 100px; /* less, so we don''t intercept click on browser chrome for date picker. could also change this at runtime */
height: 32px; /* same as above */
border: none;
position: absolute; /* position overtop the date field */
top: 32px;
left: 32px;
display: visible;
font-size: 12px; /* same as above */
font-weight: 300; /* same as above */
font-family: Arial; /* same as above */
line-height: 32px; /* for vertical centering */
}
</style>
<input class="dateField" id="dateField" type="date"></input>
<div id="fakeDateField" class="fakeDateField"><em>(initial value)</em></div>
<script>
var dateField = document.getElementById("dateField");
var fakeDateField = document.getElementById("fakeDateField");
fakeDateField.addEventListener("click", function() {
document.getElementById("dateField").focus();
}, false);
dateField.addEventListener("focus", function() {
fakeDateField.style.opacity = 0;
dateField.style.opacity = 1;
});
dateField.addEventListener("blur", function() {
fakeDateField.style.opacity = 1;
dateField.style.opacity = 0;
});
dateField.addEventListener("change", function() {
// this method could be replaced by momentJS stuff
if (dateField.value.length < 1) {
return;
}
var date = new Date(dateField.value);
var day = date.getUTCDate();
var month = date.getUTCMonth() + 1; //zero-based month values
fakeDateField.innerHTML = (month < 10 ? "0" : "") + month + " / " + day;
});
</script>
No lo sé con certeza, pero creo que se supone que el navegador debe manejarlo en función de la configuración de fecha / hora del usuario. Intente configurar su computadora para que muestre las fechas en ese formato.
Si usas jQuery, aquí hay un buen método simple
$("#dateField").val(new Date().toISOString().substring(0, 10));
O está la vieja manera tradicional:
document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
Tu no
En primer lugar, su pregunta es ambigua: ¿se refiere al formato en que se muestra al usuario o al formato en que se transmite al servidor web?
Si se refiere al formato en el que se muestra al usuario, esto se debe a la interfaz del usuario final, no a todo lo que especifique en el HTML. Generalmente, esperaría que se basara en el formato de fecha que está configurado en la configuración regional del sistema operativo. No tiene sentido intentar anularlo con su propio formato preferido, ya que el formato en el que se muestra es (en general) el correcto para la configuración regional del usuario y el formato en el que el usuario está acostumbrado a escribir y comprender las fechas.
Si se refiere al formato en el que se transmite al servidor, está tratando de solucionar el problema incorrecto. Lo que debe hacer es programar el código del lado del servidor para aceptar las fechas en el formato aaaa-mm-dd.
$(''input[type="date"]'').change(function(){
alert(this.value.split("-").reverse().join("-"));
});