1

me gustaría saber como cambiar el formato de un input tipo date

Tengo este input en el que se muestra dd-mm-yyyy

<p>Fecha <input type="date" name="fecha" required></p>

Pero a la hora de hacer el registro con php en mi base de datos (la columna en la que se registra es en formato de texto) aparece en formato yyyy-mm-dd.

¿Alguien sabe por qué?

7
  • Y de que formato es que lo necesitas?
    – Einer
    Commented el 22 mar. 2018 a las 15:24
  • Necesito que en mi bd se registre así dd-mm-yyyy
    – Pelukosa
    Commented el 22 mar. 2018 a las 15:25
  • Cual es el tipo de dato de la columna donde guardas la fecha?
    – Einer
    Commented el 22 mar. 2018 a las 15:26
  • 1
    Tefef leyendo este comentario tuyo: Necesito que en mi bd se registre así dd-mm-yyyy, quiero advertir que hacer eso sería un grave error. Recomendaría que guardes los datos en la forma natural en que lo hace la base de datos, es decir, yyyy-mm-dd. De lo contrario, tendrás muchos problemas cuando tengas que mantener los datos, o hacer cálculos con ellos, etc. Además, los DBMS tienen muchas funciones para formatear los datos como quieras, en la salida. Guardar datos formateados es matarlos.
    – A. Cedano
    Commented el 22 mar. 2018 a las 15:51
  • 1
    Por ejemplo, si tú guardas el dato del tipo DATETIME la base de datos lo guardará siempre así: YYYYMMDD HH:MM:SS. Ese dato te ofrecerá todas las ventajas: guardar fecha y hora en una sola columa, hacer cálculos exactos, impedir introducir fechas erróneas... con un VARCHAR controlar eso es un dolor de cabeza. Y si quieres calcular, ¡tendrás que convertir a fecha un dato que debía ser fecha desde siempre! En cambio, para darle formato, basta con hacer algo como esto: SELECT DATE_FORMAT(fecha,'%d/%m/%Y') AS mifecha ... o puedes darle formato en el código PHP también.
    – A. Cedano
    Commented el 22 mar. 2018 a las 16:02

7 respuestas 7

1

No se puede cambiar el formato de un input[date], no por lo menos hasta la fecha de hoy. Lo que si puedes hacer darle le formato que deseas antes de guardar la fecha.

Puedes lograrlo utilizando momentjs, convertirla a un objeto momentjs y luego darle el formato deseado:

function obtenerFecha(e)
{

  var fecha = moment(e.value);
  console.log("Fecha original:" + e.value);
  console.log("Fecha formateada es: " + fecha.format("DD/MM/YYYY"));
}
<script src="https://momentjs.com/downloads/moment.js"></script>

<input type="date" id="date" onchange="obtenerFecha(this)" />

1

Si el front tiene el formato tal cual lo necesitas, simplemente cambia ese formato en el back para guardarlo como desees en tu base de datos.

Asumiendo que tu campo es varchar como lo has dicho.

$fecha = new DateTime('2006-12-30');
echo $fecha->format('d-m-Y');

En su defecto podría ser así:

$fecha = new DateTime($_POST['fecha']);
echo $fecha->format('d-m-Y');
0

El formato de los inputs de tipo date lo renderiza el navegador:

The control's UI varies in general from browser to browser; at the moment support is patchy, see Browser compatibility for further details. In unsupported browsers, the control degrades gracefully to a simple .

Fuente

Más info

Por tanto, no se puede cambiar directamente el formato si tu input sigue siendo de tipo date. Si no es mucho problema, lo mejor es que lo declares como tipo text y utilices Javascript para darle el formato buscado (con un datepicker de jQuery o Bootstrap, por ejemplo)

1
  • pff.. pues entonces tendré que hacerlo con js..
    – Pelukosa
    Commented el 22 mar. 2018 a las 15:39
0

El problema es que en las bases de datos si usas el tipo date o datetime te guardara yyyy-mm-ddsi deseas obtenerlo dd-mm-yyyy debes guardarlo en un campo tipo varchar

1
  • lo tengo en varchar
    – Pelukosa
    Commented el 22 mar. 2018 a las 15:36
0

Veo que en las etiquetas estas usando php, puedes dejar el html igual pero en php utilizas la funcion date:
date('d-m-Y',strtotime(/*nombre de tu campo fecha*/$fecha ));

0

<input id="date" type="date" value="2019-01-01">

var fecha=document.getElementById("date").value;
 var resFecha = fecha.split("-");
 var reversedFecha = resFecha.reverse(); 
 var FechaOb=reversedFecha.join('-');
alert(FechaOb);

1
  • ¿Podrías explicar cómo este código soluciona el problema descrito por @Pelukosa? Commented el 4 nov. 2019 a las 9:20
-3

Debes definirle el pattern que requieres:

 <input type="date"  pattern="[0-9]{2}-[0-9]{2}-[0-9]{4}" required/>

1
  • Esa solución no funciona. El atributo pattern es una expresión regular que debe cumplir el input de tipo text pero en ningún caso sirve para formatear un input de tipo date.
    – Kiko_L
    Commented el 22 mar. 2018 a las 15:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.